Adding a icon to the header code before the search icon

Store Design
,
1

Hi Everyone,

We are using the latest Dawn theme, and I wish to add a heart icon to the header to the left of the search icon.

We are currently using the Swishlist application for simplicity. Ultimately, I’d love to know how to do this so we can customise the icons in the header for anything we want.

Most previous solutions are not relevant for this theme or are about other style changes.

Thanks in advance.

2

Hello @MHSAdelaide2024 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your Sections → header.liquid
    Here at line no. 227 you will find this code

{% render ‘header-search’, input_id: ‘Search-In-Modal’ %}

Just above to it add your new icon code.

Thanks

3

Good day @MHSAdelaide2024 , Could you kindly provide me with the link to your store?

4

Hello, I also want to add the call icon before search bar. But when I add it before this code, it appears before the cart icon and after the search icon. Like this

MushSon_0-1730380932622.png
MushSon_0-1730380932622.png1771×242 36.9 KB

I want both the icons on the left side of search bar.
https://mushtaqsons.pk/?_ab=0&_fd=0&_sc=1

5

Hello, @Guleria I also want to add the call icon before search bar. But when I add it before this code, it appears before the cart icon and after the search icon. Like this

MushSon_1-1730381076045.png

I want both the icons on the left side of search bar.
https://mushtaqsons.pk/?_ab=0&_fd=0&_sc=1