Set up Geolocation

Once you've installed Orbe, setting up the popup is a quick process, typically taking about ten minutes using the Shopify Theme Editor. In this tutorial, we will guide you through activating geolocation and customizing the popup to align with your brand.

Our geolocation feature utilizes Shopify's App Embed technology, ensuring a streamlined integration without adding any extra code to your theme, which in turn guarantees high-speed performance.

Before we delve into setting up geolocation, we recommend reading the following tutorials to gain a better understanding:

1. How Orbe Works: You'll be displaying this popup to your international customers when they land in the wrong shopping experience.

2. Why We Use Consent: Learn why we don't implement automatic redirects on the first visit and only do so after obtaining the user's consent.

Now, let's dive into the steps for customizing the popup and enabling geolocation:

Step 1: Open the theme editor

Start by opening Orbe and clicking on "Customize popup."

Then, activate the App Embed feature and enable "Test mode." This setting will ensure the popup appears in your theme, allowing you to preview and apply your desired styles to it.

Step 2: Customize the popup

Next, you can start to change the content and the styles in a few clicks:

In this tutorial, we'll guide you through setting up the geolocation popup using the standard settings available in the Theme Editor. If you're on a paid plan, you can also apply custom CSS to further style the popup.

Content

In this section, you have various options to personalize your popup:

1. Show Close Button: Enabling this option allows your customers to close the geolocation popup. If they close it, they will remain in the same shopping experience they started in, and we won't redirect them to the correct shopping experience. If they close the popup without choosing their shopping experience, their decision will be saved for the next seven days, so the popup won't reappear during this period. If you want to ensure that customers are guided to the correct shopping experience based on their location and preferences, it's best not to activate this option. Without it, customers can continue by clicking the "Shop now" button, and Orbe will automatically preselect the country based on their IP address.

2. Display Recommended Country Flag: Select this option if you want to display the flag of the customer's current location. For instance, if a customer visits your website from Spain, the popup will showcase the Spanish flag. You can choose to display the flag in a rounded, square, or circular shape.

3. Show Market Currency: In the country selector, you can opt to display only the country name, or you can include the country's currency information as well. This currency information can either be the currency name, currency symbol, currency code, or a combination of these. For example:

   • Country name with currency code: United States (USD)

   • Country name with currency symbol: United States ($)

   • Country name with currency code and symbol: United States (USD $)

   • Flag with country name, currency code, and currency symbol

4. Show Languages: If your store is available in multiple languages, we recommend enabling this language selector. To learn more about how to make the most of the language selector, we recommend reading our tutorial on this topic.

5. Title, text, helper text, and button text: You have the flexibility to customize all default text elements, allowing you to convey your brand's message or communicate any special conditions to your customers before redirecting them to the appropriate shopping experience.

6. Fallback text: It will be displayed instead of the title in countries without shipping options.

You can utilize the dynamic variables provided to personalize the message for each country:

• {country}. Displays the customer's country. Example: Spain

• {currency_code}. Displays the country's currency code. Example: EUR

• {currency_symbol}. Displays the country's currency symbol. Example: €

For instance, if your customer is in Spain and you want the title to read "We ship to Spain", you can achieve that using this variable.

6. Background Image for Desktop and Mobile, and Image Placement: You have the option to include an image in your popup and position it on the right or left. If you decide to use a background image, we recommend keeping the Helper Text within 200 characters for the best display. The recommended image sizes are as follows:

   • Desktop: 408 x 680px

   • Mobile: 342 x 363px

   

Styles

In this section, you can customize the appearance of your popup in the following ways:

• Button and selector style: Choose between rounded or squared.

• Selector type: Select from outlined, underlined, or no lines.

• Button alignment: Align it to the right, left, center, or make it full-width.

• Easily adjust the title font and text font size in pixels.

• Colors: You can customize the colors of various elements in your store to match your brand.

• Blurred Background: This option lets you hide prices and content until customers select their shopping experience. It's particularly useful for brands that offer different prices in different regions, ensuring customers don't immediately notice price variations when changing their preferences.

Do you need more personalization for your popups?

If you have an Orbe paid plan, we encourage you to contact our team via Ticket Form, Live Chat or email at [e-mail], and we will provide you with the necessary support.