The hero product photo — and the order of the gallery — has a big impact on conversion. This is how to swap the entire product gallery (photos and videos) for an alternate set in the Horizon theme, then use Shopify Rollouts to split visitors 50/50 and see which photos actually sell.
You register the alternate media in a product metafield, then flip one theme setting on the Rollouts treatment (Pattern B). Everything but the photos stays identical.
👉 See it live on our demo store (with the theme switch ON, showing the metafield photos):
horizon-store-coffee.myshopify.com/products/ethiopia-yirgacheffe
Store password: storedojo
How it works
Horizon's product gallery (product page and product cards) builds a single media array internally. When the theme setting ab_test_use_alt_media is ON, that array is replaced wholesale with the product metafield custom.ab_media (a list of images/videos). Only the displayed media changes, so zoom, slideshow and variant switching keep working.
[Step 1] Create the product metafield "AB Media"
Admin → Settings → Custom data → Products → "Add definition"
・Name: AB Media (namespace and key: custom.ab_media)
・Type: List + File
・Accepted file types: media files only (images/videos)
[Step 2] Register the alternate media on each product
On each test product, open "Metafields → AB Media" and add the alternate pattern's photos/videos. You can set the display order here too.
Products without the metafield keep their normal media, so it is safe.
Add the code to your theme (3 files)
This is the core. Add code to the following 3 files (the full code is shown after purchase).
・snippets/product-media-gallery-content.liquid — the product page gallery
・snippets/card-gallery.liquid — product cards
・config/settings_schema.json — the on/off theme setting
[Step 3] Set up the A/B test with Rollouts
Use Shopify Rollouts to split the published theme into Control and Treatment.
・Control: the original theme (Pattern A) — leave it unchanged.
・Treatment: assign a theme copy (you will turn the switch ON in Step 4).
Set each to 50% and everything but the photos stays identical.
Note: Rollouts require the Basic plan or higher, and A/B testing (experiments) requires the Grow plan or higher. See the Shopify Help (Rollouts) for details.
[Step 4] In the Treatment (Pattern B), turn ON the theme setting
On the theme assigned to the Rollouts treatment (Pattern B), turn ON "Theme editor → Theme settings → 'A/B Test (Product Media)' → 'Swap to AB media'".
Now Control (A) keeps the original photos, and only Treatment (B) swaps to the photos/videos set in each product's metafield.
[Step 5] Measure which photos win
On the Rollouts results screen, compare Control (A) and Treatment (B) across key metrics — conversion rate, add-to-cart rate, reached-checkout rate, bounce rate — to decide which photo pattern drove purchases.
Notes
・Keep the swapped media at an aspect ratio close to the originals to avoid layout shift (CLS).
・The metafield is a file reference, so 3D models are not supported (images/videos only).
・Cart thumbnails and social share images (OGP) keep the normal photos — intentionally left out to keep the test clean.
