How to adjust payment buttons on MOBILE

Store Design
, , , , , , , , ,
1

Hey guys, I want to adjust the payment buttons on mobile.

I’d like to stack them vertically:

  • On top: “Add to cart”
  • Below that: “Pay with PayPal”
  • And below that: “More payment options”

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:

CreatorTim_0-1736004469784.png
CreatorTim_0-1736004469784.png406×729 115 KB

And here’s how I want it to look:

IMG_8191.PNG
IMG_8191.PNG1170×2532 275 KB

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

2

@CreatorTim

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

}

Hasan112_0-1736007842443.png
Hasan112_0-1736007842443.png1020×864 97.5 KB

Go to Theme > Customization > Theme Setting > CSS

Hasan112_1-1736007865594.png
Hasan112_1-1736007865594.png473×669 32 KB

If its helpful , please Like & Accept as solution Thanks

3

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!

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

Put these Css on theme.liquid

And if it works please accept as Solution.

5

Still the same, it works on desktop, but nothing on mobile.

I only want this on mobile.

6

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