Swatch styles and layouts
A style controls how a group looks. Each group uses one style on product pages and, if you turn them on, one on product cards. Styles are shared: editing a style changes every group that uses it.
Where to find styles
Go to Appearance/Style in the app menu. The Option styles page lists your styles. Switch between Product page and Product card at the top.
Click Customize to open the style editor, with a live preview. Under Available Presets, click Add to create a style you don't have yet.
In a group, pick a style under Appearance on Product Page or Appearance on Product Card. On a saved group, the Edit link next to it opens the style editor.
Style types
| Style | Product page | Product card | Shows |
|---|---|---|---|
| Swatch | Yes | No | Each product's own display type |
| Swatch: Color | Yes | Yes | A color fill |
| Swatch: Image | Yes | Yes | An image |
| Swatch: Circle Color | Yes | Yes | A round color fill |
| Swatch: Polaroid | Yes | No | An image with the value and price below |
| Dropdown/Select | Yes | Yes | A dropdown list |
| Button | Yes | No | Text buttons |
| Slider | Yes | No | A slider with ticks |
Colors, two colors and images
Set these for each product in the group's product list.
- Display Type: Color, Custom Image, Product Image or Text only. This choice appears when the style uses Use Product Display Type (recommended), the default for Swatch.
- Color 1 and Color 2: set one color for a solid swatch. Set both for a two-color swatch, split down the middle.
- Custom Image: upload an image for the swatch. Leave it blank to use the product image.
- Image alt text: the alt text for the swatch image.
Swatch: Color and Swatch: Circle Color always show colors. Swatch: Image and Swatch: Polaroid always show images.
Layout
In swatch styles, Options Display Type sets the layout:
- Grid: swatches in a grid. A Show More button appears after your limit.
- Swipeable: one horizontal row. Arrows appear only when the swatches don't fit.
- Slideout Panel: a grid with a Show More button that opens a drawer with all options.
Under Show More Items, set a separate Limit for desktop and mobile, and what the button does: Show More, Show more & hide or Go to Product Page. Align sets left, center or right.
The Option section sets swatch Size, Corners (Square, Circle, Rounded), Aspect Ratio and Image Fit.
Product page and product card styles
Product card styles start smaller: the label is hidden, swatches are 26px, they sit on one swipeable row, and Show More appears after 5. In card swatch styles, value text and badges are always off. For a multi-option group, product cards show only the first option.
Labels
The Label section controls the text above the swatches.
- Hide removes the label.
- Structure sets the text. Use
{{TYPENAME}}for the option name and{{VALUE}}for the selected value. The default is{{TYPENAME}}: {{VALUE}}. Basic tags like<b></b>and<u></u>work. - Space Above Label and Space Below Label set the spacing.
- Show hovered value in label: "While hovering an option, the label shows that option's value instead of the selected one." Available in swatch and Button styles.
In the Option section, Show value shows each option's value with the swatch, and Value Position sets where. Value Type shows either the Group Option Value or the Product Title.
Sold-out products
- Swatch styles, in Sold Out / Unavailable: Hidden, Faded Only, Crossed Out, Faded & Crossed Out or Do nothing.
- Dropdown/Select, under Sold Out: Faded Only, Crossed Out Horizontal or Do nothing.
- Button: Hide, Cross Out, Disable, Cross Out & Disable or Do Nothing. You can also fade them and pick a Diagonal or Line Through cross-out line.
Prices
Swatch: Polaroid shows each product's price with its swatch. Turn it off with Show price. Other swatch styles don't show prices.
When a product's variants have different prices, When variant prices differ sets what shows:
| Option | Shows |
|---|---|
| Show lowest price (default) | The lowest variant price |
| Show price range | The lowest and highest price, like $19.00 – $23.00 |
| Hide all prices | No prices. This hides every price in the group. |
Badges
In product page swatch styles, turn on Enable badge in the Badge section, then set each product's Badge text in the group's product list.
Edit a style with AI
The Starter plan ($4.95) includes an AI style assistant with 100 credits.
- Open a style with Customize or Edit.
- Click Ask AI to edit at the top of the editor.
- Describe the change, like "make the swatches round", in up to 600 characters.
- The assistant changes the settings and the preview updates. Use Undo to reverse a change.
- Click Save to keep the changes.
Each reply uses one credit, or more for a large request. The panel shows your credits left.
