Debut Theme Search Result Grid

Solved
Highlighted
Excursionist
15 0 5

I applied that and saved the page, it fixed the issue, however it decentered the price (now alligned to the left) 

 

For some reason it seems that every fix I apply, breaks something else :(

0 Likes
Highlighted
Excursionist
15 0 5

This is what I have for the product price in theme.liquid

 

.product-card, .grid-view-item .price { margin-left:2px; text-align: center; justify-content: center; display: block; }
0 Likes
Highlighted
Tourist
7 0 1

Hello! 

I am interested in having the search results appear in a grid view as well. I used the codes you mentioned before and they worked for me (thank you!), but when I search, spaces appear in between the results. Do you know of any way to fix this? I am using the debut theme and my site is acsaesthetic.com

Screen Shot 2020-06-24 at 1.32.20 PM.png

1 Like

Hi averys823,

Nice looking store! Try adding the following to your theme.scss file:

.template-search .product-card{
   height: 430px;
}

What this does is set every product card to 430px only on the search page. Something to keep in mind, if you add a new product that has a very long name it may run over into the next product card. For simplicity, try to keep your product titles and images around same size to keep things uniform.

Let me know if that helps!

Kyle 

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.

We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
1 Like
Highlighted
Tourist
7 0 1

Yes this got rid of the spaces, thank you!! It looks like the products are still not filling up the whole grid, though.

Screen Shot 2020-06-24 at 1.51.07 PM.png

If you have a fix for this that'd be great, but I have another issue now that I really need a solution for:

I don't know if this is from changing this code, but my product photos that are not from the search results have all been compressed to squares when they are normally 3:4 or 2:3. They look normal in the search results, but when you see them from the home screen, a collection, drop down menu, etc they are all square. Do you have a solution for this?

Screen Shot 2020-06-24 at 1.50.41 PM.png

Thank you!!

0 Likes
Highlighted

Great!

In your theme.scss file edit the following:

//Change This
.
grid-view-item__image-wrapper{
max
-width: none !important; } .grid-view-item__image{
max
-width: none !important; }

//To this
.template-search .grid-view-item__image-wrapper{
max
-width: none !important;
}
.template-search .grid-view-item__image{
max
-width: none !important;
}

 and see let's see! 

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.

We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
0 Likes
Highlighted
Tourist
7 0 1

That worked! Thank you so much for your help!!

0 Likes
Highlighted
New Member
2 0 2

Hey! 

Thanks heaps for your help - this code has solved ~almost~ all my problems with the search results. 

The only issue I'm still having is that some of the images aren't loading. I've cleared the cache and reloaded the page and there are still some product images that won't load. Is there a way to fix this? 

 

 

Thanks  

1 Like
Highlighted

Hi PruesShop,

Can you send your shop's URL and I can take a look?

All the best,
Kyle

Let's get Shopify figured out together. Get live USA-based customer service for your current or upcoming web project.

We offer free and paid Shopify support.
Monday - Friday | 9 AM — 5 PM EST
Email: hello@freshnarrative.io | tel: (443) 345-8162
Baltimore, Maryland, United States
0 Likes
Highlighted
New Member
2 0 2
Pruesperfectpieces.com.au
1 Like