Theme Customization

Use Orbe CSS & JS variables to customize your storefront

Developers only: This documentation is intended for developers with technical knowledge and experience in Shopify Theme Development.

CSS Classes

User Location

To customize your theme files, you can use CSS variables to add your styles. Orbe adds a custom class to the body element of the theme, which can be used to apply customizations throughout the entire theme.

The CSS class is named orbe-country-code--COUNTRYCODE, where COUNTRYCODE is the ISO two-letter code (alpha-2) of the country where the customer is located. For example, if the customer is in the United Kingdom, the following class will be added to the body element:

<body class="orbe-country-code--GB"></body>

You can find the global list of country ISO two-letter codes at https://countrycode.org/.

You can add your custom CSS in the Advanced CSS section inside Orbe: Custom CSS. This ensures the CSS is always available in any theme where the Orbe app is enabled.

Country Flags

If you want to customize your Shopify store and display the flag of any country, Orbe provides a set of auxiliary classes that can be used. These classes enable you to incorporate country flags into your design in various ways.

The country selectors mentioned here are just one example of how you can utilize these classes.

Usage Example:

To display the flag of Australia, you can use the following HTML:

<div class="orbe-flags-au"></div>

This will render the flag of Australia as the background image of the <div> element.

You can replace "au" in the class name with the appropriate two-letter country code to display the flag of any desired country.

You can even use liquid code to show the country flag of the current experience dynamically. For example:

<div class="orbe-flags-{{ localization.country.isco_code | downcase }}"></div>

This will dynamically render the flag of the current country experience by retrieving the appropriate country code from the localization object.

Please note that the provided classes are not limited to selectors and can be used in any way you see fit for your customization needs.

JavaScript Variable

Orbe creates a JS variable called orbeCountryCode and access it with mdApp_orbeCountryCode function, which allows developers to access the country where the customer is located based on their IP address. This object returns the country code where the customer is browsing, which can be used to customize the theme further.

Here is an example of how to use this object:

var myCustomVar = '';
 setTimeout(() => {
   orbito.getRemoteCountryCode().then((value) => {
    myCustomVar = value;
    if (myCustomVar === 'GB') {
      console.log("User is in the UK");
    }
  });
}, 1000);

This code will log the message "User is in the UK" to the console only if the user is located in the United Kingdom, based on the orbeCountryCode object. You can modify the message to suit your needs and use this code as a starting point for implementing other customizations based on the user's location.

For instance, you could show a message on the product pages of users in the UK saying "2-hour delivery". Here's some sample code to achieve this:

setTimeout(() => {
  orbito.getRemoteCountryCode().then((value) => {
    if (value === 'GB') {
      document.querySelector('.delivery-message').innerHTML = '2-hour delivery';
    } else if (value === 'US') {
      document.querySelector('.delivery-message').innerHTML = '1-day delivery';
    }
  });
}, 1000);

Note that you can adjust the delivery message based on the customer's country code, and the code above assumes you have a div element on your product pages with the class .delivery-message where you want to show the delivery message.

If you have any questions or need additional assistance, please don't hesitate to contact our Support team through chat or email at support@orbe.app.

PreviousIntegrate your Country Selector NextHide the popup based on the country

Last updated 8 months ago