How can I center the product quantity selector in the motion theme?

Store Design

Topic summary

Center the product quantity selector in the Motion theme using CSS.

  • Recommended approaches:

    • Apply text-align: center to the element wrapping the quantity control (identify the correct selector first).
    • Use Flexbox: set display: flex and justify-content: center on the container to align the selector horizontally.

  • Implementation path:

    • In Shopify admin: Online Store → Themes → Actions → Edit code.
    • Add a CSS rule in the theme stylesheet (e.g., theme.css/theme.scss). An example provided targets .cart__item–qty with: display: flex !important; justify-content: center !important.

  • Notes:

    • CSS (Cascading Style Sheets) controls visual layout; text-align centers inline content, while justify-content centers items inside a flex container.
    • One helper offered to provide exact code if the store URL is shared.

  • Status:

    • No confirmation from the original poster; solution acceptance unresolved.
Summarized with AI on November 25. AI used: gpt-5.
1

Hi there,

I am trying to center my product quantity selector on my product page in motion theme.

Can someone please show me what code to write and where to write it?

Thanks in advance!

2

hi @VIVIFICAAU .,

For solve the case, you can use css, you need to detected to the element you need make centered, then use the element{ text-align: center } attribute for that.

3

Hi @VIVIFICAAU .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can use “text-align: center;” or “justify-content: center;”, or can you give me store url to I can send you the correct code.

Hope this answer helps.

Best regards,

Richard | PageFly

4

@VIVIFICAAU
You can go to Online store => themes => actions => edit code and add this code on file theme.css

.cart__item--qty{
display: flex !important;
justify-content: center !important;
}