good day,
some of my products count in 100g (100g,200g, …)
{% if product.tags contains ‘sold-by-grams’ %}
<div class="quantity-with-grams">
<input
type="number"
name="{% if line_index %}updates\[\]{% else %}quantity-with-grams{% endif %}"
value="{{ in_cart_quantity | default: variant.quantity_rule.min | default: 1 }}"
data-cart-quantity="{{ cart | item_count_for_variant: variant.id }}"
min="{{ variant.quantity_rule.min | default: 1 }}"
on:blur="/setQuantity"
on:focus="/selectInputValue"
ref="quantityInput"
aria-label="{{ 'accessibility.quantity' | t }}"
{% if line_index %}
data-cart-line="{{ line_index | plus: 1 }}"
{% endif %}
{% if variant.quantity_rule.max %}
max="{{ variant.quantity_rule.max }}"
{% endif %}
step="{{ variant.quantity_rule.increment | default: 1 }}"
{% if can_update_quantity == false or variant.available == false %}
disabled
{% endif %}>00g
if you see i add ”00g” at end of that and its work correct, just have problem that its space between qty and 00g
shop link :https://pickandmix.ae/
Try this:
.quantity-with-grams {
align-items: baseline;
}
.quantity-selector input[type='number'] {
text-align: right;
font-size: inherit;
}
@tim_tairli
just how can i bring “Number+00g” to center , its right now
AlexRatii:
good day,
some of my products count in 100g (100g,200g, …)
{% if product.tags contains ‘sold-by-grams’ %}
<div class="quantity-with-grams">
<input
type="number"
name="{% if line_index %}updates\[\]{% else %}quantity-with-grams{% endif %}"
value="{{ in_cart_quantity | default: variant.quantity_rule.min | default: 1 }}"
data-cart-quantity="{{ cart | item_count_for_variant: variant.id }}"
min="{{ variant.quantity_rule.min | default: 1 }}"
on:blur="/setQuantity"
on:focus="/selectInputValue"
ref="quantityInput"
aria-label="{{ 'accessibility.quantity' | t }}"
{% if line_index %}
data-cart-line="{{ line_index | plus: 1 }}"
{% endif %}
{% if variant.quantity_rule.max %}
max="{{ variant.quantity_rule.max }}"
{% endif %}
step="{{ variant.quantity_rule.increment | default: 1 }}"
{% if can_update_quantity == false or variant.available == false %}
disabled
{% endif %}>00g
if you see i add ”00g” at end of that and its work correct, just have problem that its space between qty and 00g
shop link :https://pickandmix.ae/
Hi @AlexRatii
Wrap the input and “00g” in a span or div, then use CSS to remove spacing and padding. Set both elements to inline-block, zero margins, and adjust letter-spacing if needed. This ensures the unit appears flush with the number while keeping the input functional and accessible.
Try this CSS:
.quantity-with-grams {
--offset: 10px; /* fine-tune to center */
align-items: baseline;
padding-right: var(--offset);
border-radius:0;
}
.quantity-with-grams:focus-within {
outline: 1px solid;
}
.quantity-with-grams input[type='number'] {
text-align: right;
font-size: inherit;
padding-right: 0;
margin-left: calc(-1 * var(--offset));
outline: none !important;
}
Also, instead of
<div class="quantity-with-grams">
...
</div>
make it
<label class="quantity-with-grams">
...
</label>
This will help if anybody clicks into 00g
This is how it looks like for me:
Unfortunately, styling native elements like <input> is problematic.
Need to invert the problem with a text input
Problematic putting it politely.@AlexRatii you need to be using an intermediary TEXT input for this type of stuff or you gonna have constant headaches from compounding CSS band-aids for every other browser/situation.
thank you for your time
Moeed
December 16, 2025, 8:05am
8
Hey @AlexRatii
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above </ body> tag
<style>
lable.quantity-with-grams {
display: flex !important;
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
thank you for your reply
@Moeed i forgot to mention you in above msg
It was working fine before.
If I remove this code from the bottom of your assets/base.css:
Code to remove
.quantity-btn {
background: #f7f7f7;
border: none;
width: 44px;
height: 44px;
font-size: 20px;
cursor: pointer;
}
.quantity-btn:hover { background: #eee; }
.quantity-selector input[type='number'] {
text-align: center;
font-size: inherit;
}
input[type="number"] {
font-feature-settings: "lnum";
font-variant-numeric: lining-nums;
direction: ltr;
}
input[type="number"],
.quantity__input {
unicode-bidi: plaintext;
}
.quantity__input {
font-family: Arial, sans-serif !important;
}
.quantity-with-grams {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
border: 0px;
border-radius: 4px;
padding: 0;
gap: 0;
width: 100%;
pointer-events: none; /* Disable pointer events on container */
}
.quantity-with-grams:focus-within {
outline: 1px solid;
}
.quantity-with-grams input[type='number'] {
border: none;
text-align: center;
font-size: inherit;
padding: 8px 0px 8px 0px;
outline: none !important;
width: auto;
max-width: 60px;
min-width: 40px; /* Added minimum width */
margin: 0;
pointer-events: auto; /* Re-enable pointer events on input */
}
.quantity-with-grams .gram-suffix {
padding-left: 0;
padding-right: 0;
white-space: nowrap;
pointer-events: none;
color: inherit;
margin: 0;
margin-left: -25px;
}
And add this code (which is the same code it was above, with only small change to --offset:
Code to add
.quantity-with-grams {
--offset: 15px; /* fine-tune to center */
align-items: baseline;
padding-right: var(--offset);
border-radius:0;
display: flex;
}
.quantity-with-grams:focus-within {
outline: 1px solid;
}
.quantity-with-grams input[type='number'] {
text-align: right;
font-size: inherit;
padding-right: 0;
margin-left: calc(-1 * var(--offset));
outline: none !important;
}
I get this:
