"Sort color variants alphabetically on Horizon theme"

[lelongdelajambe]

Hi,
I’m using Horizon theme. My color variants imported from eBay via Reputon are not sorted alphabetically. The option is named “Couleur dominante”. My store is password protected so I can’t share a live URL. Can someone provide a working JavaScript snippet specifically for Horizon theme to sort variant option values alphabetically on the storefront?

Thank you,
Hervé

[JohnQQ]

variant sorting depends on where the issue appears. Where exactly do you see the unsorted colors: on the product detail page, in collections, or search results?

the simplest fix is reordering in Shopify admin under Products → [your product] > Variants by dragging them alphabetically. If Reputon imported them in a fixed sequence, admin-level reordering usually solves it. For automatic sorting at the theme display level, you would need theme customization or JS targeting horizon’s specific variant html, which typically requires developer help.

[lelongdelajambe]

Dragging not possible with many variant colors, it is a limitation of Horizon theme… I did it for the sizes only. Thanks, Hervé

[Ploqo]

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

Hi Hervé, Problem: [Couleur dominante buttons in random import order, on Horizon] 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. [Add block, then Custom Liquid, under Product information] Paste the code below into the Custom Liquid box and Save. <script> document.addEventListener('DOMContentLoaded', function () { // Option names…

[lelongdelajambe]

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

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.

Very clean solution, with you the customer will see very professionnal product presentation, thanks a lot, Hervé

[Shopify_CSV_Helper]

Sorting color or size variants alphabetically in Shopify themes (like Horizon) is best handled at the CSV data layer during product import, rather than relying on frontend Liquid JavaScript sorting hacks.

Three technical rules when structuring variant order in Shopify CSVs:

1. Array Storage Order Dictates Theme Rendering: Shopify’s theme engine renders option dropdowns strictly in the array order defined by your CSV’s ‘Option1 Value’ and ‘Option2 Value’ rows. Pre-sorting your CSV rows by Color (alphabetically) before running the import ensures native theme sorting across all storefront views.

2. Maintain Variant Image Row Duplication: When re-ordering variant CSV rows alphabetically, ensure the ‘Variant Image’ URL stays strictly bound to every size variant row sharing that color. Re-sorting rows without keeping image URLs mapped causes variant image dissociation on import.

3. WebP Image Ingestion Order Traps: If your variant images reference raw .webp links from supplier feeds, Shopify’s CSV importer may drop images asynchronously. When image 2 fails to download, Shopify shifts image 3 into Position 2, destroying your intended variant display sequence without an error log.

If you want to sanitize variant order and transpile supplier WebP images locally before import, consider using EasyCatch (a client-side Chrome extension). Its Local Canvas Transpiler converts WebP images to static JPGs inside your Chrome sandbox and generates Matrixify-compliant ZIPs with pre-mapped variant rows in 1 click. 100% Local-First so store catalog data stays completely private.