---
description: >-
  This section includes general settings for changing the page layout of the
  entire store.
---

# Layout

{% hint style="warning" %}
**Note!** The header options described below can be used on the desktop view only!
{% endhint %}

**Header type on large screens**

These settings allow changing the feel and look of the **Header** section. Choose one of the pre-design types in the drop-down: **"In one line, logo left"**; **"In one line, logo center"**; **"In one line, logo and menu left"**; **"In two lines, logo left"**; **"In two lines, logo center"**.

In the following examples, you can view each of the header types:

{% tabs %}
{% tab title="In one line, logo left" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2F59iMrPAKu7Qv2kitUmNB%2Flogo_left.png?alt=media&#x26;token=c4dd71e8-a2fb-4399-a859-7209abac3eae" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="In one line, logo center" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FGRJk5c9XkoiyUUxyUwlH%2Flogo%20center.png?alt=media&#x26;token=dd98a160-1bdd-4856-8ace-e209dc45d716" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="In one line, logo and menu left" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FJl3XyDslG7taLReEJq4t%2Flogo%20%26%20menu%20left.png?alt=media&#x26;token=5ff08d30-3d39-44cf-bfba-e1796cae1e52" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="In two lines, logo left" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2Fax5KT2Uyjy6mtNe0ImOg%2Ftwo%20lines_logo%20left.png?alt=media&#x26;token=fb6b9fde-dab6-4cbb-ad38-b29d8c12268b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="In two lines, logo center" %}
<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FfzQZvPTFgpQ870MdBvhL%2Ftwo%20lines_logo%20center.png?alt=media&#x26;token=0c338322-d661-44e1-be7c-f26d01260e7e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Sticky header**

Use the options described below to configure the sticky header appearance on the desktop view.

In the drop-down, one can specify whether to display the sticky header while scrolling up from the bottom of the page by selecting one of the required options **"Disable",** **"Enable"**, or **"Enable with fullwidth logo"**.

If you want to add a logo scaling below the header before scrolling down or to the very top of a page, use the option **"Enable with fullwidth logo"**. If you chose the last option, make sure the "Show picture logo" option is enabled in _Theme settings ->_ [_<mark style="color:blue;">Logo</mark>_](https://mpithemes.gitbook.io/canvas-shopify-theme/theme-settings/logo).

{% hint style="danger" %}
**Note!** The **"Enable with fullwidth logo"** feature works only on the Home page.

Using this option changes the header type on the main page.
{% endhint %}

In the following example, you can view how it might display on the Home page:

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FsFRCuEhYPUkVS88opcRR%2Ffullwidth%20logo.png?alt=media&#x26;token=1fe96813-65d2-4946-8ca7-86f7ae0c98cc" alt=""><figcaption></figcaption></figure>

**Show announcement bar**

Tick the checkbox to display the Announcement bar at the very top of a page. The same bar will be displayed throughout the store. Read details on how to set up the section [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/canvas-shopify-theme/static-sections/announcement-bar).

**Show popups**

If you need to display the **"Popups"** section below the Footer with the settings for the **"Newsletter popup"** and **"Cookie popup"**, activate the option. Each of the popups can be customized by following the instructions [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/canvas-shopify-theme/static-sections/popups).

**Enable "Back to top" button**

Use the option to add the button at the very bottom of a page in the entire store. Visitors can be moved to the top of a page after clicking the **"Back to top"** button.

<figure><img src="https://2583283665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKhW6ktqksIA9uTHcpuSs%2Fuploads%2FKdYpfxqplqtjctZAHaOj%2Fback%20to%20top%20btn.png?alt=media&#x26;token=dca4fcbf-98d4-48ec-81ae-d03b7460e0de" alt=""><figcaption></figcaption></figure>
