Shopify themes, liquid, logos, and UX
Hi guys,
I want to make the default quantity in the selector to be 3 when people enter a product page.
How can I do so?
Thanks
Hi @JesusGomicare,
Please go to Actions > Edit code > Sections > main-product.liquid file, find 'quantity__input' and change code here:
Code:
{{ product.selected_or_first_available_variant.quantity_rule.min }} => 3
Hi @JesusGomicare,
Have you tried testing it?
Your means here is when user click to plus button quantity a product so instead of increase 1 you need increase 3 for each change quantity, right?
To do this you need change increment step for input field.
You can do that by modifying min value in the quantity input on your product page template liquid code. Example like in this image below (Dawn theme)
- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi Dan,
Thanks for the the help!
This works, but doesn't allow to go below 3. I want the default to be 3, but to also be able to go 1.
Any ideas on how to do so?
Please change the code to original and add this code at the bottom of your main-product.liquid file
<script>
document.addEventListener('DOMContentLoaded', function() {
var quantityInput = document.getElementById('Quantity-{{ section.id }}');
if (quantityInput) {
quantityInput.value = 3;
}
});
</script>
- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi @JesusGomicare,
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find product-info.js file
4) Add the following code in the function setQuantityBoundries
Code: (Some conditions to guarantee satisfy quantity rules if exist)
// This customize can be removed anytime
if (min < 3 && (max == null || max >= 3)) this.quantityInput.value = 3;
// end
Changes:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now I Donate Us Here!
Hi @BSSCommerce-B2B,
Thanks for your help! Sadly enough, this doesn't work.
Any ideas on how to fix it?
HI @JesusGomicare,
Your Dawn is using a different variable name for mine. You can try this code instead
// This customize can be removed anytime
if (min < 3 && (max == null || max >= 3)) this.input.value = 3;
// end
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now I Donate Us Here!
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024