How can I center the quantity selector on my product page?

Store Design

Topic summary

A user seeks help centering the quantity selector on their Shopify product page. Multiple respondents provide similar CSS solutions:

Proposed Fix:

  • Navigate to: Online Store > Themes > Actions > Edit Code
  • Locate Asset > theme.css
  • Add CSS code at the bottom targeting .ProductForm__QuantitySelector with:
    • display: flex
    • align-items: center
    • justify-content: center
    • Applied within a media query @media (max-width: 749px) or (max-width: 1007px)

Current Status:
One user reports the solution works on mobile devices but not on desktop, indicating the issue remains partially unresolved. The discussion is ongoing, with the original poster yet to confirm if desktop centering has been addressed.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
3

Hi @Claud123 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 1007px) {
.ProductForm__QuantitySelector {
    display: flex;
    justify-content: center;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like