> 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

Learn to edit the website header of your Shopify store

{% 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](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FZRUCBQ8YghrVgwTHyTzE%2FScreen%20Shot%202021-10-11%20at%2011.54.44.png?alt=media\&token=5c893b30-ec37-4903-abcf-c466f44a6c77)

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FGeIkBQFI4LGjyGqhvlet%2Flivechat883x471%20(1).png?alt=media&amp;token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FvGsL6OEHX30xxiXjuMkW%2Fimage.png?alt=media&amp;token=c758e43a-e073-4f1b-845b-21f5e3be0627" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FvpKLoGfIIU7oXO2JQFKh%2Fimage.png?alt=media&amp;token=0f2b9317-47ec-4db1-8a30-fddbedd7e40a" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fuq4HALgRfffx98NplaYD%2Fimage.png?alt=media&amp;token=e705e7d9-b2b6-4ecc-b47c-4ec24757f0c6" 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

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FsRtsgQpxspp4sCegbBGr%2FScreen%20Shot%202021-10-11%20at%2013.39.15.png?alt=media\&token=6b40fe0f-c982-481c-ae60-e58821f8e59c)

* Logo in center (with 2nd menu)

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FLShtmuN9DE8Uvcwa6kqw%2FScreen%20Shot%202021-10-11%20at%2013.42.12.png?alt=media\&token=df082dde-4392-4639-bc28-e734223db4f7)

* Logo left

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FWmCnlSi6Xp7iYPFY0SgY%2FScreen%20Shot%202021-10-11%20at%2013.44.41.png?alt=media\&token=7dbf50e6-9b43-4814-b355-77587470f19f)

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

* Logo center

![Logo left](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FPtuuPbTgSvLQZhoanPTX%2FScreen%20Shot%202021-10-11%20at%2013.46.33.png?alt=media\&token=449e98e7-24dc-4dd7-ab87-4154d85c3ec4)

* Logo left

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FsLZjXo9SWoKlDIYWB8dU%2FScreen%20Shot%202021-10-11%20at%2013.48.14.png?alt=media\&token=f92b1518-a851-461f-8782-1c5028406175)

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**

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FsbOO8EWjoCf9jzoA5QYZ%2FM7mINqxDW2.gif?alt=media\&token=612990fc-a1d5-4be9-bace-8a1a08c354fc)

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

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F3uOOgmX0l3hpGOwcAUPM%2FEkbWs4vCMe.gif?alt=media\&token=2477937a-c20e-4023-b8bf-3bd6543145ab)

#### 3. Default scrolling

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FzIX08CTLbnG6EePVeg9f%2FGvSDIBZKGU.gif?alt=media\&token=1632fd4a-e04b-461f-beb0-a8b56b97edb5)

## 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FKhOOeLEpF5BG50MlLomm%2Fimage.png?alt=media&amp;token=fd12770b-b44f-47cd-acd6-ac0e8d7b38a9" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Ff7XJBPbAwLFiWV044cGA%2Fimage.png?alt=media&amp;token=33b8187d-5793-419e-94bc-7415aa44a4a0" 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="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F86tA4oswgVPBPp2zh9w1%2Fimage.png?alt=media&amp;token=c33053a8-c92e-44a0-abbe-dddabb5abfe4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FQNh8k8kUjjvBoLtHaEJS%2Fimage.png?alt=media&amp;token=2507c478-083a-4354-9154-64a342c875d5" 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 %}