Rubik Variant Images & Swatch

Visual Settings Guide Rubik Variant Images & Swatch

← Back to documentation

Overview

The Swatch Style editor lets you customize the look of your variant swatches without writing any code. All changes are previewed in real time before you save. To open the editor, go to Swatch style in the app.

The settings are organized into six sections: image swatches, pill swatches, option labels, spacing, sold-out styles, and custom CSS.

Image swatch settings

These settings control the appearance of image-based variant swatches, the primary swatch type that displays product images or color fills.

Show tooltips

When enabled, hovering over an image swatch displays a small tooltip with the variant name (e.g., "Black", "Medium"). Tooltips are hidden on mobile devices since hover is not available.

Show text labels

Displays a text label below each image swatch showing the variant name. This is useful when variant images are similar and the text helps distinguish between options.

Text labels are only available when swatch shape is set to Square. If you switch to Rounded or Circle, text labels are automatically disabled.

When text labels are enabled, two additional options appear:

You can also customize the label's text color, background color, and border color using the color pickers that appear below the style selector.

Swatch shape

Controls the border radius of image swatches. Three options are available:

Shape Border radius Description
Square 0 Sharp corners. The only shape that supports text labels below the image.
Rounded 8px Slightly rounded corners for a softer look.
Circle 50% Fully circular swatches. Works best with square images and the "Cover" image fit setting.

Swatch size

Sets the width (and default height) of image swatches. The slider ranges from 20px to 200px, with a default of 70px. Larger values display more image detail but take up more page space.

Swatch height (optional)

By default, swatches are square: the height matches the width. Use this setting to create rectangular swatches by setting a different height (10–120px). Click Reset to return to square proportions.

This is useful when your product images have a landscape or portrait aspect ratio and you want the swatches to reflect that.

Border width (default)

Thickness of the border around unselected image swatches, from 0px (no border) to 5px. Default is 1px.

Border width (selected)

Thickness of the border around the currently selected swatch. Increase this to make the selection indicator more prominent. Default is 1px.

Border color (default)

Color of the border on unselected swatches. Default is a light gray (#e5e5e5). Use a lighter color to make borders subtle, or match your theme's border color for consistency.

Border color (selected)

Color of the border on the selected swatch. Default is dark gray (#333333). This is the primary visual indicator that tells the customer which variant is selected.

Image fit

Controls how the product image fills the swatch area:

Option Behavior
Contain The entire image is visible, scaled down to fit inside the swatch. May leave empty space around the image if aspect ratios don't match. This is the default.
Cover The image fills the entire swatch area, cropping the edges if needed. No empty space, but parts of the image may be hidden. Best for circle swatches.

Image background color

The color shown behind the image. Default is white (#ffffff). This is only visible when using Contain image fit with images that don't fill the full swatch area, or with transparent PNG images.

Pill swatch settings

Pill swatches are text-based buttons used for options like size, material, or any variant without a visual image. They display the variant name as text inside a bordered button.

Pill shape

Controls the corner rounding of pill buttons:

Shape Border radius Description
Square 0 Sharp corners. Default.
Rounded 8px Slightly rounded corners.
Full rounded 50px Capsule/stadium shape with fully rounded ends.

Pill padding

Controls the inner spacing inside pill buttons, split into two sliders:

Increase padding for larger, more touch-friendly buttons. Decrease for a tighter, more compact look.

Pill font size

Text size inside pill buttons, from 10px to 32px. Default is 14px.

Pill minimum width

Ensures all pill buttons have at least this width, from 20px to 120px. Default is 50px. Useful for keeping short labels (like "S", "M", "L") uniform in width.

Border width (default)

Border thickness of unselected pill buttons. Range: 0–5px. Default: 1px.

Border width (selected)

Border thickness of the selected pill button. Range: 0–5px. Default: 1px.

Border color (default)

Border color of unselected pills. Default is light gray (#e5e5e5).

Selected border color

Border color of the selected pill. Default is near-black (#1a1a1a).

Selected background color

Background fill of the selected pill. Default is dark gray (#333333). The selected pill inverts: it gets a dark background with light text to create a strong visual contrast.

Selected text color

Text color inside the selected pill. Default is white (#ffffff). This should contrast well with the selected background color for readability.

Option label settings

The option label appears above the swatches and typically shows the option name and selected value, like "Color: Blue". These settings control its visibility and appearance.

Hide option name

Hides the option name part (e.g., "Color"). The selected value and colon will still show if not separately hidden.

Hide option value

Hides the selected value part (e.g., "Blue"). The option name and colon will still show if not separately hidden.

Hide option colon

Hides the colon separator between the option name and value. Use this when you hide either the name or value to clean up the remaining text.

Hide option label and value

Hides the entire label: option name, colon, and selected value. The swatches still appear but without any text above them. Use this for a minimal, image-only look.

Font size

Text size of the option label, from 12px to 24px. Default is 14px.

Label color

Text color of the option label. Default is dark gray (#333333).

Swatch margins & alignment

These settings control the positioning and spacing of the swatch container on the product page.

Swatch alignment

Horizontal alignment of the swatches within their container:

This also aligns the option label text to match.

Top margin

Space above the swatch container. Range: 0–30px. Default: 5px.

Bottom margin

Space below the swatch container. Range: 0–30px. Default: 5px.

Margin between options

Vertical space between multiple option groups (e.g., between "Color" swatches and "Size" swatches). Range: 0–50px. Default: 10px.

Sold out options

When a variant is sold out or unavailable, the swatch displays a diagonal strike-through line to indicate it cannot be selected. You can customize the color of this line for each swatch type.

Image swatch line color

Color of the diagonal line on sold-out image swatches. Default is medium gray (#666666). Use a darker or more vivid color to make sold-out variants more noticeable.

Pill swatch line color

Color of the diagonal line on sold-out pill swatches. Default is medium gray (#666666).

Custom CSS

For customizations beyond the visual settings, you can write raw CSS in the Custom CSS field. This CSS is injected alongside the generated styles and can override any default value.

See the Custom CSS Reference for a full list of 100+ CSS variables and class selectors.

The custom CSS field has a 4000 character limit. Keep your CSS concise.

Restore defaults

The Restore defaults button in the top-right resets all settings back to their original default values. This includes both the visual settings and the custom CSS field. The reset is not saved until you click Save.

Tips

Related guides

© 2026 Craftshift. All rights reserved.