# Home 28 - Single Product

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FXFufNxiW9ugT8v9bsqmD%2Fimage.png?alt=media&#x26;token=d7fb2e14-a608-4749-b71c-0e1e2f94129c" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.youtube.com/watch?v=9xjykbhDEkc>" %}

To setup Header Home 28 - Single Product, you need to add the **Header Nav - Hamburger Slide-In** 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 - Hamburger Slide-In** section.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FgEHF4TJdeC3dI29SaKgz%2Fimage.png?alt=media&#x26;token=a6d67671-5310-4455-9959-4348efca9c97" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Ffza6e94IAAqxBPJRhVzS%2Fimage.png?alt=media&#x26;token=13b525af-af8c-4190-8d4c-55b536d5c457" alt=""><figcaption></figcaption></figure>

## Set up a scroll to row anchor (single page menu) on your site

1. From your Shopify admin, go to **Online Store** **->** **Navigation**.
2. Find the menu that you want to edit.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FpDnihECZRk3i0DDnHnW3%2Fimage.png?alt=media&#x26;token=c63b709b-7bfb-4963-88ee-74d01e50413f" alt=""><figcaption></figcaption></figure>

3. Select Menu Item and enter the Section ID name.

&#x20; For example: #features

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F1DxKgvKvg49ZMIYE6nF5%2Fimage.png?alt=media&#x26;token=74d76ea1-9c98-4f7d-a5e8-34cb195e18dd" alt=""><figcaption></figcaption></figure>

4. Find the theme that you want to edit, and then click **Customize**.
5. Select Section and enter an ID name that matches the ID name you just entered for the Menu Item.

&#x20; For example: features

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FZ7BIKUPnGPDqwBmSjaT8%2Fimage.png?alt=media&#x26;token=1680e988-6168-459d-95c8-6808af1b9312" alt=""><figcaption></figcaption></figure>

Note: <mark style="color:red;">If you include a link after #ID, clicking on the Menu will take you to the page where you attached the link and automatically scroll down to the corresponding section if one exists.</mark>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Ft4c0R0DXWlz0dwOldhnH%2Fimage.png?alt=media&#x26;token=ec28d63a-1812-4ed4-9062-380316e1ea05" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F8rQhEw7Bhch7cThEeXW1%2Fimage.png?alt=media&#x26;token=a4b9bdea-048c-4bb7-89a2-7545088a6d35" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FIc869VmekGuSEsin4J5s%2Fimage.png?alt=media&#x26;token=ea768a9c-dd9a-451e-ae67-402f8a8e0acf" alt=""><figcaption></figcaption></figure>

## Upload Settings For Header

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

1. Click the [file to download](https://halosoft.gitbook.io/ella-documentation/footer/footer-layout/home-27-men-fashion-02#preset-for-header-home-27-men-fashion-02) 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%2FlVQd06bYnMrPEPTdaSV4%2Fimage.png?alt=media&#x26;token=06c9a63a-f4cb-499b-abb3-1381e96dd57e" alt=""><figcaption></figcaption></figure>

## Preset for **Header** Home 28 - Single Product

<table><thead><tr><th>Home Page</th><th data-type="files">Json (with .json format)</th></tr></thead><tbody><tr><td><a href="https://new-ella-demo-11.myshopify.com/?fts=0&#x26;preview_theme_id=126090510387"><mark style="color:blue;">Home 28 - Single Product</mark></a></td><td><a href="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fqx61NBgekEvYCe3MrA45%2Fheader-group-28.json?alt=media&#x26;token=a304c2d9-c4d6-4780-ae10-181c33598212">header-group-28.json</a></td></tr></tbody></table>
