I have a Shopify quantity selector that currently looks like this: enter image description here I want to get rid of the leading 0 that appears when I have quantity < 10. But I don't know how to do this. I've tried injecting a JS script that filters the 0 on input change but it doesn't work. I printed the filter output and it's correct, but I can't replace the HTML somehow. Here's my code: <div {% if block != blank %}{{ block.shopify_attributes }}{% endif %} class="product-form__controls-group{% unless show_quantity_input %} hidden{% endunless %}"> <div class="product-form__controls-label-wraper type-heading-3"> <label for="Quantity-{{ section.id }}" >{{ 'products.product.quantity' | t }}</label> </div> <div class="product-form__item product-form__quantity"> <script type="text/javascript"> function leading0(x, id){ console.log(x, x.replace(/^0+/, ''), id); x = x.replace(/^0+/, '') document.getElementById(id).innerHTML = '{{ x }}'; } </script> <button type="button" class="product-form__quantity-button product-form__quantity-add-item " aria-label="{{ 'general.accessibility.quantity_subtract' | t }}" > {% render 'icon-plus', non_focusable: true %} </button> <input type="number" id="Quantity-{{ section.id }}" {% if form_id != blank %}form="{{ form_id }}"{% endif %} name="quantity" value="1" min="1" pattern="[0-9]" class="product-form__input product-form__input--quantity" data-quantity-input aria-label="{{ 'general.accessibility.quantity' | t }}" onchange="leading0(this.value, this.id);" > <button type="button" class="product-form__quantity-button product-form__quantity-subtract-item" aria-label="{{ 'general.accessibility.quantity_add' | t }}" > {% render 'icon-minus', non_focusable: true %} </button> </div> </div>