product images vertical in same size on product page

product images vertical in same size on product page

lilliborchmann
Tourist
17 0 2

how can i put my product images of the item on the product page vertical (one after another) and in the same size? (dawn theme)

 

and!! I also need help because the titles of my collapsable rows in the product information are not showing!! please help

 

store url: https://jyw60e-ra.myshopify.com/

Replies 5 (5)

CodingFifty
Shopify Partner
525 80 98

Hi @lilliborchmann,

 

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
lilliborchmann
Tourist
17 0 2

the store url is already in the discription! 

abdullahshahid_
Shopify Partner
37 1 5

To display product images vertically in the same size on your Shopify product page, you can achieve this by modifying the product image section in your theme's code. Here's how:

  1. Edit the Code:

    • Go to Online Store > Themes in your Shopify admin.
    • Click Actions > Edit Code.
    • Locate your product page template, usually under product-template.liquid or a similar file.
  2. Modify Image Display: In the section where product images are rendered, you'll need to adjust the HTML and CSS to ensure all images are the same size and displayed vertically. For example:

 

<div class="product-images">
  {% for image in product.images %}
    <div class="image-container">
      <img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt | escape }}">
    </div>
  {% endfor %}
</div>

 

 

Then, in the CSS, ensure that all images are the same size and arranged vertically:

 

 

.product-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-container img {
  width: 100%;
  height: auto;
}

 

Using EmbedAny for Multi-Column Images: If you want more control or wish to display images in a multi-column layout, you can use the EmbedAny app. This app allows you to easily embed custom elements like video testimonials, product images, and galleries. It helps you organize and display images in a neat multi-column layout without needing to dive into the code.

Simply use EmbedAny to embed image galleries or carousels directly onto the product page, and it will automatically manage the layout for you in a clean, responsive format.

This method makes it super easy to ensure your product images are consistent and presented well, all while using minimal code.

EmbedAny
Embed 800+ widgets to Shopify with just a link!
https://apps.shopify.com/embed
lilliborchmann
Tourist
17 0 2

thank you so much! but where do i find where the product images are rendered in my main.product.liquid ?

lilliborchmann
Tourist
17 0 2

Bildschirmfoto 2025-01-26 um 12.51.04.png

 

is this the file i have to put it under? but when i do it it just makes a copy of the images in a vertical line under the original images Bildschirmfoto 2025-01-26 um 12.52.55.png