How to move Shop pay button under add to cart

[pman1]

Hello, I’m wanting to move the Shop pay button under my add to cart button on the product page. How would I do that? This is turbo theme by the way.

Thanks!
Store Link: https://bluelandoutdoor.com

[niraj_patel]

@pman1

Hello,

Please add the below code above in theme.liquid.

layout >> theme.liquid

.shopify-cleanslate { display: none!important; }

after that,

[juansmartdev]

Hi, @pman1 .

For this you need to make some changes in your style.css theme file and paste the following:

You have two visual options here:

For this one you can paste the following code:

.shopify-payment-button div {
    height: auto;   
}

Or for this one you can paste the following:

.shopify-payment-button div {
    height: auto;
    
}

.shopify-payment-button {
    margin-left: 0 !important;
    margin-top: 10px;
    max-width: 100% !important;
}

.purchase-details__spb--true {
 flex-direction: column;   
}

.purchase-details__spb--true button {
    max-width: 100% !important;
}

To add this to your style file, do the following

1. Go to Online Store → Theme → Edit code
2. Asset → /style**.css** → paste below code at the bottom of the file.

[pman1]

I was hoping to have it directly under the add to cart button not to the side of it.

[juansmartdev]

@pman1 Paste the following:

.shopify-payment-button div {
    height: auto;
    
}

.shopify-payment-button {
    margin-left: 0 !important;
    margin-top: 10px;
    max-width: 100% !important;
}

.purchase-details__spb--true {
 flex-direction: column;   
}

.purchase-details__spb--true button {
    max-width: 100% !important;
}

To add this to your style file

1. Go to Online Store → Theme → Edit code
2. Asset → /style**.css** → paste below code at the bottom of the file.

[niraj_patel]

@pman1

please paste this codeabove

layout >> theme.liquid

.purchase-details__buttons.purchase-details__spb--true { flex-direction: column; gap: 10px; } .shopify-payment-button { margin: 0!important; }

after that