Shopify released a set of new free themes under the Horizon collection in 2025. There are 10 of them: Vessel, Dwell, Tinker, Atelier, Savor, Fabric, Heritage, Ritual, Pitch, and the base Horizon theme. They look different from each other, but they share the same technical foundation. And that foundation changes how variant image apps need to work.
If you are running a Horizon theme or thinking about switching to one, this guide covers everything you need to know about variant images, gallery filtering, and color swatches on these themes. It is the single reference page for Horizon theme variant image support.
In this post
- What are Horizon themes?
- Why Horizon themes need special variant image handling
- All Horizon themes: IDs and target audience
- How Rubik detects Horizon themes automatically
- Variant images on Horizon: what works
- Collection page swatches with Combined Listings
- Individual theme guides
- Which Horizon theme fits your store?
- Get started
- Frequently asked questions
- Related reading
What are Horizon themes?
Horizon is Shopify’s next-generation theme architecture. Instead of Liquid sections and traditional HTML forms, Horizon themes use web components. The product gallery, variant picker, and add-to-cart form are all encapsulated web components.
Shopify released the base Horizon theme first, then followed with 10 themed variations. Each targets a different store type. Atelier for fashion. Savor for food and beverage. Tinker for electronics. They share the same web component foundation but differ in layout, typography, and design. All are free and built by Shopify in-house.
Why Horizon themes need special variant image handling
Traditional Shopify themes use a standard pattern for variant selection. There is a <form> element with <select> dropdowns or radio buttons. When a customer picks a color, JavaScript fires a change event on the form. Variant image apps listen for that event and filter the gallery.
Horizon themes replace this with a <variant-picker> web component. The variant selection lives inside Shadow DOM. The gallery is a separate web component. Communication between them happens through custom events and internal APIs, not through the DOM events that older apps rely on.
Any variant image app built for traditional themes will not work on Horizon out of the box. It cannot find the variant selector (inside Shadow DOM), cannot intercept change events (different event system), and cannot manipulate the gallery (also encapsulated). Apps need dedicated Horizon code. Rubik Variant Images and Rubik Combined Listings both include this native support.
All Horizon themes: IDs and target audience
Every Shopify theme has a store ID that apps use for detection. Here are all Horizon collection themes and their IDs.
| Theme | Store ID | Target audience |
|---|---|---|
| Horizon (base) | 2481 | General purpose, modern stores |
| Atelier | 3621 | Fashion and luxury brands |
| Fabric | 3622 | Textile and material-focused brands |
| Dwell | 3623 | Home goods and furniture |
| Heritage | 3624 | Heritage and legacy brands |
| Ritual | 3625 | Wellness and self-care |
| Savor | 3626 | Food and beverage |
| Tinker | 3627 | Electronics and gadgets |
| Vessel | 3628 | Visual brands and storytelling |
| Pitch | 3620 | Bold, high-energy brands |
Note: Some themes may also appear under alternate IDs in the Shopify Theme Store. For example, Savor is also listed as Pebble (ID: 4032) in some configurations. Rubik detects both.
How Rubik detects Horizon themes automatically
When you install either Rubik app, it reads your theme’s store ID and checks it against its database. If it matches any Horizon ID, the app loads its Horizon rendering module automatically. No manual theme selection needed.
The Horizon module renders swatches inside Shadow DOM (no CSS conflicts with the theme), listens for Horizon-specific variant change events, interacts with the gallery web component through its internal API, and handles the add-to-cart web component for variant ID updates.
If you switch themes, Rubik detects the change and swaps modules on the next page load. Settings carry over.
Variant images on Horizon: what works
Here is what Rubik Variant Images supports on all Horizon themes right now.
Gallery filtering
When a customer selects a color variant, the product gallery filters to show only the images assigned to that variant. If your blue shirt has 4 images and your red shirt has 3 images, selecting “Blue” shows those 4 and hides the rest. This works on all Horizon themes through the gallery web component API.
Color swatches
Replace dropdown variant selectors with visual swatches. Image swatches (product thumbnails), solid color circles, dual-color circles, text buttons, or a combination. Swatches render inside Shadow DOM on Horizon themes, keeping styles isolated from the theme. There are 11 product page presets and you can customize further with CSS variables.
AI auto-assign
Rubik’s AI looks at your product images and assigns them to the correct variant automatically. Upload 12 photos of a jacket in 3 colors and the AI groups them by color. This works regardless of your theme. The AI operates on your product data, not on the theme’s front end.
Multiple images per variant
Shopify natively allows only one image per variant. Rubik lets you assign multiple images to each variant. On Horizon themes, these images display in the gallery web component with proper slide navigation and zoom support.
Common images
Size charts, lifestyle shots, and other images that apply to all variants can be marked as “common.” They appear in the gallery for every variant selection. This works the same on Horizon as on traditional themes.
Collection page swatches with Combined Listings
Variant images handle the product page gallery. But what about collection pages? If you sell the same product in multiple colors as separate product listings, Rubik Combined Listings adds swatches to product cards on collection pages.
On Horizon themes, Combined Listings renders these swatches inside Shadow DOM, just like on product pages. Each product card shows small color circles. Hovering a swatch updates the card image. Clicking one navigates to that color’s product page.
Combined Listings works on all Horizon themes. Your product groups carry over if you switch themes. Read the setup guide for step-by-step instructions, or see our collection page swatches guide for the full picture.
Individual theme guides
Each Horizon theme has its own variant images guide with theme-specific screenshots and setup notes.
- Variant images on Vessel theme (visual brands, storytelling, editorial layouts)
- Variant images on Dwell theme (home goods, furniture, spacious product pages)
- Variant images on Tinker theme (electronics, gadgets, spec-focused grids)
- Variant images on Atelier theme (fashion, luxury, editorial product pages)
- Variant images on Savor theme (food, beverage, packaging-forward layouts)
- Variant images on Sense theme (clean, minimal, general purpose)
- Variant images on Craft theme (artisanal, handmade product stores)
- Variant images on Spotlight theme (hero products, smaller catalogs)
Which Horizon theme fits your store?
Variant image features work identically across all Horizon themes. Your choice comes down to design and store type.
- Fashion: Atelier. Editorial layouts, refined typography.
- Home and furniture: Dwell. Spacious pages for material and dimension details.
- Food and beverage: Savor. Warm design for labels and packaging.
- Electronics: Tinker. Clean grids, spec-focused.
- Visual brands: Vessel. Image-forward layouts.
- Wellness: Ritual. Calming design for skincare and supplements.
- General purpose: Base Horizon theme.
Get started
Both Rubik apps include free plans. Install one or both, activate the app embed in your Horizon theme, and the app detects your theme automatically.
Variant Images demo | Combined Listings demo | Docs
Frequently asked questions
Do variant image apps work on Shopify Horizon themes?
Only if the app has native Horizon support. Horizon themes use web components and Shadow DOM instead of traditional Liquid sections and form inputs. Apps built for older themes will not detect the variant selector or gallery. Rubik Variant Images includes dedicated Horizon code that handles web component communication, Shadow DOM rendering, and the gallery API.
Does Rubik support all 10 Horizon collection themes?
Yes. Both Rubik Variant Images and Rubik Combined Listings support every Horizon collection theme: Vessel, Dwell, Tinker, Atelier, Savor, Fabric, Heritage, Ritual, Pitch, and the base Horizon theme. The app detects which theme you are using and loads the correct module automatically.
Can I switch between Horizon themes without reconfiguring?
Yes. Your variant image assignments, swatch settings, and product groups all carry over when you switch themes. The app detects the new theme and loads the appropriate rendering code on the next page load. No manual reconfiguration needed.
What is Shadow DOM and why does it matter for swatches?
Shadow DOM is a browser feature that isolates a component’s HTML and CSS from the rest of the page. Horizon themes use Shadow DOM for product galleries and variant pickers. Rubik renders its swatches inside Shadow DOM containers too, which means theme CSS cannot accidentally break swatch styles and swatch CSS cannot interfere with the theme. The result is consistent rendering regardless of theme customizations.
Do Rubik apps affect store speed on Horizon themes?
Rubik loads a lightweight script that activates only on pages where it is needed. On Horizon themes, the app uses the theme’s own web component lifecycle to inject swatches, which avoids layout shifts and heavy DOM manipulation. Read our swatch apps and store speed performance post for benchmark data.
