How do I edit code so the product images are all the same size?

GenevieveL
Visitor
3 0 0

www.medsecare.ca

I want everything to look aligned. 

Thanks.

 

Replies 3 (3)

Lilith
Shopify Staff
603 73 185

Hi, @GenevieveL!

My name is Lilith, I'm on the Social Care team at Shopify.

It's great that you're looking to improve some areas of your site! Images are some of the most important parts of any store online. It definitely impacts your conversions. Before you make any changes I do recommend taking a peek at our tips for image resolution in our Help Center. It'll be a good place to start enhancing media on your site.

Don't forget the better the quality and the more consistent your image styles are the more cohesive your brand identity will be. Which inevitably leads to an increase in buyer trust. Potential customers will look at all aspects of a site to gauge their feeling towards it. Better aesthetics gives off a sense of professionalism and trustworthiness that is a step required for visitors to make a purchase.

To help answer your question though, you don't necessarily need to code anything to resolve this.

Coding will only change the way that your images will be aligned into a preset shape. This doesn't mean your images will be aligned perfectly as they all seem to have different dimensions which happen to be the reason for the misalignment. That said, you have a couple of options. One is to make sure your ratios are set on the actual image, and the second option is to have code changed on your site.

 

Change Image Aspect Ratios

Aspect ratios are derived from the dimensions of your images. For example, a square is 1:1 as each side is the same length. We have a really great guide and video to help you with this information.

As you can see in the screenshot below, your images all have inconsistent heights and sizes. This is the reason that they don't line up.

 

05-42-16516-18337

 

 

The easiest way to fix this is to edit your photos to have the same aspect ratio. Even if they don't have the same resolution, you can have the same aspect ratio. If you were to change the code on your theme to simply have them line up, there will be large gaps of blank space above or below which can also make the site look a little less than ideal.

To help you crop and edit the photos to be the same aspect ratios you can use any of the following guides:

 

Editing the Theme

This part is about making modifications to your theme. If you don't want to edit your photos to have a consistent aspect ratio, you'll need to edit the way the theme crops the photos as well as the size and dimensions of the "container" that will house the photo.

This might be a bit more complex than a snippet of code so I highly recommend hiring one of our partners to help you with this. You can find a suitable Shopify Partner in the Experts Marketplace or request a quote by following this guide here.

An alternative is to use an app that you can install on your site. This will auto-change things for you based on your settings. An image resize app will be a great tool for your site if you find that most of your images will continue to have varying aspect ratios.

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

GenevieveL
Visitor
3 0 0

Thanks for your reply. 

I used an app to make all the pictures 1:1 ratio but the text was still misaligned. 

I ended up using the services of a collaborator to fix the issue in my collections and you might also like section.  

Timur Tairli <tairli@yahoo.com> was very helpful. 

Lilith
Shopify Staff
603 73 185

@GenevieveL I'm very glad to hear you had someone go in and help you with the realignment on this. Keep those guides in my previous post handy just in case you need to refer to them in the future.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog