Shopify themes, liquid, logos, and UX
Hey guys, I want to adjust the payment buttons on mobile.
I’d like to stack them vertically:
Currently, the layout is adapted based on how I’ve set it up for the desktop, but I want to leave the desktop version as it is. On mobile, I want the buttons to be stacked vertically and almost the full width of the screen.
Here’s how it looks on my store right now:
And here’s how I want it to look:
My store URL: https://1049xn-ya.myshopify.com/
And here’s a store where it looks the way I want: https://tomnoske.store/ (check it out on mobile; the desktop version is the same as mine)
I ONLY WANT THIS ON MOBILE!
Thanks a lot,
Tim
@media (min-width: 480px){
#shopify-section-template--22711083893001__main .product-form__buttons {
display: flex !important;
flex-direction: column !important;
}
.product-form__buttons .shopify-payment-button, .product-form__buttons .product-form__submit {
width: 100% !important;
}
}
Go to Theme > Customization > Theme Setting > CSS
If its helpful , please Like & Accept as solution Thanks
Thanks for the feedback! Here's the translated version:
Hey, thanks for the feedback, but when I put it into theme settings -> custom CSS, it doesn’t work. When I click "Save," it says, "Online store session can't be published."
And when I added it to base.css, the changes applied to the desktop, but the mobile stayed the same. I want the exact opposite—I want it only on mobile, and I want the old version to remain on the desktop.
Thank you!
<style>
@media (min-width: 480px){
#shopify-section-template--22711083893001__main .product-form__buttons {
display: flex !important;
flex-direction: column !important;
}
.product-form__buttons .shopify-payment-button, .product-form__buttons .product-form__submit {
width: 100% !important;
}
}
</style>
Put these Css on theme.liquid
And if it works please accept as Solution.
Still the same, it works on desktop, but nothing on mobile.
I only want this on mobile.
Did you paste Css in media tag
@media (min-width: 480px){
Css
}
If its not work I need to login via collaborator . Allow my to fix it
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025