Customizing content on international sites by adding CSS to my domestic site

Below you will find several examples showcasing how you can tailor the experience of visitors  browsing your international sites by using CSS classes on your domestic site. 

Please note that most of the time, you will need development skills to implement those changes. If you are not a developer, depending on the element you want to modify, you may have access to the source code to make edits directly from your ecommerce back office. However, be careful when applying changes.

If you don’t have minimal knowledge of HTML and CSS you may break your store’s layout.

Predefined CSS classes

You can assign pre-defined CSS classes to control content visibility. Classes are to be applied on the original site and can also be used to hide international-specific content from the origin site while showing this content on the localized site.

Available CSS classes for content customization:

Do not use these classes for styling elements.

If you want to apply an additional style to the element please assign additional classes and keep those only for hiding & showing the element.

Customization scenarios

#1 - You’re promoting free shipping, but only to your local customers.

This promotional message is very valuable for your visitors but as it applies only to your domestic market, it's best to hide it on international versions of your site.

Firstly - use your content editor on HTML view mode to identify the text you wish to hide:

<h3>Free Shipping Offer</h3>
<p>Orders over $39.99 qualify for our fast free shipping offer.</p>

Then wrap this content into a new section by adding <div>...</div> markup around and add a CSS class to hide this element from all international sites:

<div class="glopal-hide">
 <h3>Free Shipping Offer</h3>
 <p>Orders over $39.99 qualify for our fast free shipping offer.</p>
</div>

If adding a new <div>...</div> element would cause issues with the page layout, the class can be applied separately for each individual element, like this:

<h3 class="glopal-hide">Free Shipping Offer</h3>
<p class="glopal-hide">Orders over $39.99 qualify... offer.</p>

#2 - There's a specific message you would like only your French and Spanish buyers to see.

The message should be added to the product pages, however, it should stay hidden from your domestic and all international visitors except those shopping on the French and Spanish versions of the site.

Solution - add the text/banner on the desired page and make it available to international shoppers only (visible only on the translated sites and hidden from the domestic shopper).

<div class="glopal-show-ES glopal-show-FR">
    Special offer visible here.
</div>

To minimize content flickering it's recommended to add an additional CSS snippet to the main CSS file of your site theme. Detailed instructions on how to do that have been provided in a later section.

#3 Specific message only for your international shoppers.

You would like all your international buyers to be aware, that taxes and duties are not included in the price and will be applied separately at a later stage and in accordance with the buyer's local rules and regulations. 

This information should be added to the cart page and shown to international shoppers only. 

Your domestic visitors on your original site should not see this message.

Solution - add the information to the cart page and hide it from domestic shoppers.

<div class="glopal-show">
  Prices do not include local tax or duty.
</div>

To minimize content flickering it's recommended to add an additional CSS snippet to the main CSS file of your site theme. Detailed instructions on how to do that have been provided in a later section.

Minimize flickering when hiding on origin site

To make elements hidden on your original site you need to set up additional CSS.

For your convenience CSS is already provided as part of the Glopal extension/app code and loaded asynchronously. As code is loaded after the page, this may cause content flashing. To minimize this it's recommended to add following CSS snippet to the main CSS file of your site theme:

style.css

.glopal-show, *[class*="glopal-show-"] {
   display: none !important;
}

Custom CSS

Each localized website source code is extended with attributes containing the current country and current language code. You can use them to limit CSS customization just to selected countries or languages.

Original source:

<html class="some-class">...

on localized pages will be changed to:

<html class="some-class glopal glopal-MX" lang="es-MX">...

where MX is country code and es-MX language code.

You can limit CSS selectors like:

html.glopal a { // all links on all localized pages.
   color: red;
}
html.glopal-MX a, html.glopal-PL a { // all links on Mexican and Polish page
   color: green;
}
html.glopal[lang^="es"] a { // all links on localized pages in Spanish
   color: navy;
}

Custom CSS can be added on the origin site to be inherited on the localized sites or can be defined only on the localized sites using the Custom CSS option in the Glopal Merchant Account.'

Font replacement

When localizing a website, it's crucial to ensure that the chosen fonts support all necessary glyphs and ligatures for the target language. Missing local glyphs or ligatures can result in incorrect or unreadable text, which negatively impacts user experience and accessibility. To address this issue, you can use CSS to replace the font with an alternative that supports the required character set.

This can be done by specifying multiple fonts in the font-family property, where the browser will use the first available font that supports the text. The unicode-range descriptor can help define which characters each font should support, ensuring that text is displayed correctly across different languages.

@font-face {
   font-family: 'Primary Font';
   src: url('path-to-primary-font.woff2') format('woff2');
   unicode-range: U+000-5FF; /* Basic Latin, Latin-1 Supplement, Latin Extended-A */
}
@font-face {
   font-family: 'Fallback Font';
   src: url('path-to-fallback-font.woff2') format('woff2');
   unicode-range: U+0100-024F; /* Latin Extended-B */
}
body {
   font-family: "Primary Font", "Fallback Font", sans-serif;
}

Using a custom CSS approach, it is possible to replace fonts on a localized site for specific languages without affecting other sites.

html.glopal[lang^="es"] body {
   font-family: "Fallback Font", sans-serif;
}