Re: 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
28 1 6

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
8382 1650 1662

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 to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

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 to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ManuBC
Excursionist
28 1 6

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
8382 1650 1662

Recommend you enable quantity option for that product template 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ManuBC
Excursionist
28 1 6

it work great many thanks for your time !

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Happy I could help ❤️

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

PixiePawsPets
Excursionist
23 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. 🙂