Shopify themes, liquid, logos, and UX
Hi,
I'm wondering if anyone could share any insight as to how I can implement quantity buttons as per the below link?
https://podcompany.com/en-gb/products/the-ice-pod?variant=43835076870310
I am offering quantity-based discounts reaching maximum discount at 4 units so this would be perfect for my needs.
Thanks in advance
Solved! Go to the solution
This is an accepted solution.
Hi @Thermon92,
Please follow the steps below:
- Step 1: Go to main-product.liquid file, find 'quantity-input' and replace code here:
=>
Code:
<quantity-checkbox class="quantity_buttons" data-section-id="Quantity-{{ section.id }}" data-form-id="{{ product_form_id }}">
<div class="quantity_button qty-selected" data-btn-index="1">
<span class="qty_btn_value">1</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" min="1" id="Quantity-{{ section.id }}" value="1" form="{{ product_form_id }}">
</div>
<div class="quantity_button" data-btn-index="2">
<span class="qty_btn_value">2</span>
<span class="qty_btn_saveText">Save 10%</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="2" value="2" form="">
</div>
<div class="quantity_button" data-btn-index="3">
<span class="qty_btn_value">3</span>
<span class="qty_btn_saveText">Save 15%</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="3" value="3" form="">
</div>
<div class="quantity_button" data-btn-index="4">
<span class="qty_btn_value">4</span>
<span class="qty_btn_saveText">Save 17%</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="4" value="4" form="">
</div>
</quantity-checkbox>
- Step 2: Go to section-main-product.css file and paste this at the bottom of the file:
.quantity_button {
position: relative;
width: 70px;
height: 70px;
background: #efefef;
margin-right: 10px;
border-radius: 10px;
cursor: pointer;
}
.quantity_button.qty-selected{
background: #000;
}
.quantity_buttons {
display: flex;
}
.qty_btn_value {
color: #000;
display: block;
line-height: 70px;
text-align: center;
font-size: 24px !important;
pointer-events: none;
}
.qty-selected .qty_btn_value {
color: #fff;
}
.qty_btn_saveText {
text-align: center;
position: absolute;
bottom: 3px;
font-size: 10px;
font-weight: 900;
width: 100%;
pointer-events: none;
}
.qty-selected .qty_btn_saveText{
color: #fff;
}
- Step 3: Go to global.js file and paste this at the bottom of the file:
class QuantityCheckbox extends HTMLElement {
constructor() {
super();
this.button = this.querySelectorAll('[data-btn-index]');
this.id = this.dataset.sectionId;
this.idForm = this.dataset.formId;
if (!this.button ) return;
this.button.forEach(
(button) => button.addEventListener('click', this.onButtonClick.bind(this))
);
}
onButtonClick(event) {
event.preventDefault();
this.button.forEach((button) => {
button.classList.remove('qty-selected');
button.querySelector('.quantity__input').setAttribute('id', '');
button.querySelector('.quantity__input').setAttribute('form', '');
});
event.target.classList.add('qty-selected');
event.target.querySelector('.quantity__input').setAttribute('id', this.id);
event.target.querySelector('.quantity__input').setAttribute('form', this.idForm);
}
}
customElements.define('quantity-checkbox', QuantityCheckbox);
Hope it helps!
Hi @Thermon92,
What theme are you using? Please send me the theme name, I can guide it for you.
Hi, that would be hugely appreciated, I am using Dawn 8.0
This is an accepted solution.
Hi @Thermon92,
Please follow the steps below:
- Step 1: Go to main-product.liquid file, find 'quantity-input' and replace code here:
=>
Code:
<quantity-checkbox class="quantity_buttons" data-section-id="Quantity-{{ section.id }}" data-form-id="{{ product_form_id }}">
<div class="quantity_button qty-selected" data-btn-index="1">
<span class="qty_btn_value">1</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" min="1" id="Quantity-{{ section.id }}" value="1" form="{{ product_form_id }}">
</div>
<div class="quantity_button" data-btn-index="2">
<span class="qty_btn_value">2</span>
<span class="qty_btn_saveText">Save 10%</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="2" value="2" form="">
</div>
<div class="quantity_button" data-btn-index="3">
<span class="qty_btn_value">3</span>
<span class="qty_btn_saveText">Save 15%</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="3" value="3" form="">
</div>
<div class="quantity_button" data-btn-index="4">
<span class="qty_btn_value">4</span>
<span class="qty_btn_saveText">Save 17%</span>
<input class="quantity__input visually-hidden" type="number" name="quantity" id="" min="4" value="4" form="">
</div>
</quantity-checkbox>
- Step 2: Go to section-main-product.css file and paste this at the bottom of the file:
.quantity_button {
position: relative;
width: 70px;
height: 70px;
background: #efefef;
margin-right: 10px;
border-radius: 10px;
cursor: pointer;
}
.quantity_button.qty-selected{
background: #000;
}
.quantity_buttons {
display: flex;
}
.qty_btn_value {
color: #000;
display: block;
line-height: 70px;
text-align: center;
font-size: 24px !important;
pointer-events: none;
}
.qty-selected .qty_btn_value {
color: #fff;
}
.qty_btn_saveText {
text-align: center;
position: absolute;
bottom: 3px;
font-size: 10px;
font-weight: 900;
width: 100%;
pointer-events: none;
}
.qty-selected .qty_btn_saveText{
color: #fff;
}
- Step 3: Go to global.js file and paste this at the bottom of the file:
class QuantityCheckbox extends HTMLElement {
constructor() {
super();
this.button = this.querySelectorAll('[data-btn-index]');
this.id = this.dataset.sectionId;
this.idForm = this.dataset.formId;
if (!this.button ) return;
this.button.forEach(
(button) => button.addEventListener('click', this.onButtonClick.bind(this))
);
}
onButtonClick(event) {
event.preventDefault();
this.button.forEach((button) => {
button.classList.remove('qty-selected');
button.querySelector('.quantity__input').setAttribute('id', '');
button.querySelector('.quantity__input').setAttribute('form', '');
});
event.target.classList.add('qty-selected');
event.target.querySelector('.quantity__input').setAttribute('id', this.id);
event.target.querySelector('.quantity__input').setAttribute('form', this.idForm);
}
}
customElements.define('quantity-checkbox', QuantityCheckbox);
Hope it helps!
That works perfectly you absolute legend!
Hi @Thermon92,
If you have any further questions, you can contact me.
Happy to help you.
followed your steps and it works great! now is it possible to make the price update according to the button? I have "6 pack", "12 pack", and "24 pack" buttons, can the price on the top change with the button selected including the discount related to each button?
my website - https://cestlave.com/products/cest-la-ve-italian-charcuterie-pack-italian-style-deli-mozzarella-chee...
Hi @JosephC1,
I sent you a private message, you can check it
Thanks so much for the code! Works like a charm.
Its possible to update the product on page price with the total: Price * Quantity when every quantity_button its clicked?
Hi @Omguan,
It will be a more complicated request, because it needs to test with product variants, so it will be difficult for me to guide you in detail for it.
If you want to do it, you need to hire experts for it or send me a collaborator invitation, I will help you check everything.
I am trying to send you a private message but seems that I can't.
Hi @Omguan,
Can you resend it? Or I will send you a private message
Please send me a private message, seems that I am not allowed
Hello @namphan
Thank you very much, the code works perfectly and it’s very light in code.
I have only 1 and 2 as quantity (unit and pair). Can you please tell me what code lines I need to add to your javascript functions to make the price updating as well?
thank you very much for your help!
Hi @zied_drira,
It will be a complicated request and will require many steps to change it, so I cannot guide you in detail for it.
If you want, you can send me a private message about the site link and information, I will check it
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024