I can't seem to place my 'add to cart button' inline with 'buy now' on product page. Debut Theme

[Jose13]

Hey! So I'm costumizing my buttons on product page but I can't seem to move the ATC button (Agregar al carrito) to be inline with the Buy Now (Comprar ahora) button. I tried using flex, on my theme.css file but I can't seem to achieve this. The goal is to have them inline in desktop and one below the other full width on mobile. Here's a link: https://0ettoj4zylb8imbe-7442563129.shopifypreview.com

[diego_ezfy]

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.product-form__item--payment-button{
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

.product-form__item--payment-button [data-shopify="payment-button"]{
    display: block !important;
    padding-right: 10px !important;
}
.product-form__item--payment-button [id*='AddToCart']{
    margin-top: 0 !important;
   
}

.product-form__item--payment-button button[aria-disabled="true"]{
    display: none !important;
}

@media (max-width: 600px){
    .product-form__item--payment-button{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
}
</style>

[Jose13]

This looks great! If I'd like to have them also inline on smartphones? I know I must add some media-query lines, but not sure! I'm just starting to learn CSS! Thanks a lot, I appreciate your help.

[diego_ezfy · Accepted solution]

Sure, use this code instead:

<style>
.product-form__item--payment-button{
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

.product-form__item--payment-button [data-shopify="payment-button"]{
    display: block !important;
    padding-right: 10px !important;
}
.product-form__item--payment-button [id*='AddToCart']{
    margin-top: 0 !important;
   
}

.product-form__item--payment-button button[aria-disabled="true"]{
    display: none !important;
}

</style>

[Jose13]

It works but it seems on mobile the ATC buttons shifts a couple of pixels down, not sure which part is causing that. Other than that, it works like a charm.

[diego_ezfy]

can you send a screenshot, please? This is how it's on my side:

[Jose13]

Sure! How weird it looks nice on your side! Here's mine. It's just a tiny bit:

[diego_ezfy]

What is your device/browser?

[Jose13]

Chrome 84 on desktop and safari on mobile.

[diego_ezfy]

Oh, yeah, Safari ought to look different, especially if it's not one of the latest iPhones.

To fix this issue specifically for Safari would be a bit trickier, it'd require creating a media query for Safari only and then re-align it using position:relative; and top

[Jose13]

Thanks a lot! I'll look into that. Still, it looks pretty awesome as it is now, thks!

[diego_ezfy]

you're welcome! wishing you a good weekend 

[Jose13]

Hey! Just noticed that it doesn't work properly in products with no variants! I tried adding the same styles to the following class with no luck!

.product-form--payment-button-no-variants {

Would you happen to know a solution?

• Example 1:  product with variants (working properly)
• Example 2: product with no variants (not working properly)

Thanks!

[diego_ezfy]

Hello,

Repeat the same step I mentioned in this previous answer and this code as well. Don't forget to leave the previous one intact:

<style>
[id] .product-form__item--payment-button.product-form__item--no-variants{
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: center !important;
}

.product-form__item--payment-button.product-form__item--no-variants > *{
    max-width: 50% !important;
    width: 100% !important;
    padding: 0 !important;
    max-height: 50px !important;
}

[id] .product-form__item--payment-button.product-form__item--no-variants button{
    margin: 0 !important;
}
</style>

[Jose13]

Great! How can I leave a similar gap between the buttons as in the variant example?