How To Change Product Search Page Layout From 3 Columns To 4 (Loft Theme Template)

Technical Q&A
1

Hi Shopify Support,

I would be grateful if someone from the Shopify Support Team or Community could help me with a coding issue I have at present. I currently working on a client’s site, and although I have managed to change the collections page layout to four columns, however, I cannot do this for the search page layout. The website is built on the ‘Loft Theme’, and all collections pages have rows of four, but when a search is conducted, the results page, (a/search), yields only a three-column page. I have tried editing all possible .liquid pages, but nothing changes. Also, there is no option to amend the search page layout within the theme itself.

Would someone from your team is able to look at this problem for us and offer us a solution, please?

The website URL is: www.glassimages.co.uk

Thanking you in advance.

Michelle

2

hello @brandpanelmedia

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 729px){
.shopify-section section-search-template .collection-page__loop{
    display: flex;
    flex-wrap: wrap
}
.collection-page__product--one-third {
    width: 25%;
}
}
3

Hi Natztech,

Thank you for your reply to my query. Apologies for the delay in response to you.

I’ll implement the code now and let you know how we get on.

Kindest Regards,

Michelle

4

Hi Natztech,

Thank you so much for your solution to the search page grid query.

Yes! This has worked, the only thing is, each image is still quite large and wondered if there was any way to make the images smaller, with more space around

the image? I have placed a link below for you to see how the grid looks now:

https://glassimages.co.uk/a/search?q=hello

We have managed to amend the collection page grids to showcase images in four columns, with smaller images and more padding around each image.

Please see our image collection layout here:

https://glassimages.co.uk/collections/glass - (This is how we would like the search page layout to look also.)

Would it be possible to help us amend the code to change the layout to match the collection page layout also?

Thanking you in advance.

Kindest Regards,

Michelle

5

hello @brandpanelmedia

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see like this https://nimb.ws/RwyFOh

@media screen and (min-width: 729px){
  .template-search .grid--full .grid__item .collection-page__loop .collection-page__product .product-loop__image-container    .product-loop__tile-img {
    height: 70%;
    width: 83%;
}
}
6

Hi Natztech,

Thank you so much for your help with the code. It worked! Amazing! :slightly_smiling_face:

The page now looks brilliant.

https://glassimages.co.uk/search?q=art&type=product

So happy with your help and the results.

Many Thanks,

Michelle

P.S. If I needed help with another issue regarding installing app code, that won’t implement, would I be able to post a reply here with the details, or should I post another request?

Thank you again.