Shopify themes, liquid, logos, and UX
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/
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?
the store url is already in the discription!
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:
Edit the Code:
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.
thank you so much! but where do i find where the product images are rendered in my main.product.liquid ?
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
Learn 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, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025