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.
4

@Claud123

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media (max-width: 749px){
    .ProductForm__QuantitySelector{
    display: flex;
    align-items: center;
    justify-content: center;
}
}

Thanks!

1 Like