What's your biggest current challenge? Have your say in Community Polls along the right column.

Different header icons on mobile - Dawn theme

Different header icons on mobile - Dawn theme

Melodie1990
Excursionist
28 0 5

Hi can anyone please help me with having different icons on my header to the ones I currently have on desktop please?

 

This is it on desktop: 

Melodie1990_0-1731499278137.png

And would like something similar to this on mobile if possible please: 

Melodie1990_1-1731499368871.jpeg

Many thanks 🙂 My store preview link is: https://adr2bzv752u1vpcu-73804087584.shopifypreview.com

Replies 4 (4)
Melodie1990
Excursionist
28 0 5

Do I just copy and paste the relevant code from base.css and theme.liquid? Or is there another way for me to share sorry? 

sahilsharma9515
Shopify Partner
1264 163 243

Hi @Melodie1990 Thanks for the URL, You need to accomplish it with the help of custom code, I can provide you the base code and you can take help of the base code to achieve the same on your site

 

<div class="header-search-icons">
    <img src="path/to/desktop-search-icon.png" class="search-icon-desktop" alt="Search Icon for Desktop">
    <img src="path/to/mobile-search-icon.png" class="search-icon-mobile" alt="Search Icon for Mobile">
</div>

 

CSS Code should look like this:

/* Hide the mobile icon by default */
.search-icon-mobile {
    display: none;
}

/* Show desktop icon only on larger screens */
@media (min-width: 768px) {
    .search-icon-desktop {
        display: inline;
    }
    .search-icon-mobile {
        display: none;
    }
}

/* Show mobile icon only on smaller screens */
@media (max-width: 767px) {
    .search-icon-desktop {
        display: none;
    }
    .search-icon-mobile {
        display: inline;
    }
}

 

Please Note: This is the example or base code you need to update the code according to your store and needs.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil



- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


mrashid
Shopify Partner
297 26 32

@Melodie1990 

Hello! Yes, it’s possible to customize your header icons separately for desktop. However, this typically requires code adjustments within the theme files. If you’re open to collaborating or can share temporary access, I’d be glad to help set this up for you! Let me know if you'd like to proceed.

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

mrashid
Shopify Partner
297 26 32

@Melodie1990 something is wrong on your product page

mrashid_0-1731505074084.png

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution