> For the complete documentation index, see [llms.txt](https://prettifyweb.gitbook.io/murmel/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prettifyweb.gitbook.io/murmel/theme-sections/layout.md).

# Layout

### Header&#x20;

The header has several options you can control:

\
1\. Sticky header - When this feature is active, the header will remain fixed at the top of the screen when you scroll the page.

<details>

<summary>How-to Enable Sticky Header</summary>

1\. Navigate to the [**Theme Editor** ](https://shopify.com/admin/themes/current/editor)

2\. Click **Header**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/6f9beed9-64c1-4346-b015-cad939a115ce/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=150,168" alt="" data-size="original">

3\. Click "**Enable sticky header**" and **Save** settings.

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/ee5de6b3-64ec-42d8-be52-6116e1684c31/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=102,139" alt="" data-size="original">

</details>

2\. Set logo&#x20;

<details>

<summary>How-to set a logo</summary>

1\. Navigate to the [**Theme Editor** ](https://shopify.com/admin/themes/current/editor)

2\. Click **Header**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/6f9beed9-64c1-4346-b015-cad939a115ce/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=150,168" alt="" data-size="original">

3\. Upload the logo in the default Shopify way and **Save** settings

&#x20;![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/9d2b6577-3d63-49b3-9f92-4debbe5ca1cf/ascreenshot.jpeg?tl_px=0,327\&br_px=1719,1288\&force_format=png\&width=1120.0\&wat=1\&wat_opacity=0.7\&wat_gravity=northwest\&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png\&wat_pad=229,276)

</details>

3\. Social media buttons - links to them can be set in the general settings of the theme.

<details>

<summary>How-to Enable Social Media Buttons</summary>

1\. Navigate to the [**Theme Editor** ](https://shopify.com/admin/themes/current/editor)

2\. Click **Header**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/6f9beed9-64c1-4346-b015-cad939a115ce/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=150,168" alt="" data-size="original">

3\. Click "**Show social media icons**" and **Save** settings

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/3690975d-7e08-4f81-b9d7-f8068d589b64/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=105,401" alt="" data-size="original">

</details>

4\. Navigation - There are 3 types of navigation in the header: **Menu**, **Catalog** and **Navigation**.  *If the **Catalog** navigation is not set, clicking the Catalog button will take you to the "All Products" page.*&#x20;

<figure><img src="/files/I3JqlODfdA3qINP7Q9yc" alt=""><figcaption><p>Navigation types in the Murmel Theme: <strong>Menu</strong>, <strong>Catalog</strong>, <strong>Navigation</strong></p></figcaption></figure>

<details>

<summary>How-to Use Navigations in Header </summary>

1\. Navigate to the [**Theme Editor** ](https://shopify.com/admin/themes/current/editor)

2\. Click **Header**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/6f9beed9-64c1-4346-b015-cad939a115ce/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=150,168" alt="" data-size="original">

3\. Scroll down to the **Navigation** section and click "**Select menu.**"

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/85b0385b-8b11-48da-a326-c8d0a09144da/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=204,484" alt="" data-size="original">

4\. Choose the navigation you want to show

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/9906eae1-39bf-47f1-8a88-d8188b52a554/ascreenshot.jpeg?tl_px=0,357&#x26;br_px=1719,1318&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=397,276" alt="" data-size="original">

5\. Click "**Select**"

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-28/713e6260-22fb-41d0-9544-466f1e25233d/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=361,558" alt="" data-size="original">

</details>

### Footer&#x20;

A well-crafted footer is a must for modern Shopify stores. \
Here is the list of Murmel's theme features in the footer:&#x20;

1. Country/region selector.
2. Social media buttons (links to them can be set in the theme's general settings)
3. Set Logo.
4. Show\hide copyright.&#x20;
5. &#x20;"Follow the Shop" feature.
6. Footer background color (text color will be changed automatically depending on background color)

<details>

<summary>How-to setup  Footer features? </summary>

1\. Navigate to the Theme Customizer

2\. Click **Footer**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/b62383b9-0ea7-445b-bda1-bc0357ca813c/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=128,539" alt="" data-size="original">

3\. Click **Enable country/region selector**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/a0ece1e8-ef56-4878-8ea1-0c2108cbbf2d/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=145,135" alt="" data-size="original">

4\. Click **Show social media icons**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/d812c975-94ed-4536-9e6c-82dfd5787922/ascreenshot.jpeg?tl_px=0,0&#x26;br_px=1719,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=177,198" alt="" data-size="original">

5\. Upload **Logo** for Footer

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/29ba6a64-e0cb-4d9c-969f-1cd76a34e0ff/ascreenshot.jpeg?tl_px=0,257&#x26;br_px=1719,1218&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=267,277" alt="" data-size="original">

6\. Click **Show copyright.** Add your copyright text in the field below

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/1a4317f9-7ae3-41a0-aa39-753e9362d9c8/ascreenshot.jpeg?tl_px=0,329&#x26;br_px=1719,1290&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=193,277" alt="" data-size="original">

7\. Click **Enable Follow on Shop**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/2f215639-112d-4ab8-a84c-8876a6323769/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=182,390" alt="" data-size="original">

8\. To change the Footer background color, click **Theme Settings** and choose the necessary color

<img src="https://colony-recorder.s3.amazonaws.com/files/2023-09-07/89f903dd-bf08-4206-aa5b-c43030f52ac9/stack_animation.webp" alt="" data-size="original">

9\. Click **Save**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-08-29/221f96d0-1fae-4243-af8a-6a6c1c8fc4de/ascreenshot.jpeg?tl_px=1174,0&#x26;br_px=2894,961&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=1026,0" alt="" data-size="original">

</details>

7. Contact info block: Address, E-mail, Phone number

<details>

<summary>How-to setup Contact information in Footer?</summary>

1\. Choose the **Footer** in **Customizer**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-09-07/f4fb722e-090b-482c-a935-dc210ffe4317/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=122,315" alt="" data-size="original">

2\. Click **Add block** and add **Contact** block

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-09-07/f6bc0dba-482a-4f45-a832-0198001214d4/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=198,543" alt="" data-size="original">

3\. Click the newly added **Contact** block, choose its type: **Address, Phone, or Email,** and fill in your information.

<img src="https://colony-recorder.s3.amazonaws.com/files/2023-09-08/fca37743-fcf2-492f-a9c8-8f29c74bd21d/stack_animation.webp" alt="" data-size="original">

</details>

8. Extra menus in the footer.

<details>

<summary>How-to setup Extra menus in Footer?</summary>

1\. Choose the **Footer** in **Customizer**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-09-08/624d8994-4a05-4480-a461-65e66c2795e3/ascreenshot.jpeg?tl_px=0,381&#x26;br_px=1719,1342&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=132,277" alt="" data-size="original">

2\. Click **Add block**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-09-08/6e971a35-8c6e-4b2f-8f9e-95b0e7e9397a/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=184,535" alt="" data-size="original">

3\. Choose **Menu**

<img src="https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2023-09-08/b6411624-06fd-4a55-b2de-4fcef834c572/ascreenshot.jpeg?tl_px=0,390&#x26;br_px=1719,1352&#x26;force_format=png&#x26;width=1120.0&#x26;wat=1&#x26;wat_opacity=0.7&#x26;wat_gravity=northwest&#x26;wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&#x26;wat_pad=508,548" alt="" data-size="original">

4\. Click the newly added block **Quick links** and add the necessary navigation.

<img src="https://colony-recorder.s3.amazonaws.com/files/2023-09-08/b36140f2-f823-4120-8f4e-1bd19a0f0953/stack_animation.webp" alt="" data-size="original">

</details>
