Change product thumbnail size & location on Colorblock Theme

Change product thumbnail size & location on Colorblock Theme

Spikes_and_Seam
Tourist
6 0 1

Hi! I would like to change the location of my product thumbnails to the left of the main product image and make them slightly larger. I am using shopify's "Colorblock" theme and have several different product templates. Here is the url of the product I am currently trying to modify - https://shopspikesandseams.com/products/checkered-picnic-custom-satin-pajamas?_pos=1&_psq=checkered+...

 

Screenshot 2024-02-12 at 10.22.08 AM.png

Replies 2 (2)

amine_diouane
Shopify Partner
31 4 6

To reverse the order of items in a grid layout, you can use the CSS property grid-template-rows or grid-template-columns with the direction property set to  (right-to-left). Here's how you can do it:

 

  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    direction: rtl; 

 

shopif1.JPG

 

Spikes_and_Seam
Tourist
6 0 1

I don't want to reverse them, I want the thumbnails to  display to the left of the main product image instead of below. and for them to be larger too.