How to stack payment buttons vertically on MOBILE

Store Design
, , , , , , , , , ,

Topic summary

A user wanted to reorganize payment buttons on mobile product pages to stack vertically in this order:

  • “Add to cart” (top)
  • “Pay with PayPal” (middle)
  • “More payment options” (bottom)

The buttons needed to be nearly full-width on mobile while keeping the desktop layout unchanged.

Solution provided:

Add custom CSS code to the theme’s Custom CSS section (Theme settings):

@media (max-width: 768px) {
  .product-form__buttons {
    flex-direction: column !important;
  }
  .product-form__buttons .shopify-payment-button,
  .product-form__buttons .product-form__submit {
    width: 100% !important;
  }
}

This CSS uses a media query to target mobile devices only, changing the button container to stack vertically and making buttons full-width.

Status: Resolved - the solution worked successfully.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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-1736100612643.png
CreatorTim_0-1736100612643.png223×400 58.1 KB

And here’s how I want it to look:

CreatorTim_1-1736100612432.png
CreatorTim_1-1736100612432.png185×400 37.3 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

Hi @CreatorTim
I hope this answer will be helpful to you.

Please follow the following instructions:

  1. Go to Shopify > Theme > Customize: https://prnt.sc/Lc3MCyXpW8zw
  2. Copy and paste this code on Theme settings > Custom CSS section: https://prnt.sc/pmYP1ElPwdh7
@media (max-width: 768px) {
.product-form__buttons {
    flex-direction: column !important;
}
.product-form__buttons .shopify-payment-button, .product-form__buttons .product-form__submit {
    width: 100% !important;
}
}

Here is the result.

LizHoang_1-1736171120286.png
LizHoang_1-1736171120286.png353×629 69.9 KB

Best,
Liz - Avada Support Team.

1 Like
3

Thank you! WORKS