Goal: Keep the first product image as a “ghost” for external syndication while not showing it as the main image on the storefront. Use the second image as the hero (primary image on initial load) and swap to the third image on hover, without changing the image order in Shopify admin.
Requested approach: A Liquid/JavaScript solution that visually skips Image 1, sets Image 2 as the main image, and hovers to Image 3. The current theme behavior shows Image 1, then hovers to Image 2.
Key clarification: “Hero image” refers to the primary image displayed on page load. The “ghost” first image is retained solely for catalog feed/syndication purposes.
Latest update: A responder states this cannot be achieved with CSS alone and asks for store access to implement changes directly in the theme (implying a template/JS modification is needed).
Status: No code or finalized solution shared yet; implementation pending access. Images and theme code (Liquid/JS) are central to resolving this.
I’m working on a Shopify store where the first product image must remain a “ghost” image because our products are syndicated to other online retailers that pull directly from our Shopify catalog.
However, on our own product pages, I’d like to:
Keep Image 1 (ghost image) in the product media array for backend/syndication purposes
Display Image 2 as the hero / main image on page load
On hover, swap from Image 2 → Image 3
(Right now the theme shows Image 1, then on hover swaps to Image 2)
What I’m looking for:
A Liquid / JS solution that:
Visually skips the first image on the storefront
Uses the second image as the main product image
Keeps the original image order intact in the admin (so Image 1 is still first)
I’ve worked on similar setups where the first product image needs to stay in place for syndication, while the storefront displays a different hero image and hover behavior.
If I take a quick look at your store/theme, I can identify exactly where the image logic is handled and adjust it so:
Image 1 remains untouched in the admin for backend/syndication
Image 2 loads as the main hero image on the product page
Hover swaps from Image 2 to Image 3 instead of Image 1 → Image 2
This can be done cleanly with Liquid (and minimal JS if needed), without breaking your catalog structure or feeds.
If you don’t mind, we can talk it through further and I’ll explain the best approach based on your current theme.
It’s hard to suggest exact edits from the outside since your theme is paid.
For collection pages this may be a simple liquid edit.
Say, for Dawn the code you’d need to change is here:
So you simply replace card_product.media[1] with card_product.media[2] and card_product.featured_media with card_product.media[1] in this snippet.
However, consider that when you filter collection, say by color, the featured_media is updated to showcase the variant image of this color – if you filter for “white” products, featured_media is updated to the media of the first white variant.
This would need to be addressed if you prefer to keep this functionality.
Now, you did not say what you want on the product page – this has to be more complex.
This is definitely possible and you’re thinking about it the right way
You don’t need to change the media order in Shopify at all.
Best approach: handle this at the theme level (Liquid + a small JS/CSS adjustment).
How it works conceptually:
Keep Image 1 in the product media array for syndication (unchanged in admin)
In the product template, skip the first media item for display purposes
Treat Image 2 as the default/hero image on page load
On hover, swap Image 2 → Image 3 instead of 1 → 2
Implementation options:
Liquid-only (cleanest):
In the product media loop, start rendering from index 1 instead of 0 (or offset: 1).
This visually hides Image 1 on the storefront while keeping it intact in the backend.
JS fallback (if theme logic is complex):
Use JS to:
Set the featured image to product.media[1] on load
Override the hover behavior to use media[2]
This approach is commonly used for ghost / placeholder images in syndicated catalogs and won’t affect feeds, integrations, or admin order.
