Today, I’ll show you how to add a section block for a quantity selector with discounts in your Shopify store—without using an app. It’s a simple process, and I’ll provide all the code you need. Just copy and paste it, no advanced coding required! This feature helps boost sales by encouraging bulk purchases. Follow along, and let’s get started!
Step 1: Update main-product.liquid
In the main-product.liquid file, search for:
{%- when 'quantity_selector' -%}Add paste the following code above it:
{%- when 'bulk_quantity_picker' -%}
{% render 'bulk-quantity-picker', block: block, section: section %}In the main-product.liquid file, search for:
{
"type": "quantity_selector",
"name": "t:sections.main-product.blocks.quantity_selector.name",
"limit": 1
},And add the following code below it:
{
"type": "bulk_quantity_picker",
"name": "Bulk Quantity Picker",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Product and Collection Selection"
},
{
"type": "checkbox",
"id": "show_on_all_products",
"label": "Show On All Products",
"default": true
},
{
"type": "product",
"id": "selected_product",
"label": "Select Product",
"info": "Choose a specific product for which this block should be displayed."
},
{
"type": "collection",
"id": "selected_collection",
"label": "Select Collection",
"info": "Choose a collection for which this block should be displayed on all its products."
},
{
"type": "header",
"content": "Pack Option 1"
},
{
"type": "text",
"id": "pack_1_label",
"label": "Pack 1 Label",
"default": "1 Piece"
},
{
"type": "number",
"id": "pack_1_quantity",
"label": "Pack 1 Quantity",
"default": 1
},
{
"type": "range",
"id": "pack_1_discount",
"label": "Pack 1 Discount",
"default": 0,
"min": 0,
"max": 100
},
{
"type": "checkbox",
"id": "pack_1_badge",
"label": "Show Badge on Pack 1",
"default": false
},
{
"type": "text",
"id": "pack_1_badge_text",
"label": "Pack 1 Badge Text",
"default": "High in Demand"
},
{
"type": "header",
"content": "Pack Option 2"
},
{
"type": "text",
"id": "pack_2_label",
"label": "Pack 2 Label",
"default": "3 Piece Bundle"
},
{
"type": "number",
"id": "pack_2_quantity",
"label": "Pack 2 Quantity",
"default": 3
},
{
"type": "range",
"id": "pack_2_discount",
"label": "Pack 2 Discount",
"default": 10,
"min": 0,
"max": 100
},
{
"type": "checkbox",
"id": "pack_2_badge",
"label": "Show Badge on Pack 2",
"default": true
},
{
"type": "text",
"id": "pack_2_badge_text",
"label": "Pack 2 Badge Text",
"default": "High in Demand"
},
{
"type": "header",
"content": "Pack Option 3"
},
{
"type": "text",
"id": "pack_3_label",
"label": "Pack 3 Label",
"default": "5 Piece Bundle"
},
{
"type": "number",
"id": "pack_3_quantity",
"label": "Pack 3 Quantity",
"default": 5
},
{
"type": "range",
"id": "pack_3_discount",
"label": "Pack 3 Discount",
"default": 20,
"min": 0,
"max": 100
},
{
"type": "checkbox",
"id": "pack_3_badge",
"label": "Show Badge on Pack 3",
"default": false
},
{
"type": "text",
"id": "pack_3_badge_text",
"label": "Pack 3 Badge Text",
"default": "High in Demand"
},
{
"type": "header",
"content": "Display Settings"
},
{
"type": "checkbox",
"id": "show_quantity_title",
"label": "Show Quantity Title",
"default": true
},
{
"type": "text",
"id": "quantity_title_text",
"label": "Quantity Title Text",
"default": "Choose Quantity"
},
{
"type": "text",
"id": "unit_label",
"label": "Unit Label",
"default": "Piece"
},
{
"type": "checkbox",
"id": "show_original_price",
"label": "Show Original Price",
"default": true
},
{
"type": "checkbox",
"id": "show_pack_price",
"label": "Show Pack Price",
"default": true
},
{
"type": "checkbox",
"id": "show_unit_price",
"label": "Show Unit Price",
"default": true
},
{
"type": "checkbox",
"id": "show_discount_tag",
"label": "Show Discount Tags",
"default": true
},
{
"type": "checkbox",
"id": "show_zero_discount",
"label": "Show Zero Discount Tag",
"default": true
},
{
"type": "header",
"content": "Style Settings"
},
{
"type": "range",
"id": "corner_radius",
"label": "Corner Radius",
"default": 0.5,
"min": 0,
"max": 2,
"step": 0.1,
"unit": "rem"
},
{
"type": "range",
"id": "pack_spacing",
"label": "Pack Bottom Spacing",
"default": 2.5,
"min": 1,
"max": 5,
"step": 0.1,
"unit": "rem"
},
{
"type": "range",
"id": "title_size",
"label": "Title Size",
"default": 1.7,
"min": 1,
"max": 3,
"step": 0.1,
"unit": "rem"
},
{
"type": "range",
"id": "original_price_size",
"label": "Original Price Size",
"default": 1.3,
"min": 0.5,
"max": 2,
"step": 0.1,
"unit": "rem"
},
{
"type": "range",
"id": "price_size",
"label": "Price Size",
"default": 1.5,
"min": 0.5,
"max": 2,
"step": 0.1,
"unit": "rem"
},
{
"type": "range",
"id": "unit_price_size",
"label": "Unit Price Size",
"default": 1.0,
"min": 0.5,
"max": 2,
"step": 0.1,
"unit": "rem"
},
{
"type": "color",
"id": "inactive_text",
"label": "Inactive Text Color",
"default": "#121212"
},
{
"type": "color",
"id": "active_text",
"label": "Active Text Color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "active_bg",
"label": "Active Background",
"default": "#ACA7A7"
},
{
"type": "color",
"id": "discount_text",
"label": "Discount Text Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "discount_size",
"label": "Discount Text Size",
"default": 1.1,
"min": 0.5,
"max": 1.5,
"step": 0.1,
"unit": "rem"
},
{
"type": "color",
"id": "discount_bg",
"label": "Discount Background",
"default": "#1877F2"
},
{
"type": "color",
"id": "badge_bg",
"label": "Badge Background",
"default": "#EAAE16"
},
{
"type": "range",
"id": "badge_size",
"label": "Badge Size",
"default": 1.0,
"min": 0.5,
"max": 2,
"step": 0.1,
"unit": "rem"
},
{
"type": "color",
"id": "badge_text",
"label": "Badge Text Color",
"default": "#ffffff"
}
]
},Step 2: Create A New Snippet File
Create a new snippet file named bulk-quantity-picker.liquid. Now, paste the following code into this file.
{% comment %}
Condition to check if the current product or collection matches the selected product or collection
{% endcomment %}
{% for collection in product.collections %}
{% assign currect_collection = collection.id %}
{% endfor %}
{% assign selected_product = block.settings.selected_product %}
{% assign selected_collection = block.settings.selected_collection %}
{% assign all_products_true = block.settings.show_on_all_products %}
{% if selected_product != blank or selected_collection != blank or all_products_true != blank %}
{% assign show_block = false %}
{% comment %}
Check if the current product matches the selected product
{% endcomment %}
{% if selected_product != blank and product.id == selected_product.id %}
{% assign show_block = true %}
{% endif %}
{% comment %}
Check if the current collection matches the selected collection
{% endcomment %}
{% if selected_collection != blank and currect_collection == selected_collection.id %}
{% assign show_block = true %}
{% endif %}
{% comment %}
Check if all products is selected
{% endcomment %}
{% if all_products_true %}
{% assign show_block = true %}
{% endif %}
{% if show_block %}
{% assign product_form_id = 'product-form-' | append: section.id %}
{% assign base_price = product.selected_or_first_available_variant.price %}
<div class="bulk-quantity-picker" {{ block.shopify_attributes }}>
<style>
.pack-options {
--active-bg: {{ block.settings.active_bg }};
--discount-text: {{ block.settings.discount_text }};
--discount-bg: {{ block.settings.discount_bg }};
--corner-radius: {{ block.settings.corner_radius }}rem;
--pack-spacing: {{ block.settings.pack_spacing }}rem;
--original-price-size: {{ block.settings.original_price_size }}rem;
--price-size: {{ block.settings.price_size }}rem;
--unit-price-size: {{ block.settings.unit_price_size }}rem;
--title-size: {{ block.settings.title_size }}rem;
--inactive-text: {{ block.settings.inactive_text }};
--active-text: {{ block.settings.active_text }};
--discount-size: {{ block.settings.discount_size }}rem;
--badge-bg: {{ block.settings.badge_bg }};
--badge-size: {{ block.settings.badge_size }}rem;
--badge-text: {{ block.settings.badge_text }};
}
.bulk-quantity-picker {
margin: 1em 0;
}
.pack-options {
display: flex;
gap: 1em;
margin-top: 0.7rem;
flex-wrap: wrap;
align-items: stretch;
}
.pack-wrapper {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.pack-option {
cursor: pointer;
border: 1px solid #ccc;
padding: 0.5em;
text-align: center;
transition: all 0.3s;
background: #fff;
color: var(--inactive-text);
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: var(--corner-radius);
position: relative;
padding-bottom: var(--pack-spacing);
overflow: hidden;
width: 100%;
}
.pack-option--selected {
background: var(--active-bg);
color: var(--active-text);
}
.pack-option:hover {
border-color: #000;
}
.pack-badge {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -80%);
background: var(--badge-bg);
color: var(--badge-text);
font-size: var(--badge-size);
font-weight: bold;
text-align: center;
white-space: nowrap;
padding: 0.1em 0.5em;
border-radius: var(--corner-radius);
z-index: 2;
}
.pack-title {
font-weight: 600;
margin-bottom: 0.5em;
font-size: var(--title-size);
}
.pack-pricing {
margin: 0.5em 0;
}
.pack-original-price {
color: inherit;
opacity: 0.75;
text-decoration: line-through;
display: block;
margin-bottom: 0.25em;
font-size: var(--original-price-size);
}
.pack-final-price {
font-weight: bold;
margin-bottom: 0.25em;
font-size: var(--price-size);
}
.pack-unit-price {
font-size: var(--unit-price-size);
color: inherit;
opacity: 0.75;
margin-bottom: 0.5em;
}
.pack-discount {
position: absolute;
bottom: -0.25px;
left: -1px;
width: calc(100% + 2px);
box-sizing: border-box;
text-align: center;
padding: 0.5em;
background: var(--discount-bg);
color: var(--discount-text);
font-size: var(--discount-size);
font-weight: bold;
transform: translateZ(0);
will-change: transform;
}
</style>
<input type="hidden" name="quantity" id="Quantity-{{ section.id }}" value="1" form="{{ product_form_id }}">
{% assign unit_label = block.settings.unit_label %}
{% assign show_zero_discount = block.settings.show_zero_discount %}
{% assign show_discount_tag = block.settings.show_discount_tag %}
{% assign show_original_price = block.settings.show_original_price %}
{% assign show_unit_price = block.settings.show_unit_price %}
{% assign show_pack_price = block.settings.show_pack_price %}
{% assign show_quantity_title = block.settings.show_quantity_title %}
{% assign quantity_title_text = block.settings.quantity_title_text %}
{% if show_quantity_title %}
<legend class="form__label">{{ quantity_title_text }}</legend>
{% endif %}
<div class="pack-options" data-quantity-input-id="Quantity-{{ section.id }}">
{% assign pack_numbers = '1,2,3' | split: ',' %}
{% for i in pack_numbers %}
{% assign label_key = 'pack_' | append: i | append: '_label' %}
{% assign quantity_key = 'pack_' | append: i | append: '_quantity' %}
{% assign discount_key = 'pack_' | append: i | append: '_discount' %}
{% assign badge_key = 'pack_' | append: i | append: '_badge' %}
{% assign badge_text_key = 'pack_' | append: i | append: '_badge_text' %}
{% assign label = block.settings[label_key] %}
{% assign quantity = block.settings[quantity_key] | plus: 0 %}
{% assign discount = block.settings[discount_key] | plus: 0 %}
{% assign badge_enable = block.settings[badge_key] %}
{% assign badge_text = block.settings[badge_text_key] %}
{% if label != blank and quantity > 0 %}
{% assign compare_total = quantity | times: base_price %}
{% assign discount_multiplier = 100 | minus: discount %}
{% assign final_price = compare_total | times: discount_multiplier | divided_by: 100 %}
{% assign per_unit_price = final_price | divided_by: quantity %}
{% assign show_compare = false %}
{% if discount > 0 and show_original_price %}
{% assign show_compare = true %}
{% endif %}
{% assign show_discount_label = false %}
{% if show_discount_tag %}
{% if discount > 0 %}
{% assign show_discount_label = true %}
{% elsif discount == 0 and show_zero_discount %}
{% assign show_discount_label = true %}
{% endif %}
{% endif %}
<div class="pack-wrapper">
{% if badge_enable %}
<div class="pack-badge">{{ badge_text }}</div>
{% endif %}
<button
type="button"
class="pack-option{% if forloop.first %} pack-option--selected{% endif %}"
data-quantity="{{ quantity }}"
>
<div class="pack-content">
<div class="pack-title">{{ label }}</div>
<div class="pack-pricing">
{% if show_compare %}
<span class="pack-original-price">{{ compare_total | money }}</span>
{% endif %}
{% if show_pack_price %}
<span class="pack-final-price">{{ final_price | money }}</span>
{% endif %}
{% if show_unit_price %}
<div class="pack-unit-price">{{ per_unit_price | money }} / {{ unit_label }}</div>
{% endif %}
</div>
</div>
{% if show_discount_label %}
<div class="pack-discount">Save {{ discount }}%</div>
{% endif %}
</button>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var container = document.querySelector('.pack-options[data-quantity-input-id="Quantity-{{ section.id }}"]');
if (!container) return;
var quantityInput = document.getElementById(container.dataset.quantityInputId);
var buttons = container.querySelectorAll('.pack-option');
buttons.forEach(function(btn) {
btn.addEventListener('click', function() {
buttons.forEach(b => {
b.classList.remove('pack-option--selected');
});
this.classList.add('pack-option--selected');
var qty = parseInt(this.getAttribute('data-quantity'), 10);
if (quantityInput && !isNaN(qty)) {
quantityInput.value = qty;
quantityInput.dispatchEvent(new Event('change'));
}
});
});
});
</script>
{% endif %}
{% endif %}
