Make product image smaller on mobile product page

[KalleSpang]

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,

[KetanKumar]

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.

[KalleSpang]

Hi,

How kind of you! 🙂🙂

www.porlabottles.se

Best regards,

[KetanKumar]

@KalleSpang 

do you have like this?

[KalleSpang]

Yes, that would be great!

Best regards, 

[KetanKumar · 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;
}

}
}

[KalleSpang]

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]

@KalleSpang 

Thanks for update 

yes, you can

[TheVinylFly]

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]

@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.

[TheVinylFly]

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]

@TheVinylFly 

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

[TheVinylFly]

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]

@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;}

[TheVinylFly]

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

[KetanKumar]

@TheVinylFly 

this code apply to hide thumbnails 

[TheVinylFly]

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]

@TheVinylFly 

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

[TheVinylFly]

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

[KetanKumar]

@TheVinylFly 

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

[TheVinylFly]

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

[KetanKumar]

@TheVinylFly 

Great Thanks i will check and sent details 

[juiceindia]

Please help me @KetanKumar i use theme warehouse.

www.thecocoexpress.in

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

Thanks

[KetanKumar]

@juiceindia 

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

[juiceindia]

@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]

@juiceindia 

can you please share issue images?

[juiceindia]

 @KetanKumar 

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

[juiceindia]

I need something like this 

@KetanKumar 

[KetanKumar]

@juiceindia 

yes, please confirm 

[juiceindia]

@KetanKumar Yes this should do.

[KetanKumar]

@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;
}
}

[juiceindia]

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 ok

[KetanKumar]

@juiceindia 

oh sorry for that let's have check and update

[KetanKumar]

@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;
}
}

[juiceindia]

@KetanKumar 

Sir this is not working. Same problem

[KetanKumar]

@juiceindia 

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

[chris214]

Hi @KetanKumar 

 

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]

@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.

[chris214]

www.delidia.de

[chris214]

@KetanKumar 

the Flex theme allows for custom css https://help.outofthesandbox.com/hc/en-us/articles/360022329373

[KetanKumar]

@chris214 

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

[yaseeng8]

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

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

v

[KetanKumar]

@yaseeng8 

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

[yaseeng8]

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

 

[KetanKumar]

@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;
}
}

[yaseeng8]

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]

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]

@yaseeng8 

thanks i will check and let you know 

[DRAWMORETAGS]

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]

@DRAWMORETAGS 

can you send issue images