Re: add to cart button next to the buy now button

add to cart button next to the buy now button

Dalila2
Tourist
28 0 2

I could use your help please. I would like to put the add to cart button next to the dynamic payment button. Like that:

suyash1_0-1701102796591.png

 

I tried this code in theme.liquid: 

<style>
    .button--full-width {
      width: calc(100% - 150px) !important;
      margin-top: -72px;
      margin-left: 150px;
    }
    </style>

Capture d’écran 2024-01-16 à 10.07.04.png

but it gives me that.It also moves the button to choose options for complementary products from the “seach and control” application.Capture d’écran 2024-01-18 à 15.52.00.png  Normally it's like this Capture d’écran 2024-01-18 à 15.54.34.png

 

 

I have a second question. I would like to put the "guide des tailles" pop up next to the quantity selector, what can I do?

 

https://www.peelou.fr/products/pack-peelou

Replies 8 (8)

PageFly-Henry
Shopify Partner
1184 335 283

Hi @Dalila2 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

.product-form__buttons {

    display: flex !important;

    align-items: flex-start !important;

    max-width: 50rem !important;

}

.shopify-payment-button {

    width: 50rem !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dalila2
Tourist
28 0 2

@PageFly-Henry 

Great they are aligned thank you, on the other hand they are glued

Capture d’écran 2024-01-18 à 16.20.27.png

PageFly-Henry
Shopify Partner
1184 335 283

You can try again with this code:

.product-form__buttons {
display: flex !important;
align-items: flex-start !important;
max-width: 50rem !important;

}
.shopify-payment-button {
width: 50rem !important;
margin-left: 10px !important
}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dalila2
Tourist
28 0 2

@PageFly-Henry 

Capture d’écran 2024-01-19 à 13.45.58.png

Great thanks a lot.

 

Do you have a solution to put the “guide des tailles” pop-up next to the quantity selector?

Capture d’écran 2024-01-19 à 13.49.31.png

ThePrimeWeb
Shopify Partner
2138 615 494

Hey @Dalila2,

Can you try adding this

.shopify-payment-button__more-options {
    position: absolute;
    left: 0;
}

.product-form__buttons {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

button#ProductSubmitButton-template--20581406081373__main {
    width: auto;
}



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Dalila2
Tourist
28 0 2

@ThePrimeWeb 

Thank you very much. This solution could work but the buttons are not the same size

Capture d’écran 2024-01-18 à 16.24.10.png

ThePrimeWeb
Shopify Partner
2138 615 494

@Dalila2 Try this, maybe because the paypal button loads later the first one might have had some issues

 

.shopify-payment-button__more-options {
    position: absolute;
    left: 0;
}

.product-form__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

 

 

When I do editing after the page has loaded it looks to me like this, 

ThePrimeWeb_0-1705592057902.png

 



Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Dalila2
Tourist
28 0 2

@ThePrimeWeb 

 

Capture d’écran 2024-01-19 à 13.44.54.png

Great thanks a lot.

 

Do you have a solution to put the “guide des tailles” pop-up next to the quantity selector?

Capture d’écran 2024-01-19 à 13.51.57.png