Shopify themes, liquid, logos, and UX
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,
Solved! Go to the solution
This is an accepted solution.
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;
}
}
}
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.
do you have like this?
Yes, that would be great!
Best regards,
This is an accepted solution.
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;
}
}
}
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,
Thanks for update
yes, you can
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
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
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?
yes, sure let me know which one do you have hide?
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.
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;}
I posted that code at the bottom of my theme.css file but it didn't seem to do anything
this code apply to hide thumbnails
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
yes, is possible to custom code can you please add me on staff so i will quick-fix mobile and desktop show hide
That would be great! how do I go about adding you to staff to edit that for me?
https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts
Great, Just need your Email Ketan, sent you a PM
Great Thanks i will check and sent details
Please help me @KetanKumar i use theme warehouse.
i want to make product image smaller on mobile product page.
Thanks
sorry for any issue have check real device it proper look if you have issue please share screenshort
@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.
can you please share issue images?
yes, please confirm
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;
}
}
Thanks, it has solved the purpose. When we click the image to zoom, a new issue arises.
I am attaching the screenshots.
oh sorry for that let's have check and update
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 possible to give theme access so i will check and update
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
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.
the Flex theme allows for custom css https://help.outofthesandbox.com/hc/en-us/articles/360022329373
do you need mobile-first screen show to add to cart button
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
oh sorry for that issue you case difficult bcz to many deta your prodct name also long product name see attachment
Please do some adjustment for resolving this issue. Ideal optimized layout also attached for reference
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;
}
}
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
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
thanks i will check and let you know
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.
can you send issue images
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024