Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
So I have a product variant with numbers 1, 2, 5, & 10. Every time I put them in that order Shopify spits out 10, 1, 2, & 5. It's so annoying and is driving me up a wall. I have over 100 products that this is happening on.
Can anyone tell me if this is a glitch or just how shopify works? Any workarounds?
Solved! Go to the solution
This is an accepted solution.
Add a "Custom liquid" block to product information section and paste this code:
<script>
let optionName = "Number";
let inputs = [...document.querySelectorAll(`input[name=${optionName}]`)]
.sort( (a,b) => (parseInt(a.value) - parseInt(b.value)));
inputs.forEach((input)=> {
let parent = input.parentElement;
let label = input.nextElementSibling;
parent.append(input);
parent.append(label);
});
</script>
This code will numerically sort values for option defined by optionName.
Could you kindly provide us with your store URL and, if applicable, the password, so i can check and provide you possible solution for your question.
Usually, you should be able to reorder your product option values manually when creating/editing products.
It is possible that your theme sorts these values as well; however the sort is not by numerical value but alphabetical.
Hard to tell without seeing your site/knowing your theme.
On the other hand, it should also be possible to resort these values in theme code rather then updating your products...
I tried reordering them but it just defaults back. I'm using Dawn theme 13.0. Here is my URL and password:
https://euphoriaforest.store/products/team-lomo-cards-copy and Yoongi2017
This is an accepted solution.
Add a "Custom liquid" block to product information section and paste this code:
<script>
let optionName = "Number";
let inputs = [...document.querySelectorAll(`input[name=${optionName}]`)]
.sort( (a,b) => (parseInt(a.value) - parseInt(b.value)));
inputs.forEach((input)=> {
let parent = input.parentElement;
let label = input.nextElementSibling;
parent.append(input);
parent.append(label);
});
</script>
This code will numerically sort values for option defined by optionName.
Thank you! This worked for the 1 listing. I'll keep a check on it as I publish more products
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025