On my product pages, when a customer clicks on a product image and lands on the full gallery, the variant colour image appears first (left position), before the cover image and the other product photos.
What I would like instead:
- The cover image (main product image) always appears first
- The other product photos follow in order
- The variant colour image only switches into view after the customer has selected both a size and a colour
I am using the Horizon theme. Is there a way to control the gallery order so the cover image always stays first, and variant images only appear on selection?
Thank you.
Hervé
Hi @lelongdelajambe
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder
Hey @lelongdelajambe ,
Yes, this is possible, but it depends on how the Horizon theme handles variant media.
By default, Horizon will often display the media associated with the selected (or default) variant first, which is why you’re seeing the variant color image before the main product image.
If your goal is to:
Keep the featured (cover) image as the first image at all times,
Show the remaining gallery images in their normal order,
Only switch to the variant specific image after the customer has selected both a size and a color,
then this typically requires customizing the theme’s product gallery logic. There isn’t a built in setting in Horizon to change this behavior.
Before suggesting the exact solution, could you share:
Your store URL (or a preview link if the store isn’t live).
If the store is password protected, the storefront password as well.
That will make it easier to confirm how Horizon is rendering the gallery and whether a small customization is all that’s needed.
If you found my reply helpful, feel free to mark it as the accepted solution so it can help other merchants following this discussion.
Thank You !
Hi @lelongdelajambe
Okay, could you please send me the store URL? I’ll check it and provide you with a proper update.
There’s no native setting for this in Horizon, so anything doing exactly what you’ve described is custom work.
Before building it though, I’d gently push back on the goal. If someone has clicked into red, opening on the cover image makes them scroll to find the thing they just asked for. The behaviour you’re seeing is deliberate and it’s usually the right one.
If the real annoyance is that the gallery opens on a colour nobody picked, there’s a simpler fix. Shopify shows the first available variant by default, so reorder your variants in the admin so the one you want leads, and assign your cover image to that variant. First thing anyone sees is the shot you wanted, and it still switches properly when they choose something else.
Hi lelongdelajambe,
Could you please share your store URL and password? Then I can review your store and give you a better solution.
There are two separate goals here: preserving the product story and showing the exact selected variant. I agree the cover image should lead before the shopper makes a choice, especially if it explains the product better than a colour close-up.
I would not necessarily wait for both size and colour before switching the image, though. Size usually does not change the visual evidence, while colour does. From a shopping-clarity perspective, the cleaner rule is: show the featured image on initial load, then switch to the correct variant media as soon as the shopper selects a colour.
The likely technical cause is that the first available variant is already selected on load, so Horizon treats its attached media as the primary image. That is still a hypothesis until the live product and variant setup are checked.
When testing a customization, verify three states on mobile as well as desktop: initial landing, colour selected, and returning to a previously selected variant. The CRO success metric is not simply “cover image stays first”; it is fewer wrong-colour selections or backtracking without reducing add-to-cart rate.
Controlling variant image order during CSV imports depends strictly on how the ‘Image Src’ and ‘Image Position’ columns interact with ‘Variant Image’ bindings.
Three rules for maintaining strict variant image order in Shopify CSVs:
-
Master Gallery Position Array: The ‘Image Src’ and ‘Image Position’ columns set the parent product media gallery order (Position 1, 2, 3…). The first variant row defines the main display image.
-
Explicit Variant Image Row Duplicate: To assign a specific image to a variant (e.g. Navy Blue), the ‘Variant Image’ column on that variant row must explicitly carry the Navy image URL. For multi-size rows sharing that Navy color, you MUST duplicate the Navy image URL across all size rows.
-
WebP Image Ingestion Order Failure: Supplier feeds containing raw .webp image links or expiring CDN parameters often get dropped asynchronously by Shopify’s background CSV worker. When image 2 fails to download, Shopify shifts image 3 into Position 2, destroying your intended image sequence without an error log.
If you want to sanitize image order and WebP formats locally before import, consider using EasyCatch (a client-side Chrome extension). Its Local Canvas Transpiler converts supplier 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 remains private.
HI @lelongdelajambe
Yes, but there’s an important distinction in Horizon: the gallery order and variant-media behavior are controlled separately.
What you’re seeing is usually caused by the variant image being included in the product media list, so when the gallery opens, it can become the first/active media instead of behaving like a conditional image.
I’d approach it this way:
- Keep the cover image as the first product media in Shopify Admin.
- Keep the normal product photos immediately after it.
- Assign the colur/variant image to the appropriate variant.
- Then use the theme’s variant -media behavior so that the variant image is only shown/selected after the relevant variant is chosen.
If Horizon is still moving the variant image to the first position when the gallery opens, changing the media order in Admin alone probably won’t solve it. You’d need to adjust the Horizon product-gallery Liquid/JavaScript so that the initial gallery state always selects the product’s first media, rather than the variant’s media.
I would not recommend simply hiding the variant image with CSS, because you still want is avaiulable once thd customer selects the colour.
so the desired logic is essentially:
Cover → photo 2 → photo 3 → photo 4
After Size + Colour selected:
Cover → Photo 2 → Photo 3 → Colour-specific image
