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

# Header

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

The header is a content block at the upper part of your website that appears on every page. It usually contains the logo of a store, the main navigation menu, and other elements such as a search bar, shopping cart icon, etc.

The header plays a vital role in branding your site, helping visitors navigate, and displaying your most important pages.&#x20;

You can freely customize your header to suit your business needs by adding your logo image, choosing the main menu, and other addons using **Minimog** theme.

![Header section](/files/uJu5YGqrv5s3KfLQo11g)

<figure><img src="/files/SX65AqudlKxDPLIUfi25" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## Logo settings

Add a logo in the header to grab visitors' attention and set the tone for your brand. The recommended image size and format is 200x80px .png with a transparent background.&#x20;

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Header**
2. Select image under **Logo**
3. **Save**
   {% endhint %}

<figure><img src="/files/oE0GS1uC4b8cnwrmDPBj" alt=""><figcaption></figcaption></figure>

To add SVG logos, kindly upload them in Shopify **Settings** > **Files** and get the URLs.&#x20;

<figure><img src="/files/z3jV25WKiU60eBLrObi4" alt=""><figcaption></figcaption></figure>

Resize the logo image by increasing or decreasing the width on desktop/mobile or when it is sticky.

<figure><img src="/files/a3fwTv6I4UGEcQTmYTtC" alt=""><figcaption></figcaption></figure>

## Design settings

Change the position of the logo and menus based on your preferences.&#x20;

### **1. Logo and menu in 1 line**&#x20;

* Logo in center 1

![](/files/hglPzyYp0Yk7HuO89uX2)

* Logo in center (with 2nd menu)

![](/files/zuBQKUd8gyZuFZupWjS6)

* Logo left

![](/files/eRsmjXqDZC7DmbqLWowc)

### **2. Logo and menu in 2 lines**

* Logo center

![Logo left](/files/XdPD6hk8NSQUQCqTOrjG)

* Logo left

![](/files/TZMk4E2kI0mROaX6k6E5)

Minimog lets you enable a **sticky** header to keep the navigation visible on the scroll. It also enables the **transparent** effect on top of both desktop and mobile.

#### **1. Transparent header with sticky scrolling**

![](/files/LgEAL2CxgSBvI5GTGO60)

#### **2. No transparent header with sticky scrolling**

![](/files/WJZCheOkjtrtIU1VWuo2)

#### 3. Default scrolling

![](/files/HmuWoBmbtEw1D1w6S7Mj)

## Menu settings

This section lets you display your desired menus along with the logo. You can choose your desktop menu and mobile menu separately.<br>

<figure><img src="/files/9xOACmP1pjrQLSsestFI" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To add, remove, or edit menus in your Shopify store, see [Editing menus](https://docs.minimog.co/getting-started/mega-menu#create-menu).
{% endhint %}

## Add-ons

Add-ons provide extra settings to the header such as search, currency selector, language selector, etc. by enabling the suitable checkboxes.&#x20;

For search, you can either show the full search box or only the search icon.

<figure><img src="/files/267q5hJJZMTwGQxj9BzI" alt="Enable addons your store header"><figcaption></figcaption></figure>

{% hint style="info" %}
Regarding the **currency selector** and **language selector**, you must configure them in Shopify admin for them to show on the front end.&#x20;
{% endhint %}

### How to add more languages to your Shopify store?

{% embed url="<https://youtu.be/BpgZCZW-3g4>" %}

{% hint style="success" %}
**Steps:**

1. From your Shopify admin, go to **Settings** > **Languages**.
2. In the Store languages settings, select **Add language**.
3. Choose a language from the drop-down menu, and hit **Next.**
4. Select an active market to add your language to.
5. In the **Unpublished languages**, click Publish beside the language that you want to make available to customers in your store.
6. Click **Save**.
   {% endhint %}

{% hint style="info" %}
If you want to add translations to your store content, then you need to import translations or use an app.
{% endhint %}

### How to add more currencies to your Shopify store?

{% embed url="<https://www.youtube.com/watch?v=RT83LJ-4dMs>" %}

Using multi-currencies to increase sales and expand your business into new markets.

To display a currency selector in your store, check out the following steps:

1. From your Shopify admin, go to **Settings.**
2. Navigate to **Markets** and click **Add market**.

<figure><img src="/files/oMsYdGiQxUnOXArzE6Dp" alt=""><figcaption></figcaption></figure>

3. Click **Add countries/ regions** and select the countries/regions you want.

<figure><img src="/files/3MxIbCCR1jkyalT43c0w" alt=""><figcaption></figcaption></figure>

4. Hit **Save** when you're finished.

{% hint style="info" %}
To sell in multiple currencies, you need to have [Shopify Payments](https://help.shopify.com/en/manual/payments/shopify-payments) enabled in your online store.
{% endhint %}