Customizing Color Swatches in the Momentum Theme

---

Welcome to your guide on managing product colors! The Momentum Theme shows color swatches automatically and makes it easy to align them with your brand guidelines. This guide explains where swatch colors come from and how to fine-tune them.

Overview

Swatch colors are resolved in this order:

1. Shopify color swatches (automatic, recommended) — taken from your product's category metafields (e.g. Color: Gray). No manual setup needed.
2. Color Variant Settings section (optional override) — map individual color names to exact brand shades or photos.
3. Fallback — the variant name itself, if it happens to be a valid CSS color keyword (e.g. "Red").

This order applies to every color style, the two dropdown styles included. Whichever source you decide to work with, the swatches look the same wherever they appear. In the dropdown styles the circle shows both in the open list and next to the selected value on the closed dropdown.

Step-by-Step Guide

1. Set Up Your Product Variants ?️Before editing the visuals, ensure your product data is correctly structured in your Shopify Admin.

• Navigate to the Product Level in your Shopify backend.
• Scroll to the Variants section.
• Ensure you have a "Color" option set up.
• Add your required color names (e.g., Red, Black, Blue, Green*).
• Important — connect the option to the category metafield: click the option (e.g. "Color") in the Variants card, click "No connected source", and select the category metafield. Only a connected option exposes the swatch color to the theme — filling in the Category metafields card alone is not enough. You can tell it worked when the value chips in the Variants card show the same small color dot as in the Category metafields card. (New products: if you set the category first and create the option from the metafield suggestion, it's connected automatically.)
• Save your changes.

Non-English option names (Momentum 1.0.0, August 2026): Your option does not have to be called "Color". The Label field in the Product Option Selector block doubles as the identifier — if a product option's name exactly matches the Color label (e.g. label "Farbe" and option "Farbe"), it is treated as the color option and gets swatches. The same applies to the Size label (e.g. "Größe"). Options named "Color"/"Colour"/"Size" always work regardless of the labels.

2. Choose the Swatch Source ?️Go to Online Store > Themes > Customize > Theme settings > Variant Swatches.

• Shopify color swatches (recommended) — swatch colors come from the category metafields described above. This is the default.
• Variant images — each swatch shows the variant's featured image instead of a flat color.
• None — color options render as plain text buttons, like sizes.

3. Locate the Product Option Selector ⚙️Use the top dropdown menu to navigate to Products > Default Product.

• Find the Product Information section and the Product Option Selector block.
• The labels (buttons/dropdowns) are automatically pulled from the variant names you created in Step 1.
• Swatch size: Two sliders — Swatch size and Swatch size (mobile) (16–60 px) — control how large the color circles render on desktop and mobile independently.
• Swatches per row: Two sliders — Swatches per row and Options per row (mobile) — fix how many swatches sit on one line (on mobile also size pills). 0 keeps the automatic layout. See Swatches per row below.
• Color style option: Six display styles. Note that Color circles text only label shows only the circles, with the selected color name next to the heading (e.g. "Farbe: Grau") instead of text under each swatch.

4. Override Specific Color Shades (optional) ✨The metafield colors are Shopify's standard taxonomy shades. If a shade doesn't match your brand guidelines (e.g., you need a specific "Burgundy" instead of the standard "Red"):

• Open the Color Variant Settings section (in the header group).
• Add a block, set Color name at product to the exact variant value (e.g. "Red"), and pick your exact hex code — or upload a photo/texture instead.
• These overrides always win over the metafield color, so you only need entries for the shades you want to correct.
• Watch the Preview: the swatch on the Product Detail Page (PDP) updates in real-time.

5. Save Your Changes ?

• Once you are happy, click the Save button in the top right corner of the editor.

Pro Tip: If you have specific Hex codes from your brand's style guide, you can paste them directly into the color picker for a 100% accurate match!

---

Swatches on mobile

In the Product Option Selector block, Options alignment (mobile) has two modes: Full width (stretch) and Left.

The setting only affects pills — sizes and other text options, where stretching S / M / L across the row looks deliberate and gives comfortable tap targets. With many sizes (e.g. XS–5XL) Full width wraps into a second row as soon as a pill would get narrower than 60px, so nothing gets squeezed or cut off. For an even split, set Options per row (mobile) (see below), e.g. 6 for six sizes per row.

Colour swatches always line up from the left and wrap, in both modes. A swatch has a fixed size, so stretching cannot make it bigger — it would only push the circles apart. With two colours you would get one circle on the left edge and one on the right with nothing between them, which reads as a layout error rather than a choice.

To make the circles larger, use Swatch size and Swatch size (mobile) instead. The two are independent: changing the desktop value leaves mobile alone, and vice versa. Leave the mobile value at its default and mobile simply follows desktop.

Swatches per row

By default the swatches fill the available width and wrap to the next line when they run out of room. That is fine most of the time, but it leaves the last row wherever the width happens to end it — six colours on a phone can come out as five plus one.

Swatches per row and Options per row (mobile) in the Product Option Selector block let you fix the number instead. 0 keeps the automatic behaviour; any other number lays the swatches out in that many even columns.

Desktop and mobile are set separately, so a row of six on desktop can be three on a phone.

On desktop the setting applies to colour swatches only. On mobile, Options per row (mobile) also applies to size pills and other text options: nine sizes with 6 become an even 6 + 3 instead of one squeezed row.

Circles with the label on the right

The style Color circles text right needs even columns more than the others do, and it now uses them automatically. In a plain wrapping row each swatch is as wide as its own label, so "Grey" and "Bronze" push the next circle to a different offset and the second row starts wherever the first one happened to end — the circles never line up.

With even columns the circles sit in clean vertical lines regardless of how long the colour names are. Set a fixed number per row on top of that if the automatic width is not what you want.

Which option counts as the color

The theme treats an option as the color option when its values carry Shopify swatch data, when its name contains "color" or "colour", or when its name contains one of the names under Theme settings → Variant Swatches → Color option names (comma separated, e.g. color, colour, farbe).

Swatch data needs no setup and works in any language. The names list is for shops that call the option "Farbe" or "Couleur" and do not use swatch data — without it that option would render as plain pills.

On the product page the Label field of the Product Option Selector block keeps working as before: an option with exactly that name is the color option. The checks add up, none replaces another. Product cards run the same detection; see Product Cards under Global Settings for their swatch limit and title settings.

One-row slider

Added in Momentum 1.2.0 (October 2026).

With many colours or sizes, the options can take up several rows. In the Product Option Selector block, the One-row slider settings put them into a single row instead. Customers swipe through it, or use the arrow buttons that appear in the title row.

• Colour swatches (desktop) / Colour swatches (mobile)
• Sizes & other options (desktop) / Sizes & other options (mobile)

Each setting can be Rows (wrap) (the default, as before) or One row (swipe + arrows). A typical setup: colours as one row on mobile, sizes as rows.

How it behaves:

• The arrows only appear when the row is actually wider than the space. With three sizes there are no arrows.
• The selected colour or size is scrolled into view when the page opens, so a colour at the end of the list is never hidden.
• The left arrow is greyed out at the start of the row, the right arrow at the end.
• On a size row with an inline size chart link, the title sits left, the size chart link in the middle and the arrows on the right.
• A soft fade at the edge shows on the side where more options follow.
• The arrows use the same style as the theme's other sliders: an outline circle in the colour scheme's Slider arrow colour, with Slider navigation hover as hover background. They follow the colour scheme of the product section, so a dark scheme gets light arrows automatically.
• Line between title and arrows shows a thin divider between the option title and the arrows. Turn it off for a cleaner title row.

Options per row also works inside a slider: with 6 per row and 7 colours, exactly 6 fill the width and the 7th is reached by swiping or with the arrows.

Show part of the next option (on by default) shows a slice of the next colour or size at the right edge, so customers see right away that the row continues. It works best together with Options per row: 6 per row then shows 6 options plus part of the 7th.

Dropdown on phones only

Added in Momentum 1.2.0 (October 2026).

Size style (mobile) and Other options style (mobile) in the Product Option Selector block show sizes (or other options) as a dropdown on phones only, while desktop keeps the pills. Same as desktop (the default) keeps the current behaviour.

On phones customers get the native picker of their device. Unavailable sizes are marked in the list (e.g. "5XL – Unavailable"). Price, stock, images and the cart update exactly as when tapping a pill. Colours are never turned into a dropdown by this setting; use Color style option for that.

All options except colour as a dropdown

Set both Size style option and Other options style to Dropdown. Every option that is not a colour then shows as a dropdown, while the colour stays as swatches.