Shopify themes, liquid, logos, and UX
I cannot edit the alignment of the product form (quantity and button) on my product page and the product section on my homepage. I have tried applied the text-align, align-content, and align-items CSS commands but it doesn't seem to be working on this particular element. It works on all other elements in the section.
Any idea why this section might not be responding?
Site is www.eatbubs.com. You'll notice that the quantity selector is too far over to the left.
Solved! Go to the solution
This is an accepted solution.
Hello @mkrakower 👋
You can use this code
.product__quantity-atc-container {
justify-content: center;
}
.product__quantity-atc-container .add-to-cart {
min-width: initial;
flex-grow: 0;
}
The result
Hi @mkrakower
If you want the code affect to particular element of section only then please add code into Custom CSS of section
- Helpful? Like and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
@mkrakower - please add this css to the very end of your theme.css file and check
.product__quantity-wrapper, .add-to-cart {flex-basis: 50%;}
Hi @mkrakower ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file -> Save
<style>
.product__quantity-atc-container>div{
width:50% !important
}
</style>
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hello @mkrakower 👋
You can use this code
.product__quantity-atc-container {
justify-content: center;
}
.product__quantity-atc-container .add-to-cart {
min-width: initial;
flex-grow: 0;
}
The result
This one worked, thank you all!
You are welcome!
@ZenoPageBuilder @PageFly-Oliver @suyash1 @Dan-From-Ryviu Thank you all for the responses. I have tried them all with varying success. Some make an impact and some do not. I was able to get the button to align center, but not the quantity selector. See screenshot attached. Any ideas why the quantity selection is still aligned to the left side of the element?
User | RANK |
---|---|
214 | |
169 | |
65 | |
54 | |
53 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023