← Back to documentation
Introduction
Visual settings let you customize the appearance of your combined listings swatches.
You can configure different styles for each display context:
- Product page (Desktop) - Swatches shown on product pages for desktop visitors
- Product page (Mobile) - Swatches shown on product pages for mobile visitors
- Product card (Desktop) - Swatches shown on collection pages for desktop visitors
- Product card (Mobile) - Swatches shown on collection pages for mobile visitors
Accessing visual settings
Visual settings are configured per product group. To access them:
- Go to Product groups in the app
- Create a new group or edit an existing one
- Scroll down to the Visual settings section
- Use the Desktop/Mobile toggle to switch between device variants
- Click Customize under each context (Product page or Product card) to expand the settings panel
Actions menu
The Actions menu provides quick access to common operations. Click the Actions button to reveal these options:
| Action |
Description |
| Copy desktop settings to mobile |
Duplicates all desktop settings to mobile variants. Useful when you want similar styling on both devices. The label changes based on which device tab is active. |
| Reset to defaults |
Restores all visual settings to their original default values. This affects all four variants. |
| Export visual settings |
Downloads your current visual settings as a JSON file. Use this to backup your settings or share them with other product groups. |
| Import visual settings |
Loads previously exported settings from a JSON file. Paste the JSON content into the modal and click Import. |
Core settings
These settings appear at the top of each context panel and determine the fundamental swatch behavior.
Swatch type
| Option |
Description |
| Image |
Visual swatches with product images, color swatches, or custom images. Supports labels and prices below each swatch. |
| Button |
Text-based buttons with optional images. Good for size options or variants where text labels are more important. |
| Dropdown |
A native select dropdown. Takes minimal space and is useful when there are many options. |
Image source
Available for Image swatches and Button swatches (when "Show image" is enabled).
| Option |
Description |
| Default |
Uses the swatch image you configured when setting up the product group |
| First product image |
Automatically uses the first image from each linked product |
| Second product image |
Uses the second image from each linked product (falls back to first if unavailable) |
| Last product image |
Uses the last image from each linked product |
| Custom image |
Uses the custom image you uploaded for each swatch |
| One color |
Displays the primary color you configured for each swatch |
| Two colors |
Displays a diagonal split of primary and secondary colors |
Layout
Available for Image and Button swatch types.
| Option |
Description |
| Grid |
Swatches wrap to multiple rows as needed. Supports limiting to one row and max visible count. |
| Carousel |
Swatches display in a horizontal scrollable carousel with optional navigation arrows. |
Image swatch settings
These settings are available when swatch type is set to Image.
Size & style
| Setting |
Description |
| Width |
The width of each swatch in pixels (20-200px) |
| Corner radius |
How rounded the swatch corners are (0-100px) |
| Spacing |
Gap between swatches (0-50px) |
| Vertical padding |
Top and bottom padding around the swatch grid (0-20px) |
| Horizontal padding |
Left and right padding around the swatch grid (0-20px) |
| Grid alignment |
Horizontal alignment of swatches: Left, Center, or Right |
| Height ratio |
Aspect ratio of the image area. 1 = square, <1 = wide, >1 = tall |
| Image fit |
"Fill (may crop)" or "Fit (show all)" - how the image fits within the swatch |
| Image background |
Background color behind the image (visible when image doesn't fill the area) |
| Info background |
Background color of the label/price area below the image |
| Text align |
Alignment of label and price text: Left, Center, or Right |
Visibility
| Setting |
Description |
| Show name |
Display the swatch label below each swatch |
| Show price |
Display the product price below each swatch |
| Show group title |
Display the option name (e.g., "Color:") above the swatches |
| Show selected value |
Display the selected swatch name next to the group title |
| Show category headers |
Display category names when swatches are organized into categories |
| Limit to one row |
Only show swatches that fit in a single row (Grid layout only) |
| Max visible |
Maximum number of swatches to display, 0 = show all (Grid layout only) |
Carousel
Available when Layout is set to Carousel.
| Setting |
Description |
| Spacing |
Gap between carousel items (0-50px) |
| Show arrows |
Display navigation arrows on either side of the carousel |
| Arrow size |
Size of navigation buttons (10-50px) |
| Arrow roundness |
How round the arrow buttons are (0-50%) |
| Blur |
Background blur effect behind arrows (0-20px) |
Typography
Group title
| Setting |
Description |
| Spacing below title |
Gap between the group title and swatches (0-32px) |
| Font size |
Size of the group title text (10-24px) |
| Font weight |
Weight of the group title text (400-700) |
| Color |
Color of the group title text |
Swatch name
Visible when "Show name" is enabled.
| Setting |
Description |
| Font size |
Size of the swatch label text (6-18px) |
| Font weight |
Weight of the swatch label text (400-700) |
| Max rows |
Maximum number of text lines before truncation (1-3) |
| Color |
Color of the swatch label text |
Price
Visible when "Show price" is enabled.
| Setting |
Description |
| Font size |
Size of the price text (6-18px) |
| Font weight |
Weight of the price text (400-700) |
| Color |
Color of the price text |
| Gap between name and price |
Space between the swatch name and price (0-16px) |
Borders
| Setting |
Description |
| Width |
Border thickness (0-10px) |
| Default color |
Border color for unselected swatches |
| Selected color |
Border color when a swatch is selected |
| Offset |
Gap between the swatch content and its border (0-5px) |
| Offset color |
Color of the offset gap area |
Sold out styling
| Setting |
Description |
| Opacity |
How faded out-of-stock swatches appear (0.1-1) |
| Show strikethrough |
Display a diagonal line across out-of-stock swatches |
| Line color |
Color of the strikethrough line |
| Line opacity |
Transparency of the strikethrough line (0.1-1) |
Spacing
| Setting |
Description |
| Top |
Margin above the swatch container (0-50px) |
| Bottom |
Margin below the swatch container (0-50px) |
| Left |
Margin to the left of the swatch container (0-50px) |
| Right |
Margin to the right of the swatch container (0-50px) |
| Between categories |
Vertical space between category groups (0-50px) |
| Container vertical padding |
Top and bottom inner padding of the swatch container (0-20px) |
| Container horizontal padding |
Left and right inner padding of the swatch container (0-20px) |
Button swatch settings
These settings are available when swatch type is set to Button.
Button appearance
| Setting |
Description |
| Selection style |
"Border" highlights with a border color, "Fill" inverts the background and text colors when selected |
| Fill color |
Background color when selected (Fill style only) |
| Fill text color |
Text color when selected (Fill style only) |
| Corner radius |
How rounded the button corners are (0-50px) |
| Border width |
Border thickness (0-5px) |
| Border color |
Default border color |
| Selected border |
Border color when selected (Border style only) |
| Background |
Default background color |
| Hover background |
Background color on hover |
| Text color |
Default text color |
| Font size |
Size of button text (8-32px) |
| Vertical padding |
Top and bottom padding inside the button (0-30px) |
| Horizontal padding |
Left and right padding inside the button (0-40px) |
| Spacing |
Gap between buttons (0-50px) |
| Vertical padding |
Top and bottom padding around buttons (0-20px) |
| Horizontal padding |
Left and right padding around buttons (0-20px) |
| Grid alignment |
Horizontal alignment: Left, Center, or Right |
Image options
| Setting |
Description |
| Show image |
Display an image inside the button |
| Image size |
Size of the image (16-64px) |
| Image roundness |
How round the image is, 50 = circle (0-50px) |
| Image fit |
"Fill (may crop)" or "Fit (show all)" |
| Image background |
Background color behind the image |
Price options
| Setting |
Description |
| Show price |
Display the price inside the button |
| Price font size |
Size of the price text (6-18px) |
| Price font weight |
Weight of the price text (400-700) |
| Price color |
Color of the price text |
| Gap between name and price |
Space between label and price (0-16px) |
| Text alignment |
Alignment of text content: Left, Center, or Right |
Visibility
| Setting |
Description |
| Show group title |
Display the option name above the buttons |
| Show selected value |
Display the selected button name next to the group title |
| Show category headers |
Display category names when buttons are organized into categories |
| Limit to one row |
Only show buttons that fit in a single row (Grid layout only) |
| Max visible |
Maximum number of buttons to display (Grid layout only) |
Carousel, Typography, Sold out styling, Spacing
Button swatches have the same Carousel, Typography (group title only), Sold out styling, and Spacing settings as Image swatches. See the corresponding sections above.
Dropdown swatch settings
These settings are available when swatch type is set to Dropdown.
Dropdown appearance
| Setting |
Description |
| Width |
Dropdown width: Full width, Auto (fit content), 200px, 250px, or 300px |
| Corner radius |
How rounded the dropdown corners are (0-50px) |
| Background |
Background color of the dropdown |
| Text color |
Color of the dropdown text |
| Font size |
Size of the dropdown text (8-32px) |
| Vertical padding |
Top and bottom padding inside the dropdown (0-30px) |
| Horizontal padding |
Left and right padding inside the dropdown (0-40px) |
Visibility
| Setting |
Description |
| Show group title |
Display the option name above the dropdown |
| Show selected value |
Display the selected option name next to the group title |
| Show category headers |
Display category names as option groups in the dropdown |
Typography, Spacing
Dropdown swatches have the same Typography (group title only) and Spacing settings as Image swatches. See the corresponding sections above.
Custom CSS
Each swatch type includes a Custom CSS (advanced) section at the bottom of the settings panel.
This allows you to override default styles using CSS variables.
For a complete reference of all available CSS variables, see the Custom CSS Reference.
Tips
- Start with presets: Use the preset selector to quickly apply pre-configured styles, then customize from there.
- Test on both devices: Always check your settings on both desktop and mobile using the device toggle.
- Use the preview: The live preview at the top of the page updates as you change settings.
- Export your settings: Before making major changes, export your current settings as a backup.
- Reset when needed: Use the Reset button to restore individual contexts, or Reset to defaults in the Actions menu for all settings.
