Solved

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

Jose13
Shopify Partner
122 1 13

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

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

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>
◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 14 (14)

diego_ezfy
Shopify Partner
2935 562 883

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>

 

 

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

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
Shopify Partner
2935 562 883

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>
◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

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
Shopify Partner
2935 562 883

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

dantepw_0-1596932829207.png

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

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

capt2.JPG

diego_ezfy
Shopify Partner
2935 562 883

What is your device/browser?

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

Chrome 84 on desktop and safari on mobile.

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

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

diego_ezfy
Shopify Partner
2935 562 883

you're welcome! wishing you a good weekend 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

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?

Thanks!

diego_ezfy
Shopify Partner
2935 562 883

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>




◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Jose13
Shopify Partner
122 1 13

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