You want to go from this:
... to that:
-
On your Customize theme page, in the Collection page section, set the Grid style to 'Grid':
-
Still on your Customize theme page, in the Colors section, set the Product background to transparent:
You are off to a good start! Time to make images fill their alloted column.
-
Copy+paste the below CSS at the very bottom of your theme.scss.liquid stylesheet.
.template-collection, .template-index { .grid-product { margin-bottom: $gutter; } .grid-product__image-link { height: auto !important; } .grid-product__image { padding: 0; @include prefix('transform', 'translate(0, 0)'); position: static; } } .template-search { .grid-search__product-link { height: auto !important; } .grid-search__image { padding: 0; @include prefix('transform', 'translate(0, 0)'); position: static; } }
-
If your product images are blurry as a result, edit the image size inside product-grid-item.liquid from
large
togrande
. That's around line 35. -
In search.liquid, replace this code around line 61:
<img src="{{ item.featured_image.src | img_url: 'medium' }}" alt="{{ item.featured_image.alt }}" class="grid-search__image">
with:
<img src="{{ item.featured_image.src | img_url: 'grande' }}" alt="{{ item.featured_image.alt }}" class="grid-search__image">
... to get larger product images.
Hi!
Need help with this.
The product page stacks the photos in a list which is not user friendly, and it does not have an option to display one main product image with thumbnails below it. Is there any way to fix this?
Also, the images which i have are of different sizes, so is there any way to display them on the collection page at same dimensions.
Thanks!