Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
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>
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.
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>
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.
can you send a screenshot, please? This is how it's on my side:
Sure! How weird it looks nice on your side! Here's mine. It's just a tiny bit:
What is your device/browser?
Chrome 84 on desktop and safari on mobile.
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
Thanks a lot! I'll look into that. Still, it looks pretty awesome as it is now, thks!
you're welcome! wishing you a good weekend
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!
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>
Great! How can I leave a similar gap between the buttons as in the variant example?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024