# How it works

## How to add

If you have a newer Shopify theme compatible with app blocks (any public theme version [after March 2023](https://shopify.dev/changelog/we-are-introducing-sections-liquid-tag-and-section-groups)), you can add the Geolocation Button app block directly to your header or footer using **section groups**.&#x20;

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.

{% embed url="<https://www.loom.com/share/f410fbdb0f6642358c6d79f71d8f8446?sid=834b954f-2a12-47c6-a037-5da53d6cbc6e>" %}

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**

{% embed url="<https://www.loom.com/share/65a8ebd4ce8f4ca0be359a4c9aa3d9a8?sid=86ea5101-5af9-4bc4-a9f7-95736917abb3>" %}

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:&#x20;

   ```liquid
   <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:

   ```json
   {
     "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`.&#x20;

   ```liquid
   {% 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.&#x20;

### Your section is not supported in a section group

<figure><img src="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FH5iW9J72sxz4BG7c900A%2Fdisabled_on%20en%20apps.liquid.png?alt=media&#x26;token=51a3466e-4a42-4805-8097-2d9221a7c0b9" alt=""><figcaption></figcaption></figure>

If you see a message like **“Section xxx is not supported in section groups”** when trying to add an app block to the header or footer, this is a **theme limitation**.

Some themes disable app sections in certain groups using the `disabled_on` property in the section schema. When `header` or `footer` are included, Shopify won’t allow the app block to be added there.

Example of code that causes this issue:

```json
"disabled_on": {
  "groups": ["header", "footer"]
}
```

#### How to fix it

Edit the section code in your theme and remove the `disabled_on` property from the schema.\
After saving the changes, the app block can be added to the header or footer normally.

## 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.
* If you select the **Market Selector modal**, ensure the [`Market Selector`](https://help.orbe.app/market-selector#modal-selector) app embed is enabled with the **Modal** option selected.

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

{% embed url="<https://www.loom.com/share/45a000c524b547278c72bd03f5aa8363?sid=17924c65-5e5c-4337-8638-47786dc8f809>" %}

## Learn more about

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Selector Placement</strong> </td><td>Learn how to position your selector exactly where you want in your theme.</td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2FiiaU9QJrHgQdw9XV3ZCs%2Fselector-position.png?alt=media&#x26;token=149d24a8-7e08-420b-a6f9-d89af88c5522">selector-position.png</a></td><td><a href="selector-placement">selector-placement</a></td></tr><tr><td><strong>Enable the Market Modal</strong> </td><td>Learn how to customize the modal selector to combine it with the Geolocation Button </td><td><a href="https://1070558711-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9pRSk2pXNrLaA6YXOW5G%2Fuploads%2F5hXJFZwCna1GV2pwgg5P%2Fmodal-selector-2.gif?alt=media&#x26;token=ed2175f4-0a38-4c6a-a877-af07fbfb24c2">modal-selector-2.gif</a></td><td><a href="../../market-selector#modal-selector">#modal-selector</a></td></tr></tbody></table>
