Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
In the Dawn theme on the product page, the container of the thumbnail image has a massive amount of padding-top set in the style attribute. It ends up being about 100% of the image height. It's doing some weird calculation and I'm sure it's probably done for a reason, but I can't work out why it's there. The following div wraps the image..
<div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
Also, all of the images I have for the products are tall and narrow. With Dawn having the width set at 100%, it makes them huge. Like, absolutely massively huge. I'd rather not go ripping out half of the code to make this work.
After setting up another store with other content, I see that it's the tall product images that are the root of the problem. And also that some changes I've made to some stylesheets somewhere have caused the padding to go bad (I realise that it's there to create height for the container holding the image).
I guess the only fix to get around the images that are about 3 times the height of a desktop viewport is to use images that aren't so narrow.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025