Impulse Theme - Product Page Order of Images

Store Design

Topic summary

A user wants to customize image display order on product pages using the Impulse theme. Currently, images default to showing the first variant’s image first, but the user prefers displaying room mockup images before variant-specific photos—allowing customers to scroll through styled shots in a custom sequence before selecting variants.

Current behavior:

  • Product page automatically displays the first variant’s image
  • Images follow variant order rather than the custom arrangement set in the product editor

Desired outcome:

  • Room mockups appear first when customers land on the page
  • Images follow the custom order set in the backend, independent of variant selection
  • This order should apply to both desktop and mobile views

Discussion status:

  • One responder noted this could create UX confusion since the first variant is selected by default (price/content would reflect that variant while showing a different image)
  • Another developer expressed willingness to attempt the customization through code modifications, though they haven’t implemented this specific feature before
  • No concrete solution or code has been provided yet
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi! I am using the Impulse theme.

Currently, my images on the product page of every product default to my first variant.

Like this: https://creativegardenstudio.com/collections/canvas-prints/products/stillness-canvas-art-print

However, I want my images to show up in the order I have put them inside of my products like the attached screenshot.

Can someone tell me what code I need to insert into my theme to make the images on my product page (from the users perspective) appear in the same order I have put them on my product page instead of the default view of the first variable? In other words, I want to control the order they appear in for both desktop and mobile.

Thanks!

2

Hi @JulieMaida

You can change the image you want to use as the first variant image.

DaisyVo_0-1738425123432.png
DaisyVo_0-1738425123432.png1772×758 89.2 KB

3

Thanks! I understand that. But when someone lands on my product page, I want the first image to be a room mock up, not a product variant. And then I want them to follow the order I created in my products images, not default by the first variant.

4

If you like display a different image that’s not a variant that wouldn’t be a very good experience, since by default the first variant is going to be selected and the price and content will be shown as such.

The part of ordering the images just like you want it can be tried with code modifications but the first image will be the first variant.

5

I am not trying to display the wrong image for my variants. I want people to just be able to scroll through my images which include room mock ups. Before they even choose a variant. And I want them to be able to scroll through them in a certain order that I choose (the room mock ups first), not be the same as the first default variant.

6

Okay. The first variant is selected by default, I am pretty sure you know this. So the first image is going to be the first variant image.

But if you want to order the images like all room mockups first and then the others, I haven’t done this before but I would definitely love to give that a try.