# Header

The header serves as a foundational element positioned at the top of your website, appearing consistently across all pages. Typically, it includes essential components like the store's logo, primary navigation menu, and supplementary elements such as a search bar and shopping cart icon.

Functionally, the header is crucial for establishing and reinforcing your brand identity, facilitating seamless navigation for visitors, and prominently featuring key pages of your site.

With the Opulent theme, you have the flexibility to personalize your header according to your business requirements. This customization can involve incorporating your logo image, selecting the primary menu items, and integrating additional features to enhance user experience.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FQ4POOwdgusUVg2xe4I51%2F5.png?alt=media&#x26;token=b01f821e-c65b-44c9-809f-6bad91a7539c" alt=""><figcaption></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.

{% hint style="info" %}
Steps

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

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FxbDKCjPVYZilqweLd8Pk%2F1.png?alt=media&#x26;token=a0e6025b-894c-472d-91c0-45b733423174" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FJygXcNXa3LIc1soAPLEz%2F2.png?alt=media&#x26;token=7d3bce7d-2daa-4f48-9ee9-accc1614e61a" 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://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FVvaiMYfbJH9s5WDicZzH%2F3.png?alt=media&#x26;token=77440158-2ca0-450c-b4f4-276ff9c2e43c" alt=""><figcaption></figcaption></figure>

## Desgin settings

Change the position of the logo and menus based on your preferences.

## Logo and menu in 1 line

* Logo in center 1

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FOeOClQjQX6LLh9XfyTOL%2F7.png?alt=media&#x26;token=7f1b665b-1a1f-4162-a0be-1672533e82e4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FTHn0HEeV7BFbYAVYzgAT%2F8.png?alt=media&#x26;token=029c96a7-7fad-45bf-bfd5-8581612461f5" alt=""><figcaption></figcaption></figure>

* Logo left

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FF5i5pLNS3jeubINAQ4fK%2F9.png?alt=media&#x26;token=074d22ff-14b6-4c03-9fb7-95b30a7ddcf5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FBlkSOzM2rlrOfaaxQy7c%2F10.png?alt=media&#x26;token=0cf7b0a6-a671-46c0-98a2-19bfe3e8c764" alt=""><figcaption></figcaption></figure>

## 2. Logo and menu in 2 lines

* Logo center

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FzL5gapbkX0hvYg1L7wkt%2F11.png?alt=media&#x26;token=d99da3b0-5952-4bc4-bd61-3a629e559f73" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FldmjoqmAJwPklC5bQMp1%2F12.png?alt=media&#x26;token=575d6b28-c597-476a-af16-2a9b5f82d9f9" alt=""><figcaption></figcaption></figure>

* Logo left

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FAJbocYMHgqcVCSkQwvoP%2F13.png?alt=media&#x26;token=ce882027-72f2-4407-9ee9-33d8d94e26f8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FyBpBmo14RUYdrOy6uTpY%2F14.png?alt=media&#x26;token=22c9a750-31ff-4872-b384-f9c08449bde4" alt=""><figcaption></figcaption></figure>

Opulent 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

{% embed url="<https://drive.google.com/file/d/1mD4OaYufbXSMEB6i_3ZkzCKv6j2b7Kxp/view?usp=sharing>" %}

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

{% embed url="<https://drive.google.com/file/d/157RCpqSrnbFm-hqRsiSA4sUoRpcLgsDW/view?usp=sharing>" %}

**3. Default scrolling**

{% embed url="<https://drive.google.com/file/d/157RCpqSrnbFm-hqRsiSA4sUoRpcLgsDW/view?usp=sharing>" %}

## Menu settings

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

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2Fqglft3k91DTbvnDakfnB%2F15.png?alt=media&#x26;token=9ac86c71-f8b0-4860-a58a-78d779b185c2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To add, remove, or edit menus in your Shopify store
{% endhint %}

## Add-ons

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

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

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2F3RYZHOqXXtdqK1cEnoCq%2F16.png?alt=media&#x26;token=4c64c93c-cabc-407f-8818-f0a80e25fb8c" alt=""><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.
{% endhint %}

## How to add more languages to your shopify store

{% hint style="info" %}
Steps:

1. **From your Shopify admin**, navigate to **Settings** > **Languages**.
2. In the **Store languages settings**, click on **Add language**.
3. Choose the desired language from the drop-down menu and click **Next**.
4. Select an active market to add your chosen language to.
5. In the **Unpublished languages** section, click **Publish** next to the language you want to make available to customers in your store.
6. Finally, click **Save** to apply the changes.
   {% 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

Instructions related to using multi-currencies in Shopify. Here's the revised text:

To display a currency selector in your store, follow these steps:

1. **From your Shopify admin**, navigate to **Settings**.
2. Click on **Markets**, then select **Add market**.

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FoFMWwbkPHjhw2ZcN7B3s%2F17.png?alt=media&#x26;token=163fd395-47ce-464f-b095-6ad9b036842f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2059493604-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRPWLB8MHorBB5Xcu4UyI%2Fuploads%2FhNaGVRd5id01VyqRkniR%2F18.png?alt=media&#x26;token=2daed35a-f3a1-4fcb-8134-4ae40e8a1945" 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 %}
