How to use custom Javascript and custom CSS

ORBE has two app embed when you install it: Geolocation Modal and Footer Selector.

 

Custom CSS - Geolocation Modal

If you have a paid ORBE plan you can customize the Geolocation Modal CSS through the "Advanced Settings" menu. There you can use our editor to customize the modal with CSS.

Custom CSS - Advanced settings

 

Custom JS - Footer Selector

Regardless of the ORBE plan you have you can create your own form to select the country and language using ORBE technology through Javascript.

This means that if you don't want to use Footer Selector you can use your own code to make it work and adapt it better to your theme.

How does it work?
Footer Selector is a form with a selector that when you make a change in the selector fires an event in JS that updates the cookie that manages ORBE and sends the form to Shopify.

This is the official JS code of the selector that you can use to create your own form:

As you can see the official form uses the ID md-footer-selector__country for the country and md-footer-selector__language for the language in addition to using the md-footer-selector__form component.

You can create your own form keeping in mind that you need to update the mdApp_countryCodeDomain cookie via Javascript and that you can use if you want the official elements or create your own as long as you update the cookie correctly. It is important to remember that the country and language must be in ISO 3166-2 format.