Horizon theme — Variant color options in random order after Reputon import

[lelongdelajambe]

Hi,

I sell hosiery on my Shopify store using the Horizon theme. I import products from eBay via the Reputon app.

After each import, the color variant options appear in a random order on the product page. I cannot reorder them manually because there are too many products.

Is there a way to automatically sort variant options alphabetically on Horizon? Either natively or via a simple workaround?

Thank you,
Hervé

[lelongdelajambe]

Change display is good enough for the customers, share you snippet and I will try it. If it’s work fine, I will check solution of course.
Thank you, Hervé

[Ploqo]

Hi Hervé,

Problem:

Use the code given below. It sorts the colour buttons A to Z on the storefront.

• Online Store > Themes > Customize, then open any product page.
• Under Product information, click Add block > Custom Liquid.

• Paste the code below into the Custom Liquid box and Save.

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Option names to sort A->Z. Add your exact option name / language here.
  var SORT_OPTIONS = ['color', 'colour', 'couleur'];

  function valueText(label) {
    var t = label.querySelector('.variant-option__button-label__text') || label;
    return (t.textContent || '').trim();
  }

  function sortOptions() {
    document.querySelectorAll('variant-picker fieldset.variant-option--buttons').forEach(function (fs) {
      var legend = fs.querySelector('legend');
      if (!legend) return;
      var name = legend.textContent.trim().toLowerCase();
      if (!SORT_OPTIONS.some(function (k) { return name.indexOf(k) !== -1; })) return;

      var items = Array.prototype.slice.call(fs.querySelectorAll('.variant-option__button-label'));
      if (items.length < 2) return;

      var sorted = items.slice().sort(function (a, b) {
        return valueText(a).localeCompare(valueText(b), undefined, { numeric: true, sensitivity: 'base' });
      });
      if (sorted.some(function (el, i) { return el !== items[i]; })) {
        sorted.forEach(function (el) { fs.appendChild(el); });
      }
    });
  }

  sortOptions();

  // Horizon re-renders the picker when a shopper switches an option, so re-apply.
  document.querySelectorAll('variant-picker').forEach(function (picker) {
    new MutationObserver(sortOptions).observe(picker, { childList: true, subtree: true });
  });
});
</script>

Notes:

• The list at the top (color, colour, couleur) is what it checks against your option name, so your Couleur dominante is already covered. If a product names the colour option something else, add that word to the list.
• It only touches options whose name matches, so Taille and every other option keep the order you set.
• It re-applies when a shopper switches a size, so the order never jumps back.
• Display only. Nothing in your admin or your variant data changes.

[Custom-Cursor]

Hey @lelongdelajambe

hope you’re doing well!

Shopify doesn’t currently support automatic alphabetical sorting of variant values. If the import app can’t preserve the order, you’ll likely need a custom theme modification or an app/script to sort the option on a storefront