How can I align the checkout and PayPal buttons on my product page?

Store Design
, ,

Topic summary

A user seeks help aligning checkout and PayPal buttons on their product page, sharing screenshots showing misalignment issues.

Solutions Provided:

Multiple community members offered CSS code fixes:

  • First solution: Add CSS to base.css targeting .btn--secondary with margin: 0 !important and adjusting .paypal-product-spacing and button widths

  • Second solution: Insert CSS code in theme.liquid above </body> tag, modifying product-form flex-wrap, button max-width (250px), margins, and padding

Outcome:

The original poster confirmed the first CSS solution worked successfully. The discussion appears resolved, though additional CSS refinements were offered by other contributors.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Good day!

just want to ask how can i edit the alignment of of check out button (product page)

Pedz23_0-1674137478611.png

also in this image the Paypal button is not aligned with add to cart button (cart page)

Pedz23_1-1674137531094.png
Pedz23_1-1674137531094.png386×156 3.79 KB

TIA. www.bizsupplystore.com
PW: adm!n321

2

hallo @Pedz23

Add this css at base.css at bottom

**.btn--secondary {**
**margin: 0 !important;**
**}**
**.paypal-product-spacing {**
**margin-left: 18.5% !important;**
**}**
**button#AddToCart-product-template {**
**max-width: 248px !important;**
**}**
3

It worked! thank you

4

Hi, Pedz23

I checked your site.

You must edit the css code.

If you want, I can fix your site’s issues.

Please contact me.

Thanks.

5

@Pedz23

Hello,

Please add this code above in theme.liquid

layout >> theme.liquid

form.product-form.product-form-product-template { flex-wrap: nowrap!important; } .product-form__item.product-form__item--submit { max-width: 250px!important; } button#AddToCart-product-template{ padding: 10px 0!important; } form.product-form .paypal-product-spacing{ margin-left: 20px!important; margin-bottom: -10px!important; margin-top: 0!important; } .btn--secondary { margin: 0!important; }