How to move search icon and link heart icon to wish list in Dawn theme?

Store Design
1

Hello Amazing souls,

Yes I have an another question:)

I am trying to get this search icon to the left side of the header. Also would like to add a heart icon where it will work for wish list. I learned how to add a heart icon but not sure if the hear icon will take the customers to the wish list page. I mean how do I link the icon to the page??

Aylin2022_0-1662851642578.png
Aylin2022_0-1662851642578.png1859×237 20.6 KB

2

Hi @Aylin2022 unfortunately the search icon is in a containing element with all the other icons so we can’t simply use CSS grid to shift the search icon location around inside the header.

Below is a css bandaid but the real fix would be to move the search icon code to the proper location in the source code and update the CSS.

Always backup themes before changing code.

To absolutely position it inside the header set to relative position, in the dawn themes base.css file add the following to the bottom:

@media screen and (min-width: 990px) {
 .header {
     position: relative;
 }
 .header__search {
    position: absolute;
    left: 0;
 }
}

This only applies to desktop, as on mobile the menu icon is on the left and the search icon would be in the way. As the icon is positioned to sit in the padding to the left of the site heading In some case the padding may need to be adjusted or margin added to the heading.

If you are needing to make many changes that are not straightforward to a theme keep in mind there are many free themes available and before investing time in learning out how to customize a theme it may be better to find a theme that matches the feature requirements better out of the box.

1 Like
3

Thank you so much Paul. Yes, I am aware of other themes; however, I have spent already good amount of time here and want to launch this baby. The code did not work and thats okay. I am about the throw my laptop out of the window and go to sleep:)