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

Solved
Highlighted
Shopify Partner
109 1 11

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

0 Likes
Highlighted
Astronaut
1084 178 213

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>

 

 

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Shopify Partner
109 1 11

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.

0 Likes
Highlighted
Astronaut
1084 178 213

This is an 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>
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Shopify Partner
109 1 11

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.

0 Likes
Highlighted
Astronaut
1084 178 213

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

dantepw_0-1596932829207.png

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
109 1 11

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

capt2.JPG

0 Likes
Highlighted
Astronaut
1084 178 213

What is your device/browser?

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Shopify Partner
109 1 11

Chrome 84 on desktop and safari on mobile.

0 Likes
Highlighted
Astronaut
1084 178 213

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like