# Home 17 - Gym

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FrNSp1x8wLL5kEjtFBUdy%2Fheader-02-Style-2.jpg?alt=media&#x26;token=e223aae7-e0d7-4877-b156-e1cf492299fc" alt=""><figcaption><p><a href="https://new-ella-demo.myshopify.com/?fts=0&#x26;preview_theme_id=123127464026">Home 17 - Gym</a></p></figcaption></figure>

{% embed url="<https://www.youtube.com/embed/QJOSOCm7GuY>" %}
Key Moments: [24:01](https://www.youtube.com/watch?v=QJOSOCm7GuY\&t=1441s) Home 17 - Gym
{% endembed %}

To setup Header Home 17 - Gym, you need to add the **Header Nav - Multi Site** section to the **HEADER GROUP**.

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. At the **HEADER GROUP ->** click **+** **Add section**.
4. Search and select **Header Nav - Multi Site** section.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FCmmsnMGWP5ywtLBiH7ZH%2Fheader-2-setting.jpg?alt=media&#x26;token=cd57b2e3-1e87-4e8c-8c7f-14d190f1732c" alt=""><figcaption></figcaption></figure>

5. On the **Header Nav - Multi Site** section settings -> **Header Style ->** Select **Style 2**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Flhal7mT8FXjcfDm7LBK0%2Fhome-17-setting.jpg?alt=media&#x26;token=475eae11-ad08-4232-a49b-bdd7d3de2eb9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can show menu tabs: Women, Men, Kids like on theme demo by using **Menu Tab** block.
{% endhint %}

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FyV0kdDcaPQ5sJc7rKyvR%2Fheader-2b-setting.jpg?alt=media&#x26;token=31d619e7-0f60-44a1-862e-6861f66ffa9e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F5Ml6om78VmfHUVHDrUcd%2Fheader-2-menu-tab-setting.jpg?alt=media&#x26;token=19dda247-ccd5-45b7-a091-5040c95a6129" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The first tab "ELLA" is Homepage, you don't need to choose link for this tab, the other tabs are [<mark style="color:orange;">**Landing Page**</mark>](https://halosoft.gitbook.io/ella-documentation/~/changes/ya8CSeFxwPyu94dBt1WL/page/landing-page) and will link to the page you created.

With this header, there are 2 steps to set up:

* Create Landing page
* Set up different menu for each Landing Page
  {% endhint %}

## How to set up different navigation/menu for tabs?

1. From your Shopify admin, go to **Navigation.**
2. Click **Add menu** to create a menu you want to use for menu tab.
3. Go to the landing page you created to activate menu.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fp7dmnIVxsVl8ldZLuWSU%2Fmenu-tab-2.png?alt=media&#x26;token=34aa1aaa-8651-47dc-9919-6047b20dbb21" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FsE8OduRIvO9NHzUpWp5K%2Fmenu-tab-3.png?alt=media&#x26;token=c82685db-69d3-4c91-9380-63ed7c5a77b0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FUkyrjZOvu2YcUrZtZ1ej%2Fmenu-tab-4.png?alt=media&#x26;token=8bf0306c-a11d-4c50-af90-5ebb60d4fd55" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The selected template must contain the word 'landing'. For example: template\_landing.
{% endhint %}

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FNQVaJrQpVRgcHae0NjEX%2Fmenu-tab-5.png?alt=media&#x26;token=b9547142-2ea0-4c92-b9d0-256562125c53" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
URL and Handle of Landing pages must be the same as the handle that you created in the navigation above.
{% endhint %}

## Upload Settings For Header

<mark style="color:red;">To set up data for Header Home 17 - Gym, please follow below instruction:</mark>

1. Click the [file to download](https://halosoft.gitbook.io/ella-documentation/header/header-for-desktop/home-17-gym#preset-for-header-home-17-gym) the corresponding *"json"* of the layout you want to open the data on a new tab.
2. **SELECT ALL** and **COPY**.
3. From your Shopify admin, go to **Themes** **->** **Actions** **->** **Edit Code.**
4. Find folder **Sections** **->** Open file **header-group.json** **->** **SELECT ALL** and **DELETE** then **PASTE** the copied preset from the external file.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F455E9bEhZsK2Spf1Gv3S%2Fheader-group-edit.jpg?alt=media&#x26;token=a212f304-4e45-4789-ab1e-e4d8b0d8f42d" alt=""><figcaption></figcaption></figure>

## Preset for **Header** Home 17 - Gym

<table><thead><tr><th></th><th data-type="files"></th></tr></thead><tbody><tr><td><a href="https://new-ella-demo.myshopify.com/?fts=0&#x26;preview_theme_id=123127464026">Home 17 - Gym</a></td><td><a href="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FJuA7K0cQAZgZHhLZmXty%2Fheader-group-17.json?alt=media&#x26;token=499bb49f-8977-4875-a043-bc2bf4df0d7f">header-group-17.json</a></td></tr></tbody></table>
