Solved

How To Change The Layout Of Search Bar On Mobile & PC

bleukinsd
Visitor
3 0 1

I am looking to change the search filter layout from horizontal to drawer. When changing the setting's on "Search results" it doesn't change. I'm using Dawn Theme

Example:

This is how mine looks:

bleukinsd_0-1714999024487.png

This is how I want mine to look:

bleukinsd_2-1714999073424.png

 

Accepted Solution (1)

PageFly-Amelia
Shopify Partner
346 105 150

This is an accepted solution.

Hello @bleukinsd 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.search-modal {
   height: 100vh;
   max-width: 520px;
   left: auto;
}

.search-modal__content {
   justify-content: flex-start;
   align-items: flex-start;
   padding: 40px;
}

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

Reply 1 (1)

PageFly-Amelia
Shopify Partner
346 105 150

This is an accepted solution.

Hello @bleukinsd 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.search-modal {
   height: 100vh;
   max-width: 520px;
   left: auto;
}

.search-modal__content {
   justify-content: flex-start;
   align-items: flex-start;
   padding: 40px;
}

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.