Solved

How to make all the product images the same size

Chillsmart
Excursionist
29 0 9

Hi all,

 

The images that are displayed in my product page are of different size. How do I make them the same size?

 

Chillsmart_0-1665994595751.png

 

Site url: thechillsmart.com

Accepted Solution (1)
oscprofessional
Shopify Partner
15741 2354 3057

This is an accepted solution.

Hello @Chillsmart 

Try this -

Go to the online store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

 

 

.grid-product__image-mask .image-wrap {
    padding-bottom: 100% !important;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 16 (16)

PageFly-Victor
Shopify Partner
7865 1785 3040

@Chillsmart  you can try this code

 

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets -> theme.scss.css

 

.grid-product__image-mask {

    height: 220px;

}

banned
Chillsmart
Excursionist
29 0 9

It is still the same 😕

oscprofessional
Shopify Partner
15741 2354 3057

This is an accepted solution.

Hello @Chillsmart 

Try this -

Go to the online store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

 

 

.grid-product__image-mask .image-wrap {
    padding-bottom: 100% !important;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Chillsmart
Excursionist
29 0 9

It worked! Thanks!

indyhome19
New Member
6 0 0

Hi,

 

Is this possible to do with the Craft theme?

Ammythach
Visitor
1 0 0

Mine is still the same 😞 I have boundless on if that helps

Minuxe74
Visitor
2 0 0

Hello, I am having the same problem with the photos. I was trying to insert that code, but when I reach a certain point, I can't find the "theme.scss.css". Can you help me, please. I am attaching a pic so I can make sense. ThanksCaptura de ecrã 2023-09-29, às 19.01.30.png 

thedirtybarcart
Visitor
2 0 0

Thanks for this, but I do not have that option. Here is a screen shot of what I see:

online store > theme > Edit Code >Assets >theme.js is the only option I see. My theme is Ella, if that helps.

Shopify Help - Photo resizing.png

Minuxe74
Visitor
2 0 0

Hello Ella,

 

Thanks for your reply.

I was able to manage the problem with help from a friend.

But thanks!!

Ana

thedirtybarcart
Visitor
2 0 0

I meant to say I am actually having the same problem, lol! Any insights on how to update within the Ella theme?

oscprofessional
Shopify Partner
15741 2354 3057

Hello @Chillsmart 

Go to the oneline store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

.grid-product__image-mask .image-wrap {
    height: 220px !important;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

thejustintharpe
Explorer
59 8 10

Hi @Chillsmart 

 

Follow these steps:

 

  1. Go to your themes page
  2. Click Edit Code
  3. Find the file named "theme.css.liquid" or "base.css"
  4. And paste the following code at the bottom of that file.

 

.image-wrap {
    padding-bottom: 100%;
}

 

Please let me know if it works.

Please Like and Mark as Solution if Helpful.
Try for Free. The Most Supportive Product Page Modifier App

Apps Specialist
phgorvadia
Shopify Expert
3 0 0

I have done with so many stores using the below code 
https://doublemarvellous.com/blog/equal-heights-of-elements-with-vanilla-js-in-shopify/

Hire me for shopify customization? contact me at phgorvadia@gmail.com If My post solved your problem? This is my Paypal too 🙂
Alekan
Visitor
1 0 0

Where do you post the code it says in the link? Thanks

phgorvadia
Shopify Expert
3 0 0

Yes its in the link

Hire me for shopify customization? contact me at phgorvadia@gmail.com If My post solved your problem? This is my Paypal too 🙂

topkozuchy
Tourist
4 0 0

Hello I have same problem, I added code it helped for computers but it didnt for mobile devices. Do you know why ?

.grid-product__image-mask .image-wrap { padding-bottom: 100% !important; }