Is there a way to adjust the size of the product photos on the Products page in Narrative Theme?

New Member
5 0 0

I would like much smaller photos so that more products show up without scrolling, but like Etsy or Amazon or other e-commerce sites. The larger photos are good for a gallery page, but for the product page I'd love them to be smaller.

0 Likes
Highlighted
Shopify Expert
418 29 79

Yes, you can control that in Sections > product-template.liquid (in the edit theme area):

 

This is the line of code that controls the max width:

<div class="product__image-container{% unless featured_image == image %} hide{% endunless %}" style="max-width: {{ max_width }}px" data-id="{{ image.id }}" data-variant-image-toggle-hide>

You could hardcode a number in there (like 300px for example), but then you'd lose the variable responsive sizing it's calculating with the max_width variable.

 

It's getting max_width number from earlier in that template, depending on certain conditions. You can read those conditions and edit them according to your goals to change the output max width. That's probably the best route (with the easiest route being to hard code the number).

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes