Custom Orbe button

Enable a custom button to change country/market preferences

Allowing users to adjust their country and language settings is crucial. Integrating a custom Orbe button into your Shopify theme lets you replace traditional selectors with a more dynamic solution, encouraging users to manage their preferences directly through Orbe.

This guide will show you how to create a custom button within your theme that re-opens the Orbe popup, enabling users to update their preferences easily and update them also in Orbe.

This documentation is designed for users with a background in HTML, CSS, and JavaScript.

If you're unfamiliar with these technologies, please forward this guide to your development team.

Geolocation popup	Market Selector Popup
md-app-embed__modal	md-app-embed__footer-popup

JavaScript Functions for managing popups

Orbe offers JavaScript functions to control popup behaviour:

• Opening Geolocation Popup:

  • Use orbito.openAndRefreshModal(); to open the "Geolocation Popup," automatically updating to match the user's current location and browser language preferences.

  • Alternatively, orbito.openModalWithoutRefresh(); opens the same popup but maintains the user's selections within the Shopify storefront, preventing any refresh.

• Opening Specific Modals: If you just want to open one modal you can use orbito.openModal(ID)

  • orbito.openModal('md-app-embed__modal');: Opens the "Geolocation Popup" app embed.

  • orbito.openModal('md-app-embed__footer-popup'); Opens the "Market Selector" modal.

• Closing Modals: Easily close any active modal with orbito.closeModal(ID); by specifying the modal's unique ID.

Ensure the app embed you wish to manage is enabled for these functions to work properly.

Implementing a custom Orbe button

To create a custom button that triggers the Orbe popup, here’s an example snippet:

<button class="orbe-custom-selector" aria-label="Change Shipping Country" onclick="orbito.openAndRefreshModal();">
  <span class="orbe-country-selector-label">Shipping to:</span>
  <span class="orbe-country-selector-info">
    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
  </span>
</button>

Key points:

• Dynamic content (country and currency) is displayed, using Shopify's liquid variables for localization. More info: https://shopify.dev/docs/api/liquid/objects/localization

• The orbito.openAndRefreshModal() will open the Geolocation Popup on click

• Remind to apply CSS to tailor the appearance of your custom Orbe button to match your site’s theme.

By following this guide, developers can implement this feature effectively, making it easier for users to manage their geolocation preferences using Orbe.