Change 1,2,3, .. to 100g,200g,300g in quantity selector

[AlexRatii]

for some of my product i sell base on 100g , for example 100g 200g 300g how can i do it in quantity selector like below photo

i check inspect of this website it added 00g at end of counter, maybe this will be solution

but its not for all items

[eFoli-Marvic]

Hello @AlexRatii

Based on your requirements, I recommend using a third-party Shopify app called MultiVariants – Bulk Order. This app includes a Bundle Quantity feature that allows you to create custom quantity rules for specific products—for example, selling items in 100g, 200g, 300g, or any other measurement you prefer.

With this feature, you can:

• Define your own quantity ranges
• Set custom unit labels such as g, kg, yard, etc.
• Complete the setup within just a couple of minutes
• Use the feature without any coding knowledge

You can check out the uploaded images on the product page to see how the setup and demo products look in real stores.

The app offers a 14-day free trial, and if you’d like to explore live examples, their support team would be happy to assist you.

I hope this will help you. Thank you.

MultiVariants App Admin

Product Storefront

[mageplaza-cs]

Hello,
Please try with this step:

Step 1: Tag the products that are sold by grams

Go to Shopify Admin → Products → open the product → add a tag, for example: sold-by-grams

Step 2: Replace the default quantity input (works on Dawn and 99% of modern themes)

1. Go to Online Store → Themes → Actions → Edit code
2. Open the file that contains the product form. Usually one of these:

• sections/main-product.liquid
• snippets/product-form.liquid
• templates/product.liquid

3. Find the default quantity input (search for name=“quantity” or ).
4. Replace the entire quantity block with this code:

liquid

<div class="product-form__quantity">
  {% if product.tags contains 'sold-by-grams' %}
    <!-- Custom 100g selector -->
    <label class="form__label" for="Quantity-{{ section.id }}">Quantity</label>
    <div class="quantity-with-grams">
      <button type="button" class="quantity-btn minus-btn">-</button>
      
      <input 
        type="text" 
        id="Quantity-{{ section.id }}"
        class="quantity-input-grams"
        value="100g"
        readonly
      >
      
      <button type="button" class="quantity-btn plus-btn">+</button>
    </div>
    
    <!-- Hidden real quantity that Shopify understands -->
    <input type="hidden" name="quantity" value="1" class="real-quantity">

    <small style="display:block; margin-top:4px; color:#666;">
      Minimum 100g • Increments of 100g
    </small>

  {% else %}
    <!-- Default quantity selector for normal products -->
    <quantity-input class="quantity">
      <button class="quantity__button no-js-button" name="minus" type="button">−</button>
      <input class="quantity__input"
        type="number"
        name="quantity"
        id="Quantity-{{ section.id }}"
        min="1"
        value="1"
      >
      <button class="quantity__button no-js-button" name="plus" type="button">+</button>
    </quantity-input>
  {% endif %}
</div>

Step 3: Add JavaScript (very important)

Open assets/theme.js or assets/global.js and paste this at the bottom:

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  if (document.querySelector('.quantity-with-grams')) {
    
    const gramDisplay = document.querySelector('.quantity-input-grams');
    const realQuantity = document.querySelector('.real-quantity');
    const minusBtn = document.querySelector('.minus-btn');
    const plusBtn = document.querySelector('.plus-btn');

    let currentGrams = 100;

    function updateDisplay() {
      gramDisplay.value = currentGrams + 'g';
      realQuantity.value = currentGrams / 100;  // Shopify receives 1, 2, 3...
    }

    plusBtn.addEventListener('click', () => {
      currentGrams += 100;
      updateDisplay();
    });

    minusBtn.addEventListener('click', () => {
      if (currentGrams > 100) {
        currentGrams -= 100;
        updateDisplay();
      }
    });

    // First load
    updateDisplay();
  }
});

Step 4: Add some nice CSS (optional but recommended)

Add this to assets/base.css or assets/theme.css:

CSS

.quantity-with-grams {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
  margin-top: 8px;
}
.quantity-btn {
  background: #f7f7f7;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
}
.quantity-input-grams {
  width: 90px;
  text-align: center;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}
.quantity-btn:hover { background: #eee; }

[AlexRatii]

@mageplaza-cs CAN YOU HELP ME TO FIND THE FILE , and add liquid part to my store

i haven’t found it

pickandmix.ae
aaa12345

[AlexRatii]

@mageplaza-cs

it being like this

and quantity not work

[AlexRatii]

i fix it

just in your code :
<input

    type="text" 

    id="Quantity-{{ section.id }}"

    class="quantity-input-grams"

    value="100g"

    readonly

  >

its fix 100g not working ±