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

Solved
Shopify Partner
111 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

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
111 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

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
111 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

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
111 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

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
111 1 11

Chrome 84 on desktop and safari on mobile.

0 Likes
Highlighted

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