Help with variants and media gallery on product pages

Hi! I need help with the image gallery and variant buttons on product pages. The variant buttons are not connected to the variant images, I want the main image to switch whenever a customer switches variant. I also don’t like the order of the thumbnails, the first images are the variants in stock and after them are the other images I’ve uploaded, but I want the thumbnail images to show up in the order I’ve added them when I created the product.

Here’s an example product page on my website that most clearly shows my problems: https://seoulsound.se/products/le-sserafim-spaghetti?variant=52690123358550

This is where I edit the product, aka the order I want them to be in.

This is how they look on product page, the orange one is the only one I have in stock so that’s why it’s above the other ones. I don’t want this.

Thanks in advance!

1 Like

A few things to try:

  1. Make sure each variant image is assigned directly to the variant in the product editor (under the variant > Edit > Media section), not just uploaded as general product media.

  2. For thumbnail ordering, Shopify displays variant-assigned images first by default. You can reorder them by dragging in the product media section, but variant images will still float to the top unless your theme supports custom sorting.

Hi @Tilda_Falth

This is not a default feature of the theme. It will need to be implemented using custom JavaScript and Liquid code.

Hi @Tilda_Falth This is beyond the scope of the forums, it’s an advanced theme customization that varies by theme.
Reach out if you need it customized.
These are peer to peer forums.
Others aren’t hear to do your work for you by implement full blown features for you.

Show your work so far of the effort YOU’VE put in to ask specific TECHNICAL questions.
Bare minimum is any amount of search online or on the forums for existing solutions of discussions to jump off from.