Show specific images based on variant selection
Shopify supports only one image per variant by default. Flawless extends this by using metaobjects, allowing you to show different image sets based on selected options like color or size combinations.
Step 1: Create the Variant Image Metaobject
Metaobject fields to create
-
Product with option value (optional but helpful)
- Type: Single line text
- Values allowed: One
Why this is required
- Used as a display name
- Helps identify which images belong to which product and option set
-
Option Value
- Type: Single line text
- Values allowed: One
Why this is required
- Controls which images are shown
- Must match product option values exactly
-
Images
- Type: Image file
- Values allowed: Multiple
Why this is required
These images replace the product gallery when the option combination is selected
Step 2: Create the Product Metafield
Metafield settings
- Content type: Products
- Name: Variant images
- Namespace and key: flawless.variant_images
- Type: Metaobject
- Accepts: List of entries
Important
- Namespace must be exactly flawless
- Typos will cause variant images not to work
- List of entries is required to support multiple option combinations
Step 3: Assign Images to Variant Options
-
Each metaobject entry represents one option condition
You can add multiple entries per product
Examples:
- One entry for Blue
- One entry for Black
- One entry for Black, M
- Images update automatically when the matching option is selected
Note: Make sure to assign images to the default variant setup. If options are not configured on the metaobject level, then it will fallback to variant level images.