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 |
---|---|
|
|
JavaScript Functions for popups
Use these JavaScript functions to manage popup behavior:
Function | Description |
---|---|
| Opens the "Geolocation Popup" and automatically updates to match the user's current location and browser language preferences. |
| Opens the "Geolocation Popup" but maintains the user's current selections within the Shopify storefront, avoiding any refresh. |
| Opens the "Market Selector" modal type. |
| Closes the "Geolocation Popup". |
| Closes the "Market Selector" Popup |
Important notice
To utilize these JavaScript functions effectively, ensure that the corresponding app embeds are enabled.
The "Geolocation Popup" should be activated for using orbito
related functions, and the "Market Selector" should be enabled for orbitoMK
functions.
Implementing a custom Orbe button
To create a custom button that triggers the Orbe popup, here’s an example snippet:
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 clickRemind 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.
Last updated