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.

• Scenario #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 new <div>...</div> element would cause issues with the page layout, 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>

• Scenario #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 latter section.
  
  
  
• Scenario #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 to the buyer's local rules and regulations. 
  
  This information should be added on 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 latter section.
  

Minimize flickering when content should only show on international sites

• 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 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:
  

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

Available CSS classes for content customization

Do not use these classes for styling elements.
If you want to apply additional style to the element please assign additional classes and keep those only for hiding & showing the element.

How to make those changes using your ecommerce back office ? 

If you have minimum knowledge of HTML and CSS, you may want to apply such changes directly from your ecommerce back office. Please note that the source code of all elements appearing on your site might not be accessible. Usually, only source code for theme or template files as well as source code for product detail pages are editable from the back office. 

If your site is running on Shopify Platform

You may want to edit your theme files. These files contain Liquid (Shopify’s templating language), HTML, CSS, JSON and Javascript. If you have basic understanding of these elements, you can follow guidelines on this Shopify help page: how to edit theme code. 

If your site is running on BigCommerce Platform

You may use the Page builder feature provided by the platform. This requires knowledge of HTML/CSS and Handlebars. You can follow guidelines on this BigCommerce help page : Editing Stencil Theme files