# Static

### Announcement Bar <a href="#announcement-bar" id="announcement-bar"></a>

<figure><img src="https://2888748549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNFfNaZDS6FvOsYD7AI8C%2Fuploads%2F3dr55IACkzQ1FG7pBRcX%2FScreenshot_1.png?alt=media&#x26;token=5a28eb4c-6cf2-427d-b52f-a4b71cda3687" alt=""><figcaption></figcaption></figure>

The **Announcement bar** is an optional section that, when enabled, permanently sits at the top of every page on your storefront.

With its eye-catching position on your storefront, it's the perfect place to display important information and incentives for your customers, such as announcements, promotions, sales, and news.

<figure><img src="https://2888748549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNFfNaZDS6FvOsYD7AI8C%2Fuploads%2FolujUUxgtvy3163NK9s3%2FScreenshot_19.png?alt=media&#x26;token=4409541e-e824-4a72-9fef-47fb42d8c570" alt=""><figcaption></figcaption></figure>

You can change the background color, and content alignment (**Left, Center, and Right**). If you are a developer, you can add an extra Class to the **Module Class Suffix** field.

### Header

<figure><img src="https://2888748549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNFfNaZDS6FvOsYD7AI8C%2Fuploads%2FmPxoYXZ1e80g0VhgLtD5%2FScreenshot_2.png?alt=media&#x26;token=e17661e7-fed5-44b4-9bb3-e3a9b566b920" alt=""><figcaption></figcaption></figure>

This guide describes setting up the **Header** section.

{% hint style="warning" %}
The header section is accessible from all page templates, excluding the Checkout, Password, and Gift card page templates.
{% endhint %}

The **Header** section is a permanent section in your storefront. It is visible on every page of your store and features your brand's logo, menu navigation, account, search bar, and shopping cart.

To set up your store’s header section:

1. Go to **Customize** theme. At the top of the page, use the dropdown to select the **Home page** template.
2. From the side menu, select **Header**.
3. Select a section setting described in the following table.

<table><thead><tr><th width="214">Options</th><th>Description</th></tr></thead><tbody><tr><td>Enable sticky header </td><td>Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down.</td></tr><tr><td>Border</td><td>Displays a line to visually separate the header from the page's content.</td></tr><tr><td>Logo image</td><td>Use the following <strong>Custom logo</strong> selector options to set up an image to use as a logo inside the section. The recommended image dimensions are <strong>800px</strong> x <strong>300px</strong> (pixels) in <code>.jpg</code> format.</td></tr><tr><td>logo width</td><td>Adjust the slider <strong>Custom logo width</strong> to set a size for the logo image inside the section between <em>50px</em> and <em>250px</em>.</td></tr><tr><td>Logo text</td><td>Show logo text if you don't want to use Logo Image.</td></tr><tr><td>Logo font</td><td>Chose a font if you using Logo Text.</td></tr><tr><td>Main menu</td><td>The menu to use as your main menu. Click <strong>Change</strong> to select a different menu.</td></tr><tr><td>Desktop menu type</td><td>Use the drop-down menu to choose a desktop menu type between <strong>Dropdown</strong> and <strong>Mega menu</strong>. The Dropdown option displays second level menu content, with the third level collapsed until the corresponding second level item is clicked. The Mega menu shows all second and third level menu content upon the first click. The menu type is automatically optimized for mobile.</td></tr><tr><td>Color </td><td><ul><li>Scheme: You can change the background color for the header.</li><li>Layout Type: You can change the layout of the header</li></ul></td></tr><tr><td>Section padding</td><td>Add space to the top or bottom of the header. Use the range slider to add between 0px and 100px of space to the top or the bottom of your header.</td></tr><tr><td>Theme settings</td><td>Select <strong>Theme settings</strong> to access additional settings for the section. Refer to the <a href="../theme-settings">Section theme settings menu</a>.</td></tr></tbody></table>

### Mega Menu

How do I create a mega-menu?&#x20;

The Peaks theme will automatically create a multi-column "mega-menu" dropdown for your navigation wherever your navigation includes three levels of links.

<figure><img src="https://2888748549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNFfNaZDS6FvOsYD7AI8C%2Fuploads%2FdTfEtYxxHNr8J4QdrRWU%2FScreenshot_11.png?alt=media&#x26;token=9177e1a0-f22c-4b1f-b71e-f91e083528e2" alt=""><figcaption></figcaption></figure>

Each third level of navigation will get split into its own column of links. For example, the layout above was created by the menu below:

<figure><img src="https://2888748549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNFfNaZDS6FvOsYD7AI8C%2Fuploads%2FvAjPMwxq199bhyAgJ7TW%2FScreenshot_12.png?alt=media&#x26;token=a9563ce1-e15f-4267-900a-451c1c4df90b" alt=""><figcaption></figcaption></figure>

To add some visual impact, any second level of navigation that links to a collection with an image will have that image shown above the title of the link. You can see this for Shoes, Clothing, and Skateboards in the example above.<br>

### Footer

The **Footer** is a permanent section that appears at the very bottom of every page on your storefront.

By adding content blocks containing text, a menu, a newsletter sign-up, social media icons, or an image, your footer is a great place to put essential information such as terms and conditions, returns policies, contact information, and accepted payment methods.

<figure><img src="https://2888748549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNFfNaZDS6FvOsYD7AI8C%2Fuploads%2FNKfu03GqA9F6iXQwn0Gz%2FScreenshot_13.png?alt=media&#x26;token=d6b276aa-ff5b-49bf-86e7-6631bf98beaf" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="219">Options</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>The background of the footer can be selected between Accent 1, Accent 2, Background 1, Background 2, or Inverse.</td></tr><tr><td>Show email signup</td><td>Includes an email signup form where customers can subscribe to your newsletter and marketing.</td></tr><tr><td>Heading</td><td>The title for the <strong>Show email signup</strong> form. If <strong>Show email signup</strong> isn't enabled, then this doesn't display.</td></tr><tr><td>Intro</td><td>The Description for the <strong>Show email signup</strong> form. If <strong>Show email signup</strong> isn't enabled, then this doesn't display.</td></tr><tr><td>Social media icon</td><td>Displays icons for any social media platforms that you've entered a profile link for in your theme settings.</td></tr><tr><td>Show payment icons </td><td>Displays the icons for payment methods that are enabled on your store. When a customer visits your store, these icons are filtered so that only the payment methods that are supported in the current customer's region and currency are displayed.</td></tr><tr><td>Enable country/region selector</td><td>Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings so that customers can view your product prices in the currency of their choice.</td></tr><tr><td>Enable language selector</td><td> Let your customers select their native language. You’ll need to manually translate your theme. <a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes/language/translate-theme?ref=openthinking1">Learn how </a>to translate your theme.</td></tr><tr><td>Spacing</td><td>Add space above your footer. Use the range slider to add between 0px and 100px of space to the top margin.</td></tr><tr><td>Section padding</td><td>Add space to the top or bottom of the footer. Use the range slider to add between 0px and 100px of space to the top or the bottom of your footer.</td></tr><tr><td>Theme setting</td><td>Select <strong>Theme settings</strong> to access additional settings for the section. Refer to the <a href="../theme-settings">Section theme settings menu</a>.</td></tr></tbody></table>

#### Menu block <a href="#menu-block" id="menu-block"></a>

<table><thead><tr><th width="226">Options</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>The title for the block.</td></tr><tr><td>Menu</td><td>The menu to display in the block. Only top-level menu items are shown in the footer, so drop-down menu types won't display as expected.</td></tr></tbody></table>

#### Text Block

The **Text** block can be used to highlight important information, such as store details, promotions, or contact information.

<table><thead><tr><th width="226">Options</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>The title for the block.</td></tr><tr><td>Subtext</td><td>The text to display in the block.</td></tr></tbody></table>

#### Image block <a href="#image-block" id="image-block"></a>

<table><thead><tr><th width="226">Options</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>The image to display in the block.</td></tr><tr><td>Image Width</td><td>Sets the width of the image. Can be any multiple of 5, from 50 px to 200 px. Default is 100 px.</td></tr><tr><td>Image alignment on large screen</td><td><p>Aligns the image within the block:</p><ul><li><strong>Left</strong> - Aligns the image to the left of the block.</li><li><strong>Center (default)</strong> - Aligns the image to the center of the block.</li><li><strong>Right</strong> - Aligns the image to the right of the block.</li></ul></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://joomlart.gitbook.io/cosmet-documentation/basic-configuration/theme-sections/static.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.