Simple Theme: Make Images all the same size on collection pages and product page

goldandsilver
Tourist
7 0 2

I take and edit my items with the iphone.  After I upload the images to shopify on the "simple" theme they all display differently on the product page and the collection pages.  Does anyone know how to I can fix them to be the same size so the pages look cleaner.

Example:

Collections Page:

https://goldandsilverauctions.com/collections/all

Product Page:

https://goldandsilverauctions.com/products/925-sterling-silver-black-onyx-and-marcasite-post-earring...

Does anyone know how to frame it so the rows of images are the same height and width regardless of the image size?  My products are pre-owned low value jewelry so the I cant crop everything the same size (the iphone doesn't let you set the dimensions) and all the jewelry are different sizes and shapes so they have to be cropped differently. 

 

 

 

Replies 55 (55)

KetanKumar
Shopify Partner
36855 3637 11977

@goldandsilver 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

can you please confirm this do you have like this?

Products – Gold and Silver Auctions.png

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
goldandsilver
Tourist
7 0 2

My page does not look like that

 

goldandsilver_0-1616720210576.png

 

KetanKumar
Shopify Partner
36855 3637 11977

@goldandsilver 

don't understand my message i mean its proper look so i give you code 

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
goldandsilver
Tourist
7 0 2

Yes that looks good, will it work for the product page images as well?

KetanKumar
Shopify Partner
36855 3637 11977

@goldandsilver 

Yes, please give me a product look now screenshot?

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
KetanKumar
Shopify Partner
36855 3637 11977

@goldandsilver 

thanks for update 

yes i will do this 

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
partpartpart
Excursionist
20 0 6

Hi, I have the same issue. Here's my website https://partpartpart.com/ and password fleimp

KetanKumar
Shopify Partner
36855 3637 11977

@partpartpart 

KetanKumar_0-1617079665210.png

is this fine

 

@goldandsilver 

can you do this?

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
partpartpart
Excursionist
20 0 6

Yes. Thanks!

KetanKumar
Shopify Partner
36855 3637 11977

@partpartpart thanks for confirming

@goldandsilver also can you please add this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__image-wrapper {
padding-top: 100% !important;
}
.product__image-wrapper img {
height: 100%;
    object-fit: cover;
}

 

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
partpartpart
Excursionist
20 0 6

Awesome! Thank you so much! 

KetanKumar
Shopify Partner
36855 3637 11977

@partpartpart 

it's my pleasure to help us

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
elleandco
Visitor
2 0 0

@KetanKumar Hello! I am having the same issue. I tried doing what you said and it didn't work

elleandco
Visitor
2 0 0
KetanKumar
Shopify Partner
36855 3637 11977

@elleandco 

sorry for this issue 

can you please share further issue screenshot so i will guide you

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
Beytibyarabesqu
Explorer
47 0 19

Hello,

@KetanKumar 

I'm facing the same issue i'm using Debut Theme, I want all my images on the collection pages & product pages to have the same size, but they don't, and the difference in size is more visible on the mobile versiion than desktop.

How can I fix that?

Thanks,

Michelle

KetanKumar
Shopify Partner
36855 3637 11977

@Beytibyarabesqu 

can you please share store url please

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
Beytibyarabesqu
Explorer
47 0 19
KetanKumar
Shopify Partner
36855 3637 11977

@Beytibyarabesqu 

thanks can you please show me issue image and sent url page also 

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
gq999
Excursionist
34 0 17

Hello!

I have the same issue here, want to have the size picture size for both collection pages and product pages.

I tried the code but it didn't work. Could you take a look at it for me, please?

Thanks!

My website link is https://colormaizepaintbynumbers.com/

KetanKumar
Shopify Partner
36855 3637 11977

@gq999 

sorry for that issue i have also check your store doesn't show any issue please show me issue images 

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
gq999
Excursionist
34 0 17

i want them to be the same size for the collection page and the product page.

截屏2021-11-13 上午7.45.12.png截屏2021-11-13 上午7.45.01.png

 

KetanKumar
Shopify Partner
36855 3637 11977

@gq999 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.grid-view-item__image-wrapper {
    width: 100%;
    max-width: 100% !important;
}
.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image {
    height: 100%;
    object-fit: cover;
    max-width: 100% !important;
    max-height: 100% !important;
}

 

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
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar sorry just realized the screenshot upload failed yesterday

please check below. as u can notice in the collection page the images don't have the same size on the mobile.

https://beytibyarabesque.com/collections/blankets

Thanks,

M

 
 

WhatsApp Image 2021-11-13 at 1.32.08 PM.jpeg

 

 

KetanKumar
Shopify Partner
36855 3637 11977

@Beytibyarabesqu 

can you please just add above code that's work all 

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
Beytibyarabesqu
Explorer
47 0 19

I tried but it's cropping my images. should I use another code? @KetanKumar 

KetanKumar
Shopify Partner
36855 3637 11977

@Beytibyarabesqu 

try this code

.grid-view-item__image-wrapper {
    width: 100%;
    max-width: 100% !important;
}
.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image {
    height: 100%;
    object-fit: contain;
    max-width: 100% !important;
    max-height: 100% !important;
}
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
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar That's perfect it worked perfectly well! Thanks

I have another question if you can help me. If you notice in the screenshot below, the collection title is not really visible on the images. I tried changing the colors but I didn't like it in a darker color. is there a way to put the title below the item, instead of on it? Thanks

WhatsApp Image 2021-11-14 at 12.08.52 PM.jpeg

KetanKumar
Shopify Partner
36855 3637 11977

@Beytibyarabesqu 

yes please change look 

title show to below image 

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
Beytibyarabesqu
Explorer
47 0 19

@KetanKumar where can i find "change the look"?

Cammy10
Tourist
3 0 1

I tried that code and my pictures still look the same

 

KetanKumar
Shopify Partner
36855 3637 11977

@Cammy10 

sorry for your facing this issue, please share store url so i will  check and guide

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
gq999
Excursionist
34 0 17

hi there,

thank you! What will the code be if I just want the images on the product page to be the same size?

 

Thanks!

截屏2021-11-15 下午11.44.44.png

gq999
Excursionist
34 0 17

hi there,

 

Is it possible to make only the product images the same size on the product pages?

 

Thanks!

KetanKumar
Shopify Partner
36855 3637 11977

@gq999 

yes please share store url

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
KetanKumar
Shopify Partner
36855 3637 11977


@Beytibyarabesqu 

thanks for url i have check all product image are same size no issue if you have issue please share issue images 

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
manue22
Tourist
6 0 2

Hi !

 

I have the same issue I tried adding to the code as mentioned earlier it did not work. I am using Dawn theme. 

 

amarafloral.com

 

I need all my product images to be the same size please. 

 

Best

 

Manu 

KetanKumar
Shopify Partner
36855 3637 11977

@manue22 

sorry for that issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

 

.card--product .media {
    padding-bottom: 100% !important;
}

 

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
manue22
Tourist
6 0 2
Hi

It did not work, it messed up my landing page please check
KetanKumar
Shopify Partner
36855 3637 11977

@manue22 

sorry revert code you put code wrong 

please check proper step and add

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
manue22
Tourist
6 0 2

Hi!

 

my store is completely messed up now how do i get it back to its original pattern??

 

please help!! also with resizing

 

amarafloral.com

manue22
Tourist
6 0 2

how do i revert to the css code that was? I deleted it by accident. :((

manue22
Tourist
6 0 2

Hi!

 

Please help the images on my store got worse not better, please let me know how i can fix this 

nkshatra
Visitor
1 0 0

Hi @KetanKumar , I am new shopify store and I wanted all pics on my store to be in proper alignment which are showing in various shape and sizes on my website. Can you please help me how can I do this ? I am using dawn theme and it is i guess shopify store 2.0 .

Here is link for my store:
https://nkshatra.myshopify.com/

hauenstein2
Tourist
3 0 3

@KetanKumar

Hello! Wondering if you could check thew code and see what I need to do for image sizing!

 

https://threvemercantile.myshopify.com/collections/sale

 

KetanKumar
Shopify Partner
36855 3637 11977

@hauenstein2 

sorry for that issue 

how can i check bcz your store password protect can you please share us

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
hauenstein2
Tourist
3 0 3
123