Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Bug - Add to cart button and quantity selector on same line (in Dawn)

Solved

Bug - Add to cart button and quantity selector on same line (in Dawn)

ManuBC
Excursionist
35 1 7

Hi, 

 

I wish to get the "quantity selector" and the "add to cart" button on the same line.

In this forum, I get a solution with the code below, which seemed to work at the first sight.

 

In theme.liquide, before the "</head>"

 

 

<style>
     .button--full-width {
        width: calc(100% - 150px) !important;
        margin-top: -72px;
        margin-left: 150px;
     }
</style>

 

 

but I noticed 2 bugs : 

 

  • the widget "add to cart" is destoyed (see image)
  • Product page with variant are not good (button is covering options), see image

 

Do you have proper solution to put it on a same line ?

My web site : https://www.barreclandestine.com/

Many thanks for your help !

 

Capture d’écran 2023-08-08 à 10.48.47.pngCapture d’écran 2023-08-08 à 10.48.59.pngCapture d’écran 2023-08-08 à 10.49.19.png

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10256 2038 2109

This is an accepted solution.

Please use this code instead of 

<style>
     .product-form__buttons {
        width: calc(100% - 150px) !important;
        margin-top: -72px;
        margin-left: 150px;
     }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
10256 2038 2109

This is an accepted solution.

Please use this code instead of 

<style>
     .product-form__buttons {
        width: calc(100% - 150px) !important;
        margin-top: -72px;
        margin-left: 150px;
     }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ManuBC
Excursionist
35 1 7

Many thanks Dan ! 

It looks great for the widget "add to cart" 👍

But the variant is still covering the 4 options (30€, 50€, 75€ and 100€) : 

Capture d’écran 2023-08-08 à 11.08.47.png

Dan-From-Ryviu
Shopify Partner
10256 2038 2109

Recommend you enable quantity option for that product template 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

ManuBC
Excursionist
35 1 7

it work great many thanks for your time !

Dan-From-Ryviu
Shopify Partner
10256 2038 2109

Happy I could help ❤️

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PixiePawsPets
Excursionist
24 0 0

This works amazing, Tho I am just wondering would their be a way I could exclude subscription products? as it now sits ontop of my subscription box products. - Works amazing for all other products. Thank you appeciate if you could reply. 🙂