Changing my product page image ratio from landscape to portrait (4:5)

Store Design
1

Hi all,

I’d need assistance to change my product page image ratio from landscape to portrait (4:5)

This is my product page

https://www.strapatelier.com/products/curved-lug-silicone-watch-strap

Screenshot_1.png
Screenshot_1.png801×632 301 KB

2

Hello there

To change the product page image ratio from landscape to portrait (4:5) on Shopify, you’ll need to modify the CSS code. Here’s how you can do it:

  1. Go to the “Themes” section of your Shopify admin.
  2. Select the theme you’re using and click on the “Editor” option.
  3. Add the following CSS code to the end of the file:
.product-single__photo-wrapper {
  padding-top: 80%; /* Change the percentage value to adjust the height of the image */
}

.product-single__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

This code sets the height of the product image container to 80% of the width, creating a portrait (4:5) aspect ratio. You can adjust the padding-top value to increase or decrease the height of the image

3

Hi there,

@EcomGraduates Which file should i paste this in?

4

Hi there,

@EcomGraduates Which file should i paste this in?