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,
-
I want to resize main image of product on product page to fit on mobile
-
Variation images at the left side of the main product image in short size
-
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
oh sorry your all content too much longer but can you try this code add to cart button to show the first screen
- Go to Online Store->Theme->Edit code
- 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
Is this still a working solution? I´d like to have smaller product images but ONLY for the mobile version. Is there a build in solution available meanwhile?
can you please share url
Hi there I entered this code but now my carosel and image have a large gap between them how do i make them both come together whilst keeping the image size the way it is now with the code you provided?
Hello @KetanKumar !
I need help resizing my images on product page for mobile. they are too wide on mobile but i dont know where in the code to change this. Site url is https://phenotype.shop/products/akimbo for example. In mobile view width is fixed but not sure how to fix this for all products
Oh sorry for that issue
can you please try this code
- Go to Online Store->Theme->Edit code
- Asset->/style.css ->paste below code at the bottom of the file.
.product-img img {
height: 100%;
}
Result
Hi @KetanKumar may I please get help with the same issue please?
I’ve tried at least 15 pieces of code from this thread and other shopify threads but nothing worked. I would like to have the same layout that this screenshot so that when customers land on the product page they see the first image (with arrows on each side) + the product title + price + info
This is my product page: https://www.carlottalondon.com/products/birthday-hair-claw-clip-red
Thank you very much in advance!