Layout for search results

Store Design
1

Hi!

Using blockshop and search products layout on mobile view displays one product at a time.

How to change the view to display 2 or more grids after a search.

1 Like
2

Hello.
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

1 Like
3

www.swankybeautysupply.com

4
  • Here is the solution for you @Jofori
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the theme–async.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.search--product {
    width: 50% !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1719668337075.png
BSSTekLabs_0-1719668337075.png381×742 63.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
2 Likes
5

Thank you very much, I’ll give this a try soon and let you know if it worked.
Also, is there are way to add filtering to my search?

6

If you want to add a filter to the search section, this requires time to customize additional code, so I am not able to do this right now. Please try implementing the code above, and if you have any questions, feel free to message me.

7

Hi @Jofori

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 749px){
.search--products-container .search--product {
    width: 50%;
}
    }
8

Thank you very much!

worked!

9

Thanks for this, its fixed my search modal on mobile devices. Great. :slightly_smiling_face: