# Home 01 – Fashion 01

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FiTj6UMUzR8fCNAklaA81%2FHeader%201.png?alt=media&#x26;token=7dfc63a4-2c9e-47b5-a79f-664e576189e2" alt=""><figcaption><p><a href="https://demo-default.myshopify.com/?_ab=0&#x26;_fd=0&#x26;_sc=1&#x26;preview_theme_id=120419549320"><mark style="color:red;"><strong>Home 01 – Fashion 01</strong></mark></a></p></figcaption></figure>

To setup Header <mark style="color:red;">**Home 01 – Fashion 01**</mark>, you need to add the **Header Nav – Multi-Site** sections 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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2Fg13bK1KbbFDUGlPVH6M3%2FSettings%20header%201.png?alt=media&#x26;token=a267f683-0c96-4c79-9555-49554401035f" alt=""><figcaption></figcaption></figure>

## **Upload Settings For Header**

<mark style="color:red;">To set up data for Header Home 01 – Fashion 01, please follow below instruction:</mark>

1. Click the [file to download](https://halosoft.gitbook.io/halo-docs/header/header-for-desktop/home-01-fashion-01#preset-for-header-home-01-fashion-01) 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://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FnAsbZouiZbN1vjEeruVY%2Fheader%20group.png?alt=media&#x26;token=78ab99d0-ff45-4e62-985a-2a4ebcc686e7" alt=""><figcaption></figcaption></figure>

## Preset for **Header** Home 01 – Fashion 01

<table><thead><tr><th width="464">Home Page</th><th data-type="files">Json (with .json format)</th></tr></thead><tbody><tr><td><a href="https://demo-default.myshopify.com/?_ab=0&#x26;_fd=0&#x26;_sc=1&#x26;preview_theme_id=120419549320">Home 01 - Fashion 01</a></td><td><a href="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FiUg7lXVaYRBtXafmUjLi%2Fheader-group-1.json?alt=media&#x26;token=0060b71c-fea6-45a7-a6c6-ffa28c9497c3">header-group-1.json</a></td></tr></tbody></table>

## Menu Tab

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

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2F2mETycGao5g3mZeUkHg0%2Fmenu-tab.png?alt=media\&token=2c6b8703-4b95-4bc1-8c28-eaa1bd060102)

Each tab will have settings for Logo, Texts, Link. For the link, you will create [Landing pages](https://halosoft.gitbook.io/halo-docs/page/landing-page) with below instructions and add link for the corresponding tabs.

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FCwcftuOeUiVWBe6CTKgg%2Fmenu-tab.gif?alt=media\&token=bf9a35fc-7a00-4ef7-b328-40c1e17daf87)

{% hint style="info" %}
The first tab "Women" is Homepage, you don't need to choose link for this tab, the other tabs are [Landing pages](https://halosoft.gitbook.io/halo-docs/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.

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FOg3QHDB5M5pIZEec6qzM%2Fmenu-tab-2.png?alt=media\&token=9667edcf-dcf3-4821-941c-1d74aa36b237)

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FFazexwdh3kGnTHwmXXXi%2Fmenu-tab-3.png?alt=media\&token=71736324-ec16-4276-9288-cde8e5326294)

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2Fs09912W3lvY8wtW4kKBD%2Fmenu-tab-4.png?alt=media\&token=3cf0ba85-96c0-4cad-8f0e-3a064f697379)

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

![](https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FPkDuejYLO8IQSJrCN9Qu%2Fmenu-tab-5.png?alt=media\&token=8ebbe106-22ef-437e-baf4-06abe6d7372c)

## How to setup announcement bar for Home 01 - Fashion 01?

<figure><img src="https://584379246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8AcakjwUSIs90OK0GJi2%2Fuploads%2FJR5dQrRzpr9gY4xjY3ue%2FAnnouncement%20Bar.png?alt=media&#x26;token=cdd5eaac-297d-4648-bd6f-1834cf620abe" alt=""><figcaption></figcaption></figure>

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Announcement Bar**".

```
<span class="text">HALO SALE 2023</span>
<span class="text">25,000 PRODUCTS</span>
<span class="text">ENDS 30/3</span>
<span class="text-code">MAX 90% OFF</span>
```