Custom Code

Custom CSS

The Custom CSS input allows you to add additional styles to the Geolocation Button, providing flexibility for adapting the selector’s appearance to match your theme. This is particularly useful if you need styling options beyond those available directly in the app block settings.

You’ll need some knowledge of CSS to apply these custom styles effectively and to select the correct classes. For example:

.md-orbe-country-selector__icon {
    margin: 0 !important;
}

This code ensures there’s no margin around the icon, allowing for a tighter, more customized layout.

Add as many custom styles as needed to adapt the Geolocation Button to your store’s design.

Custom JavaScript

The Custom JS Function input allows you to insert JavaScript for advanced actions, such as triggering other elements or custom behaviors when the button is clicked and just before opening the corresponding selector.

This is ideal for scenarios where additional actions are needed prior to displaying the Geolocation Popup or Market Selector modal, such as inserting a selector inside a drawer menu.

Selector inside a drawer menu

If you place the Geolocation Button inside a drawer menu, you may want the drawer to close automatically when the button is clicked, just before the selector opens. You can add a small JavaScript snippet in the Custom JS Function field to achieve this.

document.querySelector('.drawer-menu__close').click();

where:

• document.querySelector('.drawer-menu__close'): This part of the code selects the close button of the drawer menu. Replace .drawer-menu__close with the specific class used in your theme to target the drawer close button.

• .click(): This triggers a click on the close button, causing the drawer menu to close automatically when the Geolocation Button is clicked.

How to find the correct class for the close button

To find the correct class for your drawer’s close button:

1. Open your store in Preview mode.

2. Right-click on the close button in the drawer menu and select Inspect to open the browser’s Developer Tools.

3. Look for the class name associated with the close button element, and use that class name in place of '.drawer-menu__close' in the code snippet.