Broken Quantity selector

Solved
Excursionist
22 2 0

Hi there,

 

I rearranged a couple of things on our product page and seem to have broken the Quantity selector in the process. Why has the '+' moved so far to the right? Can somebody help?

 

https://juvalicious.com/collections/smoothie-kits/products/4-berry-blend

 

Screen Shot 2019-04-08 at 9.58.15 AM.png

0 Likes
Shopify Partner
457 78 90

Something was changed in your html, or in css.

I can see several '</br>' tags in quantity div, which I am not sure that there should be.

Anyway, as quick solutions and solutions which is possible to suggest via this forum is the following.

Go into Edit code, search for theme.scss.liquid or theme.css file, scroll at the very bottom and add the following code there

#quantity-selector-product-template{
  width: 149px;
}
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Excursionist
22 2 0

Hi there, thank you. I reverted to a previous version to try again starting from the version that still looked good... and also added the code you mentioned, but unfortunately it's still the same result. Unless there are any other ideas, I might have to get some help from the support. Thanks!


0 Likes
Shopify Partner
457 78 90

I am looking at it, it look fine now, I guess you have reverted back ?

It now has some styles which weren't when it was broken.

What kind of changes you did there ?

Qi6prsA

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Excursionist
22 2 0

Yes, I reverted to before. What I wanted to do originally, was to change the order of things on the page:

I wanted to display the Quantity selector first, then the "Add to cart" button, and then the price. 

Some of our product also have add ons, and those show up in a random place above the price, which is what I was trying to fix by changing the overall structure. But basically, if I change the order of anything in the product-template code, the Quantity selector always breaks.

0 Likes
Shopify Partner
457 78 90

so you want to get this look ?

2tXv79l

 

at first to move the ATC button below the qty section add the following styles into theme.scss

 

#quantity-selector-product-template + .form__column{
clear: both;
}


then in html of product template, move this whole form__row under price tags, make sure you are not breaking the markup, because you can damage it and make it messy

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes

Success.

Excursionist
22 2 0

Found a different solution, thanks!

0 Likes