CSS customizations
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:
.glopal-hide
Hide this content from all international sites. Hide content from your original site that is irrelevant to visitors on your international sites.
.glopal-hide-[Country]
Hide this content from a specific international site for the given country, where <Country> is a two-letter country code.
Example: .glopal-hide-ES
(hide content from the Spanish site)
.glopal-show
Hide this content from your original site and have this content visible only on international sites.
.glopal-show-[Country]
Hide this content from your original site and have this content visible only on a specific international site for the given country.
Example: .glopal-show-ES
(show content on the Spanish site)
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:
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:
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:
#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).
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.
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:
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:
on localized pages will be changed to:
where MX is country code and es-MX language code.
You can limit CSS selectors like:
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.
Using a custom CSS approach, it is possible to replace fonts on a localized site for specific languages without affecting other sites.
Last updated