How can hide the search button on my mobile site layout?

Store Design
, , , , , , , , ,

Topic summary

A user needed to hide the search button on their mobile site layout while keeping it visible on desktop. They were using the Origin theme.

Solution provided:

  • Navigate to Shopify admin → Online store → Customize
  • Access Theme settings → Custom CSS
  • Add CSS code targeting mobile devices (max-width: 768px) to hide the search button using display: none !important

The CSS specifically targets the details-modal.header__search element within a media query to affect only mobile layouts.

Outcome: The solution was successfully implemented and resolved the issue.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I want to hide the search button on my mobile site layout only. I’ve included a photo of my current mobile site layout. I’ve circled the search button in red.

Theme: Origin

URL: billon.maison

![IMG_052FC72FFF99-1.jpeg|1290x2661](upload://d4WoqCNJ6z1Oadi4WP0YeqGJdaa.jpeg)
2

Hi @MaisonBillonDon

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
details-modal.header__search {
    display: none !important;
}
}

image (11).png
image (11).png350×591 240 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Hey @DaisyVo , I’ve been well.

This solutions works! Thank You!