How to Customize Swatch (Variant Picker) Style?

Rubik Variant Images & Swatch allows you to fully customize the appearance of your swatch buttons so they match your store’s branding and product page layout.

You can adjust colors, size, shape, spacing, labels, tooltips, and even add custom CSS for complete control.

Swatch Style Customization Options

Rubik Variant Images & Swatch provides a complete set of design tools to customize how your swatches look and behave on your product pages. You can adjust the size, shape, colors, labels, spacing, and behavior of both image or color swatches and pill (text) swatches.

In the Customize appearance panel, you can:

• Change the shape and size of swatches
• Adjust border widths and colors for default and selected states
• Control image fit and swatch height
• Enable or disable tooltips and text labels
• Customize text style, label appearance, and color settings
• Configure pill swatches with custom padding, colors, and fonts
• Adjust spacing between swatches and option groups
• Customize how sold out swatches appear
• Hide or show option names and values
• Apply your own Custom CSS for full visual control

These options let you match the swatch style to your theme design and create a consistent, polished product page experience without editing theme code.

Updated on: 27/11/2025