Orbe – Help center
PlansPartnersUse CasesSupportChangelog
  • πŸ‘‹Before starting
    • Welcome
    • How Orbe works
    • Pricing
    • FAQs
  • 🧩GENERAL
    • Install Orbe
    • Refresh Data
    • Connect Stores
      • Redirect to another store
      • Settings
    • Integrations
      • Klaviyo
      • Global-e
      • Connectif
      • Hreflang Manager
      • Announcement Bar
    • Uninstall Orbe
  • 🌐Geolocation Popup
    • Set up Geolocation
    • Translations
    • Common issues
  • πŸ”Selectors
    • Overview
    • Geolocation Button
      • How it works
      • Selector Placement
      • Variables
      • Custom Code
    • Market Selector
  • βš™οΈSettings
    • Notifications
    • Behavioral Preferences
    • Custom CSS
  • Developer Reference
    • CSS
    • JavaScript
    • Relocating the Market Selector
    • Integrate your selector
    • Snippets
      • Create a full-screen popup
      • Country Order Customization
      • Language Order Customization
      • Hide the popup in a country
      • Change popup fonts
      • Hide countries
Powered by GitBook
On this page
  • How to add
  • Update your theme to be compatible with App Blocks
  • How to setup
  • Enable the correct App Embed
  • Learn more about

Was this helpful?

  1. Selectors
  2. Geolocation Button

How it works

PreviousGeolocation ButtonNextSelector Placement

Last updated 6 months ago

Was this helpful?

How to add

If you have a newer Shopify theme compatible with app blocks (any public theme version ), you can add the Geolocation Button app block directly to your header or footer using section groups.

To add the Geolocation Button, go to the Shopify Theme Editor, navigate to your desired section (header or footer), and insert the app block directly.

However, many themes are not compatible with adding app blocks in a section that appears in all your theme pages (like the header or the footer sections).

If that is your case, follow this tutorial:

Update your theme to be compatible with App Blocks

Here’s how to do it:

  1. Edit your theme: Go to Online Store > Themes > Edit code in your Shopify admin.

  2. Check your sections folder. Look for a section in this folder called apps.liquid. If it does not exist, create the file and insert this code:

    <div>
      {%- for block in section.blocks -%}
        {% render block %}
      {%- endfor -%}
    </div>
    
    {% schema %}
    {
      "name": "Apps",
      "tag": "section",
      "blocks": [
        {
          "type": "@app"
        }
      ],
      "presets": [
        {
          "name": "Apps"
        }
      ]
    }
    {% endschema %}
    
  3. Create a new file. Insert a new file in the sections folder with the name: app-group.json. And insert this code:

    {
      "type": "aside",
      "name": "Apps",
      "sections": {
        "main": {
          "type": "apps",
          "settings": {
          }
        }
      },
      "order": [
        "main"
      ]
    }
  4. Edit theme.liquid. Go the theme.liquid file and insert this after closing the <body> tag or after the section header / section footer.

    {% sections 'app-group' %}
  5. Theme Editor. Click on "Customize" your theme, and you will see a new section called Apps only for adding app blocks to your installed apps.

How to setup

Enable the correct App Embed

The Geolocation Button can open either the Geolocation Popup or the Market Selector modal.

To ensure the Geolocation Button works properly, you need to enable the correct app embed based on your selected option. Otherwise, the button will not function as expected. Follow these steps to set it up:

  • If you choose the Geolocation Popup, make sure the Geolocation Popup app embed is enabled.

This setup is essential for the button to display the correct selector when clicked.

Learn more about

If you select the Market Selector modal, ensure the app embed is enabled with the Modal option selected.

πŸ”
after March 2023
Market Selector
Cover

Selector Placement

Learn how to position your selector exactly where you want in your theme.

Cover

Enable the Market Modal

Learn how to customize the modal selector to combine it with the Geolocation Button