Re: spotlight theme: add a search bar on mobile

Solved

spotlight theme: add a search bar on mobile

shoproseadore
Tourist
6 0 3

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/

 

Accepted Solution (1)

BSS-TekLabs
Shopify Partner
2350 702 828

This is an accepted solution.

- Here is the solution for you @shoproseadore 
- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1721315908796.png

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
9695 1937 1973

Hi @shoproseadore 

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 and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

shoproseadore
Tourist
6 0 3

it didnt work 😞

 

Screenshot 2024-07-18 at 11.37.42 AM.png

shoproseadore
Tourist
6 0 3

sorry, meant for that reply to go under the other solution provided. trying yours now!

shoproseadore
Tourist
6 0 3

ok there's not "Custom CCS" under my theme

BSS-TekLabs
Shopify Partner
2350 702 828

This is an accepted solution.

- Here is the solution for you @shoproseadore 
- Please follow these steps:

step.png

- 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:

BSSTekLabs_0-1721315908796.png

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 702 828

BSSTekLabs_0-1721317231850.png

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
shoproseadore
Tourist
6 0 3

doesn't work either! am I missing something else

Screenshot 2024-07-18 at 11.44.27 AM.png

shoproseadore
Tourist
6 0 3

it didn't work 😞 Screenshot 2024-07-18 at 11.37.42 AM.png

BSS-TekLabs
Shopify Partner
2350 702 828

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 702 828

BSSTekLabs_0-1721322808535.png

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now