Shopify themes, liquid, logos, and UX
Hi there
i'm using theme Studio.
My requests:
- I would like all the photos in the collection pages to be square sized (no matter the original photo size).
- I would like all product photos in the individual product pages to be a specific height/weight.
- I would like all thumbnail photos in the individual product pages to be a specific height/weight.
Now, I understand the solution to this is CSS coding to add on specific sections in the coding. But which ones?
I know there is a lot of questions/answers already on the same topic and I have tried these CSS-codes already without any luck. I believe I haven't found the correct codes to add at the correct places in the coding.
Furthermore I would need this coding to not makes it looks insane on a mobile device :S
I'm so grateful if anyone could help me.
So, this means I would like the product photos to be square sized when they are shown as collections but once shown on their specific product page to have another size (of my choice).
Hello Amousetale,
To achieve your desired image resizing effects on Shopify collection pages, individual product pages, and thumbnail photos, you can use CSS to adjust the dimensions of the images.
Here's how you can do it:
1. Square Sized Photos on Collection Pages(Please add this code bas.css file at the bottom)
/* Square sized photos on collection pages */
.collection-image {
width: 100%; /* Set width to fill container */
height: auto; /* Maintain aspect ratio */
max-width: 300px; /* Adjust as needed */
max-height: 300px; /* Adjust as needed */
object-fit: cover; /* Maintain aspect ratio and cover container */
}
Save Changes.
Replace .collection-image with the appropriate class selector for your collection page images.
Specific Height/Width for Product Photos on Individual Product Pages(Add this code base.css file at the bottom)
/* Specific height/width for product photos on individual product pages */
.product-image {
width: 100%; /* Set width to fill container */
height: auto; /* Maintain aspect ratio */
max-width: 500px; /* Adjust as needed */
max-height: 500px; /* Adjust as needed */
object-fit: cover; /* Maintain aspect ratio and cover container */
}
Replace .product-image with the appropriate class selector for your product page images.
Specific Height/Width for Thumbnail Photos on Individual Product Pages: (Also add this code to the base.css file at the bottom)
/* Specific height/width for thumbnail photos on individual product pages */
.thumbnail-image {
width: 100%; /* Set width to fill container */
height: auto; /* Maintain aspect ratio */
max-width: 100px; /* Adjust as needed */
max-height: 100px; /* Adjust as needed */
object-fit: cover; /* Maintain aspect ratio and cover container */
}
Replace .thumbnail-image with the appropriate class selector for your thumbnail images on product pages.
save changes.
I cant find my store class selector to replace .product-image with. How do I find it?
campbellmillertools.co.uk
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025