# Header

The header is a user’s first touchpoint upon entering an online store, offering a streamlined overview of key elements. It prominently displays the brand logo, main navigation links, and essential tools like the search bar and cart icon, setting the tone for a smooth and engaging shopping experience.

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

1. Go to **Online Store > Themes > Customize.**
2. Choose **Header** section
3. Make necessary changes > **Save**.
   {% endhint %}

### Settings

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FtdfXPOaGESwRXx3YPcY3%2F2025-04-03_23-20-48.jpg?alt=media&#x26;token=ef67d493-941c-40dc-9d42-6c7644fe91a9" alt=""><figcaption></figcaption></figure>

* **Width** - Width of the header -> 3 options : Boxed / Wide
* **Desktop logo position** - 5 Options
  * Logo top left, menu left
  * Logo center ,menu below
  * Logo center, menu left
  * Logo center, menu drawer
  * Logo left, menu left
  * Logo left, menu center
* **Logo image** - Upload your store's logo
* **Desktop logo width** - Customize the size of the logo on desktop screens
* **Mobile logo width** - Customize the size of the logo on mobile screens
* **Menu ( Navigation )** - To add, remove, or edit menus in your Shopify store, please refer to: [Editing menus](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus)&#x20;

{% hint style="info" %}
You can create [megamenu](https://oranthemes.gitbook.io/edge-theme/global-sections/megamenu)
{% endhint %}

* **Sticky header** - 3 Options => None, On scroll up, Always
* **Show border** - Show border bottom
* **Hide border only on homepage**  ⇒ Show border on all pages

### Country/region selectort

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F3e4YQc02LZeejz0TmxFc%2F2025-04-03_23-23-00.jpg?alt=media&#x26;token=c7bb46a4-887d-400a-9faf-1cde8061f6ee" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To display the currency selector, language selector, and account icon on the storefront, configure these settings with in the Shopify admin.
{% endhint %}

### Transparent header

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F8AQv4lSj9j5pmGRdxRX5%2F2025-04-03_23-23-29.jpg?alt=media&#x26;token=fa01cc9c-e927-492e-8489-5b318e3b41ca" alt=""><figcaption></figcaption></figure>

* **Enable** - Home page only. For best results, use an image section such as slideshow.
* **Text color**
* **Logo image** - Displayed when transparent header is enabled. Uses the dimensions set on your main logo.

### Mobile & Mobile menu

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FXn9ZaOs53KzP0o5AZC1A%2F2025-04-03_23-23-54.jpg?alt=media&#x26;token=7cbc7e2f-305b-494b-bf6b-dc8555e326fb" alt=""><figcaption></figcaption></figure>

* **Mobile logo position** - Center / Left
* **Show country/region selector**
* **Show language selector**

### Spacing

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FFWjQJXL9B4gEj4eojgda%2F2025-04-03_23-24-50.jpg?alt=media&#x26;token=3d3a5f7e-cfd2-4c08-a12b-555fb7c8f752" alt=""><figcaption></figcaption></figure>

* **Bottom margin** - Margin bottom of the header

`Section padding`

* **Padding top** - Padding top of the  header
* **Padding bottom** - Padding bottom of the  header