Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi, looking to center the Quantity and the Quantity selector. Tried using css code from other forums but it was still misaligned. Thanks.
Solved! Go to the solution
This is an accepted solution.
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.product-form__input {
display: flex;
flex-direction: column;
align-items: center;
max-width: 100% !important;
}
- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify
Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
rehydrazn.com
pw: nowlow
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
div.product-form__quantity {
display: flex;
flex-direction: column;
align-items: center;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
if this not worked then share your store URL and password if any please.
so i can check and provide you possible solution for your question.
Don't know if I copied something wrong but it did nothing
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
div.product-form__quantity {
text-align: center !important;
}
div.product-form__quantity .price-per-item__container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
added the code and it was still in the same spot, am i adding something wrong?
This is an accepted solution.
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
.product-form__input {
display: flex;
flex-direction: column;
align-items: center;
max-width: 100% !important;
}
- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify
Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Worked, thank you.
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025