Re: Make product image smaller on mobile product page

Solved

Make product image smaller on mobile product page

KalleSpang
Tourist
7 0 7

Hi everyone!

I've set the size of my product images to "medium" on the product page and it all looks good on desktop.
But I think it's a little too big on mobile and would like to make it smaller on just mobiles. The "small" alternative would suit better on mobile, or if it is possible to set it to
a given percent.

Is there a way to do this?
I've tried to have a look at the code and changed around a bit, but I can't really find anything that works.

Best regards,

 

Accepted Solution (1)
KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@KalleSpang 

Thanks for confirm 

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

@media only screen and (max-width: 749px) {
.product-single__media {
padding-top: 100% !important;

  img {
     height: 100%;
    object-fit: contain;
}

}
}

 

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

View solution in original post

Replies 56 (56)

KetanKumar
Shopify Partner
37142 3648 12063

Hello, @KalleSpang 

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

Please share your site URL,
So I will check and provide a solution here.

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
KalleSpang
Tourist
7 0 7

Hi,

How kind of you! 🙂🙂

www.porlabottles.se

 

Best regards,

 

KetanKumar
Shopify Partner
37142 3648 12063

@KalleSpang 

do you have like this?

KetanKumar_0-1603161838547.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
KalleSpang
Tourist
7 0 7

Yes, that would be great!

Best regards, 

KetanKumar
Shopify Partner
37142 3648 12063

This is an accepted solution.

@KalleSpang 

Thanks for confirm 

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

@media only screen and (max-width: 749px) {
.product-single__media {
padding-top: 100% !important;

  img {
     height: 100%;
    object-fit: contain;
}

}
}

 

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
KalleSpang
Tourist
7 0 7

Thank you so much! I really appreciate your help!
Like it alot more now! 😄

For anyone who is interested in doing the same to their page, the "padding-top" paramater determines the size of the image, and it's possible to assign a higher value than 100% if you want it bigger and a lower value than 100% if you want it smaller.

I made mine a little bit bigger then the original 100%, just to fit my taste.

Best regards,

KetanKumar
Shopify Partner
37142 3648 12063

@KalleSpang 

Thanks for update 

yes, you can

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
TheVinylFly
Tourist
7 0 3

I sort of followed your instructions. My theme doesn't have a Theme.scss.liquid....it only has a theme.liquid or theme.css so I posted that code in theme.css the image doesn't get any smaller it just moves the carousel onto the image as if it was getting smaller but it doesn't 

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

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

Please share your site URL,
So I will check and provide a solution here.

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
TheVinylFly
Tourist
7 0 3

Thanks Ketan, here is the link:

 https://thevinylfly.com/products/siser-htv-easy-weed-12-x-15?variant=37855830933694.

I'm going to eventually to enable my swatch widget and showcase the colors in the swatches....you wouldn't happen to know how to hide the image carousel on mobile would you?

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

yes, sure let me know which one do you have hide?

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
TheVinylFly
Tourist
7 0 3

I would like to hide all of the carousels on my "VINYL" (HTV & Adhesive) products because there's just so many colors to choose from and they would look better laid out in swatches rather than a carousel. 

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

Thanks for it 
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for 5-6 second 

.product-single__thumbnails { display: none;}

 

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
TheVinylFly
Tourist
7 0 3

I posted that code at the bottom of my theme.css file but it didn't seem to do anything

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

this code apply to hide thumbnails 

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
TheVinylFly
Tourist
7 0 3

Is it supposed to hide the thumbnails on the mobile carousel or somewhere on desktop? I didn't seem to see any change to my website after posting that code

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

yes, is possible to custom code can you please add me on staff so i will quick-fix mobile and desktop show hide 

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
TheVinylFly
Tourist
7 0 3

That would be great! how do I go about adding you to staff to edit that for me?

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

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
TheVinylFly
Tourist
7 0 3

Great, Just need your Email Ketan, sent you a PM

KetanKumar
Shopify Partner
37142 3648 12063

@TheVinylFly 

Great Thanks i will check and sent details 

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
juiceindia
Tourist
8 0 5

Please help me @KetanKumar i use theme warehouse.

www.thecocoexpress.in

i want to make product image smaller on mobile product page.

 

Thanks

KetanKumar
Shopify Partner
37142 3648 12063

@juiceindia 

sorry for any issue  have check real device it proper look if you have issue please share screenshort 

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
juiceindia
Tourist
8 0 5

@KetanKumar Sir my point is, the website viewer on mobile should see the price without scrolling. the viewer have to scroll a bit to see the price.

KetanKumar
Shopify Partner
37142 3648 12063

@juiceindia 

can you 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
juiceindia
Tourist
8 0 5

104EE39B-BF37-4028-A338-FFC824B0E614.png

CD1C2F25-0C1B-4EB0-A8AF-AB947B4CFF86.png

@KetanKumar 

On mobile, the viewer has to scroll to see the price. 

juiceindia
Tourist
8 0 5

9512E488-7D68-4B7F-A176-E206529F8E06.png

I need something like this 

@KetanKumar 

KetanKumar
Shopify Partner
37142 3648 12063

@juiceindia 

yes, please confirm 

KetanKumar_0-1645595094311.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
juiceindia
Tourist
8 0 5

@KetanKumar Yes this should do.

KetanKumar
Shopify Partner
37142 3648 12063

@juiceindia 

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.

 

@media screen and (max-width: 640px) {
.product-gallery__size-limiter .aspect-ratio {
    padding-bottom: 45% !important;
}

.product-gallery__size-limiter img.product-gallery__image {
    object-fit: contain;
}
}

 

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
juiceindia
Tourist
8 0 5

Thanks, it has solved the purpose. When we click the image to zoom, a new issue arises.

I am attaching the screenshots. 

@KetanKumar 

this is not okthis is not okThis is okThis is ok

KetanKumar
Shopify Partner
37142 3648 12063

@juiceindia 

oh sorry for that let's have check and update

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
37142 3648 12063

@juiceindia 

can you please remove first code after adding this updated code

@media screen and (max-width: 640px) {
.product-gallery__size-limiter .aspect-ratio {
    padding-bottom: 45% !important;
}

.product-gallery__size-limiter img.product-gallery__image, .pswp--zoom-allowed .pswp__img {
    object-fit: contain;
}
}
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
juiceindia
Tourist
8 0 5

@KetanKumar 

Sir this is not working. Same problem4483CE91-AE6E-4258-AE21-0E4C3B2ACCB8.png

KetanKumar
Shopify Partner
37142 3648 12063

@juiceindia 

if possible to give theme access so i will check and update

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
chris214
Excursionist
46 0 10

Hi @KetanKumar 

Bildschirmfoto 2022-05-04 um 10.07.59.jpg

 

could you help to adjust the product image so that the add to cart button is visible above the fold for mobile?

 

I need the product photo to be smaller on mobile.

 

I want mobile users to see the button when the page opens.

 

thank you so much in advance

chris

KetanKumar
Shopify Partner
37142 3648 12063

@chris214 

Sorry you are facing this issue, it would be my pleasure to help you.

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

Please share your site URL,
I will check out the issue and provide you a solution here.

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
chris214
Excursionist
46 0 10
chris214
Excursionist
46 0 10
KetanKumar
Shopify Partner
37142 3648 12063

@chris214 

do you need mobile-first screen show to add to cart button

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
yaseeng8
Tourist
5 0 2

Hi Ketan Kumar.
I want your help please.

Kindly help me to resolve the issue.
I have Warehouse theme install on my store.

I have variations on almost all of the products.
What I want is,
1) I want to resize main image of product on product page to fit on mobile

2) Variation images at the left side of the main product image in short size

3) Product Name, Variation selector, Price, Add to Cart and Buy Now button all to be visible on page without scrolling.

Shop name: https://multisolution-pakistan.myshopify.com/
Email: yaseeng8@gmail.com

Please resolve my issue.

Screenshot attached of current product page display which needs to be adjusted for mobile friendly experience

yaseeng8_0-1652047998165.jpeg

 

An Example of ideal optimized product page from another website is below for reference

 

yaseeng8_0-1652050439888.png

 

v

KetanKumar
Shopify Partner
37142 3648 12063

@yaseeng8 

oh sorry for that issue you case difficult bcz to many deta your prodct name  also long product name see attachment 

KetanKumar_0-1652065040029.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
yaseeng8
Tourist
5 0 2

Please do some adjustment for resolving this issue. Ideal optimized layout also attached for reference 

 

 

Screenshot_2022-05-09-03-51-39-459_com.android.chrome.png

KetanKumar
Shopify Partner
37142 3648 12063

@yaseeng8 

oh sorry your all content too much longer but can you try this code add to cart button to show the first screen

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

@media screen and (max-width: 640px) {
.product-form__payment-container {
    position: fixed;
    bottom: 0;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    z-index: 99999999999;
    background: #fff;
    left: 0;
    align-items: end;
    padding: 10px;
}
.product-form__payment-container .shopify-payment-button {
    margin-top: 0;
    margin-left: 10px;
}
}

 

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
yaseeng8
Tourist
5 0 2

it does not make any optimization at all.
I did it the correct way by the way.

I have added bamaniyaketan.sky@gmail.com as in staff, please check and help me out

yaseeng8
Tourist
5 0 2

Add to Card and Buy Now button are now ok, but image optimization and prices should be displayed without scrolling.
Please do this as well.
Thanks for your support and assistance

KetanKumar
Shopify Partner
37142 3648 12063

@yaseeng8 

thanks i will check and let you know 

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
DRAWMORETAGS
Visitor
1 0 1

Can you please assist.  I have tried to adjust the size of a clickable map and I cant figure it out. Its perfect on desktop, but way too large on mobile.  I cant find a theme.css file anywhere. I have a theme.liquid under layout and a theme-editor.js under asset.   Can someone please assist. The url im trying to fix is:

 

https://www.drawmoretags.com/pages/huntinfo-by-state

 

Thanks in advance.

KetanKumar
Shopify Partner
37142 3648 12063

@DRAWMORETAGS 

can you send 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