Shopify themes, liquid, logos, and UX
hi, can someone help me add a search icon/bar on mobile?
i tried solutions that have been provided for other themes but they don't work for Spotlight.
Thanks!
https://shoproseadore.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
- Here is the solution for you @shoproseadore
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.header__search {
display: block !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
.header--top-center>.header__search {
display: block !important
}
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
it didnt work 😞
sorry, meant for that reply to go under the other solution provided. trying yours now!
ok there's not "Custom CCS" under my theme
This is an accepted solution.
- Here is the solution for you @shoproseadore
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.
.header__search {
display: block !important;
}
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Please add a } mark to the position I marked @shoproseadore
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
doesn't work either! am I missing something else
it didn't work 😞
You're missing a "}". Let's add it to the location I marked in the photo above @shoproseadore
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
add this code to last line file base.css
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025