> For the complete documentation index, see [llms.txt](https://wpdocs.gitbook.io/ekommart/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wpdocs.gitbook.io/ekommart/content-management/setup-header.md).

# Set up Header

**Step 1** - From admin Dashboard, navigate to **Ekommart** **Options** -> **Header**

![](/files/-M0u9odCSmVoCrjzqXvF)

**Step 2** - You will see all tabs for setting of Header , in Header tab

![](/files/-M9WDNXUlL5lgQ1QdLhf)

\+ Option 1. Create Contact hasn't icon: Import HTML Code below on Contact info&#x20;

```
<pre>

<div class="ekommart-contact">
<div class="contact_inner">
<div class="contact_content">
<a class="contact_link" href="#"><span class="title">+84 800 456 789</span></a>
<span class="sub-title">Call Us Free</span>
</div>
</div>
<div class="contact_inner">
<div class="contact_content">
<span class="title">Free Shipping</span>
<span class="sub-title">On Orders Over $150.0</span>
</div>
</div>
</div>
</pre>
```

\+ Option 2. Create Contact has icon: Import HTML Code below on Contact info&#x20;

```
<div class="ekommart-contact">
<div class="contact_inner">
<div class="contact_icon">
<i class="ekommart-icon-headphones-alt" aria-hidden="true"></i>
</div>
<div class="contact_content">
<span class="sub-title">Call Us</span>
<a class="contact_link" href="#"><span class="title">+84 1800 33355</span></a>
</div>
</div>
</div>
```

**Step 3** - Choose your header Style for  page.

![style header](/files/-M9WDhM5YFgHeSe44jre)

**Step 4** - Install the header group

![header group](/files/-M9WFND1bV2ZylKGXDyh)

Front end look like :&#x20;

![](/files/-M9WHFmncd-Efd4IZ4eL)

**Step 5** -  Save Changes

**Front end look like** :

Option1:

![](/files/-M0uH68J7hrR0_9XF1Zv)
