how to align the product images and title?

gq9999
Visitor
1 0 1

Hello!

 

The products in my store are not aligning. You can see some is slightly above, and some is lower. Can anybody help me with aligning them? So that they take the same space and the titles are in the same place. thank you!

 

https://ninetyninedreams.com/collections/all

pass: gq999

Replies 4 (4)

Daniel-HHP
Shopify Partner
137 31 28

@gq9999 the images need to be the same size/ proportion.

You can use this app to make them all square or same proportion.

https://apps.shopify.com/bulk-image-edit

PageFly-Victor
Shopify Partner
7865 1785 3056

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

Regard your concern to align the product images and title on the collection page.

The product images is displayed depend on which images you uploaded. To keep it as the same align, please help me to re-upload it as the same size and same dimensions.

If not you can try to add this code in your theme.liquid by follow these steps:
Step1: Online store > Themes > Edit code > Search : theme.liquid

 

Step2: paste this code to the above of </head>: 

{% if template contains 'collection' %}
<script>
var media = document.querySelectorAll('.card__inner')
media.forEach(m => {
    m.style.width = '200px'
    m.style.height = '200px'
} )

 </script>

{% endif  %}

Please change the px value to match with your requirement.

 

Best regards,

PageFly

 

KetanKumar
Shopify Partner
36845 3636 11978

@gq9999 

can you please check your theme setting its allow this option you have easy to manage

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Alison_Ablestar
Shopify Partner
30 1 5

Hello,

 

I agree with Ketan on this, I would check your 'theme' first, many themes have an option that you can access in the 'customize theme' area that helps keeps images sized correctly.  There are apps that help with this also, but if your theme is set up for it that would be easier and cheaper.

 

If you click the 'customize' button beside the theme (like in the image below), you can check the settings. It may be inside the settings for the collection area.

 

Alison_Ablestar_0-1660580559913.png