Displaying selected variant images alongside product images?

[pycxu]

Hi, I'm pretty new to Shopify and Hydrogen.

I am trying to figure out the best approach for MediaGallery to display both product and variant images, while prioritising the selected variant's images in the gallery:

• Utilise the useProductVariants() and useSelectedVariant() hooks to access variant data.
• Convert variant images to MediaImage and concatenate them with the product images (MediaImage), while ensuring that duplicate images are removed based on their Shopify CDN file url. This is necessary since variant and product images may have different IDs? (gid://shopify/ProductImage/* vs. gid://shopify/ImageSource/*), but the URLs are identical for the same image.

Not too sure about this, any suggestions?

Thank you.

[thomasKn]

Hey @pycxu, your approach will work if you want to use the classic product image gallery.

I know that Shopify recently released a native swatch with Products 2.0 and I plan to add a color swatch to the theme, and here is how I would do it:

• Update the product from the Shopify admin to add Color as a Category Metafield.
• Create a new Metaobject Variant Image Gallery (used to store images per variant and color).
• Create a new product Metafield to reference a list of variant image galleries.
• Render the color swatch in the PDP using the ProductOptionValueSwatch value.
• Render the Variant Image Gallery Metaobject based on the color selected.