Can you please help me add a search bar on my mobile and tablet version ONLY of my website

Store Design
,
1

Hello could anyone help me add this EXACT search bar design into my website please? I need it for MOBILE AND TABLET VERSIONS only.

my website is constructionlayers.com

Screenshot 2026-06-20 at 1.46.41 PM
Screenshot 2026-06-20 at 1.46.41 PM1028×1266 84 KB

2

Hey @clayinfo

Quick heads up first, have you tried to explore the theme customization settings first? Because usually most of the themes has an option to display a search bar instead of an icon.

I saw your website and wasn’t able to locate the search bar in your code files so I’m guessing either it’s disabled or doesn’t exists at all. I can setup a search bar as per your reference but without having the backend access, nobody can help you out. Drop the collaborator request code in my private messages and I’ll be happy to sort it out.

Cheers,
Moeed

4

Hi @clayinfo

Please go to your theme customization settings and check if the option is available there. If not, we will need to customize it in the theme code. You can send me your collaborator code, and I’ll check it for you.

Best regards,
Devcoder :laptop:

5

Keep this public until the theme file is clear. For Construction Layers the first split is whether the mobile drawer already renders a search form that is only hidden by CSS, or whether the drawer has no search form at all.

Can you post the theme name and the mobile header/drawer section filename? With that, the change should stay scoped to the drawer search form plus a mobile/tablet media rule, not a desktop header rewrite.

6

Definitely! Please share the exact search bar design (or a link to it) and let us know which Shopify theme you’re using. Someone here should be able to point you in the right direction for a mobile/tablet-only implementation.

7

Hi @clayinfo,
Go to onlinee store > theme > custamize
Click on the header section
On the right look for menu type and change it too drawer.

Step2:
Go to online store > edit code
In snippets folder go to header-drawer.liquid file and in

    tag paste this

    <li style="padding: 0 2rem 2rem 2rem; list-style: none;">

  <form action="{{ routes.search_url }}" method="get" role="search">

    <input type="text" name="q" placeholder="SEARCH" style="width: 100%; border: 1px solid #000; padding: 10px; text-transform: uppercase; font-size: 14px; background: transparent;">

  </form>

</li>

    Step 3:

    Goto base.css file and at the bottom of this file paste this code:

    .menu-drawer__inner-container form {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

}

    Save.