{"product_id":"2026-07-06","title":"[Horizon] A\/B Test Product Photos with Shopify Rollouts | Swap the Entire Gallery via a Metafield","description":"\u003cp\u003eThe 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.\u003c\/p\u003e\n\u003cp\u003eYou 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.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"A\/B testing Horizon product photos with Rollouts and a metafield\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_1_en_91e96e6b-210d-4666-b2f2-5d1bfbe73900.png?v=1783258295\" class=\"zoomable-image\" width=\"800\" height=\"821\" style=\"aspect-ratio: 0.975;\"\u003e\u003c\/p\u003e\n\u003cp\u003e👉 See it live on our demo store (with the theme switch ON, showing the metafield photos):\u003cbr\u003e\u003ca href=\"https:\/\/horizon-store-coffee.myshopify.com\/products\/ethiopia-yirgacheffe\" target=\"_blank\" rel=\"noopener\"\u003ehorizon-store-coffee.myshopify.com\/products\/ethiopia-yirgacheffe\u003c\/a\u003e\u003cbr\u003eStore password: storedojo\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eHow it works\u003c\/h3\u003e\n\u003cp\u003eHorizon's product gallery (product page and product cards) builds a single media array internally. When the theme setting \u003cstrong\u003eab_test_use_alt_media\u003c\/strong\u003e is ON, that array is replaced wholesale with the product metafield \u003cstrong\u003ecustom.ab_media\u003c\/strong\u003e (a list of images\/videos). Only the displayed media changes, so zoom, slideshow and variant switching keep working.\u003c\/p\u003e\n\u003ch3\u003e[Step 1] Create the product metafield \"AB Media\"\u003c\/h3\u003e\n\u003cp\u003eAdmin → Settings → Custom data → Products → \"Add definition\"\u003cbr\u003e・Name: AB Media (namespace and key: custom.ab_media)\u003cbr\u003e・Type: List + File\u003cbr\u003e・Accepted file types: media files only (images\/videos)\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Creating the AB Media metafield definition\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_2_en.png?v=1783258211\" class=\"zoomable-image\" width=\"800\" height=\"565\" style=\"aspect-ratio: 1.415;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e[Step 2] Register the alternate media on each product\u003c\/h3\u003e\n\u003cp\u003eOn each test product, open \"Metafields → AB Media\" and add the alternate pattern's photos\/videos. You can set the display order here too.\u003cbr\u003eProducts without the metafield keep their normal media, so it is safe.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Registering AB Media on a product\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_3_en.png?v=1783258212\" class=\"zoomable-image\" width=\"800\" height=\"691\" style=\"aspect-ratio: 1.157;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eAdd the code to your theme (3 files)\u003c\/h3\u003e\n\u003cp\u003eThis is the core. Add code to the following 3 files (the full code is shown after purchase).\u003cbr\u003e・snippets\/product-media-gallery-content.liquid — the product page gallery\u003cbr\u003e・snippets\/card-gallery.liquid — product cards\u003cbr\u003e・config\/settings_schema.json — the on\/off theme setting\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Edit to product-media-gallery-content.liquid\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_6.png?v=1783258209\" class=\"zoomable-image\" width=\"800\" height=\"667\" style=\"aspect-ratio: 1.2;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Edit to card-gallery.liquid\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_5.png?v=1783258208\" class=\"zoomable-image\" width=\"800\" height=\"471\" style=\"aspect-ratio: 1.699;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Edit to settings_schema.json\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_7.png?v=1783258210\" class=\"zoomable-image\" width=\"800\" height=\"395\" style=\"aspect-ratio: 2.025;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e[Step 3] Set up the A\/B test with Rollouts\u003c\/h3\u003e\n\u003cp\u003eUse Shopify Rollouts to split the published theme into Control and Treatment.\u003cbr\u003e・\u003cstrong\u003eControl\u003c\/strong\u003e: the original theme (Pattern A) — leave it unchanged.\u003cbr\u003e・\u003cstrong\u003eTreatment\u003c\/strong\u003e: assign a theme copy (you will turn the switch ON in Step 4).\u003cbr\u003eSet each to 50% and everything but the photos stays identical.\u003c\/p\u003e\n\u003cp\u003eNote: Rollouts require the Basic plan or higher, and A\/B testing (experiments) requires the \u003cstrong\u003eGrow plan or higher\u003c\/strong\u003e. See the \u003ca href=\"https:\/\/help.shopify.com\/en\/manual\/markets-new\/rollouts\" target=\"_blank\" rel=\"noopener\"\u003eShopify Help (Rollouts)\u003c\/a\u003e for details.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Assigning 50\/50 to control and treatment in Rollouts\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_8_en.png?v=1783260714\" class=\"zoomable-image\" width=\"800\" height=\"392\" style=\"aspect-ratio: 2.043;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e[Step 4] In the Treatment (Pattern B), turn ON the theme setting\u003c\/h3\u003e\n\u003cp\u003eOn the theme assigned to the Rollouts treatment (Pattern B), turn ON \"Theme editor → Theme settings → 'A\/B Test (Product Media)' → 'Swap to AB media'\".\u003cbr\u003eNow Control (A) keeps the original photos, and only Treatment (B) swaps to the photos\/videos set in each product's metafield.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Turning the theme switch ON on the treatment side\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_4_en.png?v=1783260718\" class=\"zoomable-image\" width=\"800\" height=\"569\" style=\"aspect-ratio: 1.407;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e[Step 5] Measure which photos win\u003c\/h3\u003e\n\u003cp\u003eOn 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.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Rollouts measurement comparing control and treatment\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06_9_en.png?v=1783260719\" class=\"zoomable-image\" width=\"800\" height=\"506\" style=\"aspect-ratio: 1.58;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eNotes\u003c\/h3\u003e\n\u003cp\u003e・Keep the swapped media at an aspect ratio close to the originals to avoid layout shift (CLS).\u003cbr\u003e・The metafield is a file reference, so 3D models are not supported (images\/videos only).\u003cbr\u003e・Cart thumbnails and social share images (OGP) keep the normal photos — intentionally left out to keep the test clean.\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49044252131579,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-07-06.png?v=1783260180","url":"https:\/\/store-dojo.com\/en-us\/products\/2026-07-06","provider":"STORE DOJO","version":"1.0","type":"link"}