The Quantity Selector On Web Looks Different Than In Customize Theme

Topic summary

  • Styling inconsistency between the live storefront and the theme customizer: the quantity selector appears differently in each, and the Add to Cart button shows the reverse styling behavior.

  • Theme: Shrine. Custom CSS applied to add a border to the quantity selector: .quantity-break { border: 1px solid #000000 !important; }.

  • Evidence provided via two comparative screenshots and a public product link for reproduction.

  • Outcome: the issue was reported as solved by the original poster, but no details on the fix or root cause were shared. The discussion appears resolved with no remaining action items or unanswered questions.

Summarized with AI on December 25. AI used: gpt-5.

First image web second image shopify. And not only the that the reverse happens with the add to cart button.

I’m suing Shrine Theme and this is the custom CSS code I used to add lines to the Quantity Selector:

.quantity-break {
border: 1px solid #000000 !important;
}

I don’t know why my shopify is super buggy but I would appreciate any help, thank you.

My website link: https://leorel.com/products/leorel-magnetic-eyelashes?_pos=1&_psq=a&_ss=e&_v=1.0

I solved it