Use this page to customise how variant option styles, such as buttons and swatches, appear on your storefront. A clear and visually consistent variant selector helps customers choose products more easily. The page is divided into two tabs:
Product page: It lists the styles you can use for options on the product page.Collection page: This section lists the styles you can use for the options on the collection page.
You can switch between both using the tabs at the top of the page.
In the Your styles section, you will see all the pre-built styles for both the product page and collection page options. You can add or remove styles from this section. A style must be added to this section before it can be used for any option on the Product page settings or Collection page settings pages. You can keep up to 20 styles in the Your styles section at a time for each page type.
Understanding the style card
You can click on the Active status to see all the options where the style is applied. The star icon denotes the default style.
Adding more styles to Your styles section
Swatch KING includes 23 pre-built product page styles that can be added and customised to match your storefront design. For this, go to the bottom of the page and click View more Browse between the required Swatch, Dropdown or Button-based styles and click on Add button to add to Your styles.
Renaming or removing styles from Your styles section
You might want to rename the styles in some cases. This can be done by clicking on the three dots on the styles card. You will also find the action to remove the style from Your styles section here.
Managing default styles for options
A default style[Button] is applied to options when you have installed the application and for all the new options you add in the products. This style can be changed in the Customise styles page. Click on Mange default styles and select any of the 6 styles. Default styles are text based only to prevent blank swatches incase you have not assigned images to variants.
All Product page styles and their customisations.
Swatch styles
Swatch in box
Swatch in box
Displays variants as image or color swatches inside individual boxes. This style is ideal when you want customers to see variant images, names, and pricing information at a glance.
Best used for
Color options with variant images
Fashion and apparel products
Stores that want to display variant names and prices together
Available customizations
Selected Box
Customize how the currently selected variant appears.
You can adjust:
Box border color
Swatch border color
Box background color
Variant name color
Price color
Unselected Box
Customize the appearance of variants that have not been selected.
You can adjust:
Box border color
Swatch border color
Box background color
Variant name color
Price color
Hover Settings
Control how swatches appear when customers hover over them.
You can adjust:
Box border color
Swatch border color
Box background color
Variant name color
Price color
Hover animation
Image Settings
Customize how variant images appear within each swatch.
You can adjust:
Image fit mode
Image position
Swatch Style Settings
Control the appearance of the swatch image itself.
You can adjust:
Swatch width
Swatch height
Swatch border radius
Swatch border thickness
Box Style Settings
Control the layout and spacing of each variant box.
You can adjust:
Space above swatch
Horizontal spacing around swatches
Space below variant information
Box border radius
Box border thickness
Space between boxes
Variant Info Settings
Customize the variant details displayed below the swatch.
You can adjust:
Variant name font size
Variant name font style
Variant name font weight
Spacing below variant name
Show or hide pricing
Price font size
Spacing above price
Out of Stock Settings
Control how unavailable variants are displayed.
Available options:
No change
Strike-out
Grey-out
Do not show
Label Settings
Display promotional or informational labels on swatches.
You can adjust:
Show or hide labels
Label font size
Label style
Label font weight
Show selected option name inside label
Space between label and swatch
Slider Settings
Configure how swatches behave when a large number of variants are available.
You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Additional notes
Supports both Image and Color swatches.
Supports variant pricing display.
Supports promotional labels such as Sale, New, or Stock out labels.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Swatch circle in square
Swatch circle in square
Displays circular image or color swatches inside square containers. This style provides a structured layout while maintaining the visual appeal of circular swatches.
Best used for
Color options with variant images
Fashion and apparel products
Stores that prefer a clean grid-based swatch layout
Available customizations
Selected Swatch
Customize the appearance of the currently selected swatch.
You can adjust:
Outer border color
Inner border color
Unselected Swatch
Customize the appearance of swatches that have not been selected.
You can adjust:
Outer border color
Inner border color
Hover Settings
Control how swatches appear when customers hover over them.
You can adjust:
Outer border color
Inner border color
Zoom image on hover
Swatch hover effect:
No effect
Increase size
Add shadow
Image Settings
Customize how images appear inside the swatches.
You can adjust:
Image fit mode
Image position
Background fill color
Style Settings
Control the size, spacing, and shape of the swatches.
You can adjust:
Swatch height
Swatch width
Minimum space between swatches
Outer border thickness
Inner border thickness
Outer border radius
Inner border radius
Space between borders
Tool Tip Settings
Display additional information when customers hover over a swatch.
You can adjust:
Show tooltip on hover
Tooltip background color
Tooltip font color
Tooltip font size
Label Settings
Display labels such as Sale, New, or custom labels on swatches.
You can adjust:
Label font size
Label style
Label font weight
Show selected option name within label
Space between label and swatch
Slider Settings
Configure how swatches behave when a large number of variants are available.
You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed.
Available options:
No change
Small cross
Cross-out
Grey-out
Do not show
Badge Settings
Control the display of status badges on swatches.
You can adjust:
Badge style
Show or hide Sold Out badge
Show or hide Sale badge
Additional notes
Supports both Image and Color swatches.
Displays variants in a compact grid layout.
Supports tooltips, badges, and labels.
Supports slider navigation for products with many variants.
Sold Out and Sale badges can be managed separately.
Live preview updates automatically as you customize the style.
Swatch in button
Swatch in button
Displays swatches embedded inside button-style containers, showing a small image or color swatch alongside the variant name as a label. This style combines visual swatch previews with readable text, making it easy for customers to identify variants at a glance.
Best used for
Products with descriptive variant names (e.g. pattern or print names)
Fashion and apparel products
Stores that want a clean, list-style variant selector with image context
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Text color
Button border color
Swatch border color
Background color
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Text color
Button border color
Swatch border color
Background color
Hover Settings
Control how buttons appear when customers hover over them. You can adjust:
Text color
Button border color
Swatch border color
Background color
Animation
Zoom image on hover
Image Settings
Customize how images appear inside the swatch thumbnail. You can adjust:
Image position
Style Settings
Control the size, spacing, and shape of the buttons and swatches. You can adjust:
Button size
Swatch size
Font size
Font style
Space between buttons
Button border thickness
Swatch border thickness
Button radius
Swatch radius
Label Settings
Display labels such as Sale, New, or custom labels on swatches. You can adjust:
Label font size
Label style
Label font weight
Show selected option name within label
Space between label and button
Slider Settings
Configure how buttons behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Supports both Image and Color swatches.
Displays variant name as text alongside a small swatch thumbnail within each button.
Supports tooltips, badges, and labels.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Small swatch in dropdown
Small swatch in dropdown
Displays a compact dropdown selector with a small swatch thumbnail alongside the variant name and price. This style keeps the product page clean and uncluttered by tucking all variant options inside a collapsible dropdown, while still giving customers a visual preview of each variant.
Preview:
Best used for
Beauty and cosmetics stores with a large number of shades or finishes
Electronics and mobile stores offering multiple storage, color, or model variants
Any product with a high variant count where displaying all options at once would overwhelm the page
Available customizations
Swatch Style
Customize the appearance of the small swatch thumbnail shown inside the dropdown. You can adjust:
Size
Border radius
Border thickness
Image position
Image fit
Space before swatch
Space after swatch
Dropdown Style
Control the size, shape, and typography of the dropdown selector. You can adjust:
Height
Display width
Border thickness
Border radius
Font size
Font style
Icon position
Color Settings
Customize the colors of the dropdown selector in its default state. You can adjust:
Text color
Background color
Swatch border color
Box border color
Box border on hover
Box border after selection
List Color Settings
Customize the colors of the options displayed inside the dropdown list. You can adjust:
Text color
Background color
Swatch border color
Box border color
Text on hover
Background on hover
Swatch border on hover
Icon Settings
Control the appearance of the dropdown toggle icon. You can adjust:
Icon position
Icon style
Icon color
Icon size
Label Settings
Display labels such as Sale, New, or custom labels on swatches. You can adjust:
Label size
Label style
Label weight
Space between label and dropdown
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Grey-out
Strike-out
Do not show
Price Settings
Display pricing information alongside each variant in the dropdown. You can adjust:
Show price
Font size
Font weight
Color
Alignment
Left & right space
Top & bottom space
Additional notes
Supports both Image and Color swatches.
Ideal for products with a high variant count, keeping the page layout clean and distraction-free.
Each dropdown option displays a small swatch thumbnail alongside the variant name and price, helping customers make informed choices without leaving the page.
Out of stock variants can be hidden or visually distinguished to reduce customer confusion.
Price display per variant helps customers compare options directly within the dropdown.
Live preview updates automatically as you customize the style.
Swatch in dropdown
Swatch in dropdown
Displays a collapsible dropdown selector where each option shows a swatch thumbnail alongside the variant name and price in a clean list format. When collapsed, the selected variant's swatch and name are visible within the dropdown trigger itself, giving customers an at-a-glance confirmation of their current selection without expanding the list.
Best used for
Fashion and apparel stores with a large number of color or image variants where displaying all swatches on the page at once would be visually overwhelming
Stores with long, descriptive variant names where the dropdown list format gives each option enough horizontal space to display the full name clearly alongside the swatch thumbnail
Beauty, cosmetics, or home décor stores where customers benefit from seeing a color or image swatch next to the variant name while still keeping the product page compact and uncluttered
Available customizations
Color Settings
Customize the colors of the dropdown selector trigger in its default state. You can adjust:
Text color
Background color
Swatch border color
Box border color
Box border on hover
Box border after selection
List Color Settings
Customize the colors of the options displayed inside the expanded dropdown list. You can adjust:
Border color
Text color
Background color
Swatch border color
Text on hover
Background on hover
Swatch border on hover
Dropdown Style
Control the size and shape of the dropdown selector trigger. You can adjust:
Height
Display width
Border thickness
Border radius
Font size
Font style
Icon position
Swatch Style
Customize the appearance of the swatch thumbnail shown inside each dropdown option. You can adjust:
Size
Border radius
Border thickness
Image position
Image fit
Space before swatch
Space after swatch
Icon Settings
Control the appearance of the dropdown toggle icon. You can adjust:
Icon position
Icon style
Icon color
Icon size
Label Settings
Display labels such as Sale, New, or custom labels on the dropdown. You can adjust:
Label size
Label style
Label weight
Space between label and dropdown
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Grey-out
Strike-out
Do not show
Price Settings
Display pricing information alongside each variant inside the dropdown. You can adjust:
Show price
Font size
Font weight
Color
Alignment
Left & right space
Top & bottom space
Additional notes
Supports both Image and Color swatches.
The selected variant's swatch thumbnail is visible within the collapsed dropdown trigger, so customers always have a visual confirmation of their active selection without needing to expand the list.
Each option in the expanded list displays a swatch thumbnail, variant name, and price in a single row, giving customers all the information they need to make a selection in one place.
Particularly effective for products with a high variant count where a grid of swatches would take up too much page space.
Out of stock variants can be hidden or visually distinguished to reduce customer confusion.
Price display per variant helps customers compare options directly within the dropdown list.
Live preview updates automatically as you customize the style.
Square swatch with icon
Square swatch with icon
Displays image or color swatches in a square format with an icon overlay on the selected swatch, providing a clear and immediate visual confirmation of the customer's current selection. The check icon or circle icon on the active swatch makes the selected state unmistakable, which is especially useful when swatches are displayed in a dense grid.
Best used for
Fashion and apparel stores with a large number of color or image variants displayed in a compact grid, where a clear selection indicator prevents confusion about which variant is active
Stores selling paint, fabric, tiles, or material swatches where solid color squares fill the entire swatch and a border alone may not provide enough contrast to indicate selection
Any product page where multiple similar-looking variants are shown side by side and a prominent icon confirmation improves the customer experience
Available customizations
Selected Swatch
Customize the appearance of the currently selected swatch. You can adjust:
Outer border color
Inner border color
Unselected Swatch
Customize the appearance of swatches that have not been selected. You can adjust:
Outer border color
Inner border color
Hover Settings
Control how swatches appear when customers hover over them. You can adjust:
Outer border color
Inner border color
Zoom image on hover
Swatch hover effect:
No effect
Increase size
Add shadow
Image Settings
Customize how images appear inside the swatches. You can adjust:
Image fit mode
Image position
Background fill color
Style Settings
Control the size, spacing, icon style, and border appearance of the swatches. You can adjust:
Height
Width
Minimum space between swatches
Outer border thickness
Inner border thickness
Outer border radius
Inner border radius
Space between borders
Check icon style:
Check icon
Circle icon
Icon size
Show icon border
Icon border color
Tool Tip Settings
Display additional information when customers hover over a swatch. You can adjust:
Show tooltip on hover
Tooltip background color
Tooltip font color
Tooltip font size
Label Settings
Display labels such as Sale, New, or custom labels on swatches. You can adjust:
Label font size
Label style
Label font weight
Show selected option name with label
Space between label and swatch
Slider Settings
Configure how swatches behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Grey-out
Do not show
Badge Settings
Control the display of status badges on swatches. You can adjust:
Badge style
Show or hide Sold Out badge
Show or hide Sale badge
Additional notes
Supports both Image and Color swatches.
The icon overlay on the selected swatch — either a check icon or a circle icon — provides a strong, unambiguous selection indicator that works particularly well on dense grids of similar-looking variants.
Icon border can be toggled on or off and styled independently for additional visual control.
Supports tooltips, badges, and labels for additional variant information.
Sold Out and Sale badges can be managed separately and are displayed prominently on the swatch.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Circular swatch with icon
Circular swatch with icon
Displays image or color swatches in a circular format with an icon overlay on the selected swatch, combining the soft, modern appeal of circular swatches with a clear and prominent selection indicator. The check icon on the active swatch ensures customers always know which variant they have selected, even in a dense grid of similar-looking circular swatches.
Best used for
Beauty and cosmetics stores displaying a large palette of color shades in a circular format where a bold check icon removes any ambiguity about the selected shade
Fashion and lifestyle stores that already use a circular swatch style and want to add a stronger, more accessible selection confirmation for customers
Any product page with many visually similar circular swatches displayed close together, where a border alone may not be sufficient to clearly communicate the selected state
Available customizations
Selected Swatch
Customize the appearance of the currently selected swatch. You can adjust:
Outer border color
Inner border color
Unselected Swatch
Customize the appearance of swatches that have not been selected. You can adjust:
Outer border color
Inner border color
Hover Settings
Control how swatches appear when customers hover over them. You can adjust:
Outer border color
Inner border color
Zoom image on hover
Swatch hover effect:
No effect
Increase size
Add shadow
Image Settings
Customize how images appear inside the swatches. You can adjust:
Image fit mode
Image position
Background fill color
Style Settings
Control the size, spacing, icon style, and border appearance of the swatches. You can adjust:
Height
Width
Minimum space between swatches
Outer border thickness
Inner border thickness
Outer border radius
Inner border radius
Space between borders
Select icon style
Icon size
Show icon border
Icon border color
Tool Tip Settings
Display additional information when customers hover over a swatch. You can adjust:
Show tooltip on hover
Tooltip background color
Tooltip font color
Tooltip font size
Label Settings
Display labels such as Sale, New, or custom labels on swatches. You can adjust:
Label font size
Label style
Label font weight
Show selected option name with label
Space between label and swatch
Slider Settings
Configure how swatches behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Grey-out
Do not show
Badge Settings
Control the display of status badges on swatches. You can adjust:
Show or hide Sold Out badge
Show or hide Sale badge
Additional notes
Supports both Image and Color swatches.
The circular shape clips swatch images and colors into a round format, while the icon overlay on the selected swatch provides a strong, unambiguous confirmation of the active selection.
Icon border can be toggled on or off and styled independently for additional visual control.
Particularly effective for dense grids of color swatches where circular shapes alone may make it harder to distinguish the selected state at a glance.
Supports tooltips, badges, and labels for additional variant information.
Sold Out and Sale badges can be managed separately and are displayed prominently on the swatch.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Circular swatch
Circular swatch
Displays image or color swatches in a circular format, creating a soft and visually appealing variant selector. The round shape gives the product page a modern, polished look while keeping the focus on the visual representation of each variant.
Best used for
Fashion and apparel stores showcasing product images or colors in a compact, elegant format
Beauty and lifestyle brands where a softer, rounded aesthetic aligns with the store's visual identity
Products with distinct visual variants such as prints, patterns, or colors where circular thumbnails create an attractive grid-style selector
Available customizations
Selected Swatch
Customize the appearance of the currently selected swatch. You can adjust:
Outer border color
Inner border color
Unselected Swatch
Customize the appearance of swatches that have not been selected. You can adjust:
Outer border color
Inner border color
Hover Settings
Control how swatches appear when customers hover over them. You can adjust:
Outer border color
Inner border color
Zoom image on hover
Swatch hover effect:
No effect
Increase size
Add shadow
Image Settings
Customize how images appear inside the swatches. You can adjust:
Image fit mode
Image position
Background fill color
Style Settings
Control the size, spacing, and border appearance of the swatches. You can adjust:
Height
Width
Minimum space between swatches
Outer border thickness
Inner border thickness
Outer border radius
Inner border radius
Space between borders
Tool Tip Settings
Display additional information when customers hover over a swatch. You can adjust:
Show tooltip on hover
Tooltip background color
Tooltip font color
Tooltip font size
Label Settings
Display labels such as Sale, New, or custom labels on swatches. You can adjust:
Label font size
Label style
Label font weight
Show selected option name with label
Space between label and swatch
Slider Settings
Configure how swatches behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Small cross
Cross-out
Grey-out
Do not show
Badge Settings
Control the display of status badges on swatches. You can adjust:
Show or hide Sold Out badge
Show or hide Sale badge
Additional notes
Supports both Image and Color swatches.
The circular shape clips swatch images into a round format, making the selector visually compact and elegant.
Supports tooltips, badges, and labels for additional variant information.
Sold Out and Sale badges can be managed separately.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Polaroid swatch
Polaroid swatch
Displays variant swatches as large image cards with the variant name and price shown below each image, resembling a polaroid photo layout. This style turns the variant selector into a rich visual shopping experience, allowing customers to browse variants almost like a mini product catalogue directly on the product page.
Best used for
Fashion and apparel stores where seeing the full product image per variant strongly influences purchase decisions
Products with visually distinct variants such as prints, patterns, or colors where a larger image preview helps customers choose confidently
Stores that want to surface variant-level pricing directly on the swatch, reducing friction before add to cart
Available customizations
Selected Box
Customize the appearance of the currently selected swatch card. You can adjust:
Border color
Divider color
Variant info background color
Variant name color
Price color
Unselected Box
Customize the appearance of swatch cards that have not been selected. You can adjust:
Border color
Divider color
Variant info background color
Variant name color
Price color
Hover Settings
Control how swatch cards appear when customers hover over them. You can adjust:
Border color
Divider color
Variant info background color
Variant name color
Price color
Animation:
No change
Add shadow
Box Style Settings
Control the size, shape, and structure of the swatch cards. You can adjust:
Box width
Swatch height
Space above/below variant info
Box border radius
Box border thickness
Divider thickness
Space between boxes
Variant Info Settings
Control how variant name and pricing information is displayed below the swatch image. You can adjust:
Alignment
Variant name font size
Variant name font style
Variant name font weight
Space left/right of variant info
Show price
Price font size
Space above price
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Strike-out
Grey-out
Do not show
Label Settings
Display labels such as Sale, New, or custom labels on swatch cards. You can adjust:
Show label
Label font size
Label style
Label font weight
Show selected option name with label
Space between label and swatch
Slider Settings
Configure how swatch cards behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Badge Settings
Control the display of status badges on swatch cards. You can adjust:
Badge style
Show or hide Sold Out badge
Show or hide Sale badge
Additional notes
Supports both Image and Color swatches.
Each swatch card displays a large product image alongside the variant name and price, creating a catalogue-style browsing experience.
Variant-level pricing is displayed directly on each card, helping customers compare options at a glance.
Sold Out and Sale badges can be managed separately and are displayed prominently on the image.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Square swatch
Square swatch
Displays image or color swatches in a clean square format, offering a structured and uniform grid layout that works equally well for product images and solid color variants. The straight edges give the selector a precise, organized appearance that fits naturally into a wide range of store designs.
Best used for
Fashion and apparel stores showcasing product images where a square crop presents the variant clearly and consistently
Stores selling color or material variants such as paints, fabrics, or finishes where a square swatch accurately represents the option
Any store that prefers a neat, grid-based variant selector with a more structured look compared to circular or polaroid styles
Available customizations
Selected Swatch
Customize the appearance of the currently selected swatch. You can adjust:
Outer border color
Inner border color
Unselected Swatch
Customize the appearance of swatches that have not been selected. You can adjust:
Outer border color
Inner border color
Hover Settings
Control how swatches appear when customers hover over them. You can adjust:
Outer border color
Inner border color
Zoom image on hover
Swatch hover effect:
No effect
Increase size
Add shadow
Image Settings
Customize how images appear inside the swatches. You can adjust:
Image fit mode
Image position
Background fill color
Style Settings
Control the size, spacing, and border appearance of the swatches. You can adjust:
Height
Width
Minimum space between swatches
Outer border thickness
Inner border thickness
Outer border radius
Inner border radius
Space between borders
Tool Tip Settings
Display additional information when customers hover over a swatch. You can adjust:
Show tooltip on hover
Tooltip background color
Tooltip font color
Tooltip font size
Label Settings
Display labels such as Sale, New, or custom labels on swatches. You can adjust:
Label font size
Label style
Label font weight
Show selected option name with label
Space between label and swatch
Slider Settings
Configure how swatches behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Small cross
Cross-out
Grey-out
Do not show
Badge Settings
Control the display of status badges on swatches. You can adjust:
Badge style
Show or hide Sold Out badge
Show or hide Sale badge
Additional notes
Supports both Image and Color swatches.
The square format works particularly well for color and material swatches where the full surface area helps customers accurately assess the variant.
Supports tooltips, badges, and labels for additional variant information.
Sold Out and Sale badges can be managed separately and are displayed prominently on the swatch.
Supports slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Swatch in pill
Swatch in pill
Displays swatches embedded inside rounded pill-shaped buttons, combining a small circular swatch thumbnail with the variant name in a single soft, modern selector. This style blends visual color or image cues with readable text, all wrapped in a friendly pill shape that suits contemporary store designs.
Best used for
Color variant selectors where customers benefit from seeing both the color swatch and the color name together
Fashion, beauty, and lifestyle stores with a modern, rounded design aesthetic
Products where variant names paired with a visual cue reduce confusion, such as color collections, material options, or print names
Available customizations
Selected Button
Customize the appearance of the currently selected pill button. You can adjust:
Text color
Price color
Button border color
Swatch border color
Background color
Unselected Button
Customize the appearance of pill buttons that have not been selected. You can adjust:
Text color
Price color
Button border color
Swatch border color
Background color
Hover Settings
Control how pill buttons appear when customers hover over them. You can adjust:
Text color
Price color
Button border color
Swatch border color
Background color
Animation:
No change
Add shadow
Zoom image on hover
Image Settings
Customize how images appear inside the swatch thumbnail. You can adjust:
Image position
Style Settings
Control the size, spacing, and typography of the pill buttons. You can adjust:
Swatch size
Button padding
Font size
Font style
Space between buttons
Button border thickness
Swatch border thickness
Button radius
Swatch radius
Price Settings
Display pricing information alongside each variant inside the pill button. You can adjust:
Show price
Font size
Font weight
Space above price
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and button
Slider Settings
Configure how pill buttons behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Supports both Image and Color swatches.
Each pill button displays a small circular swatch thumbnail alongside the variant name, giving customers both a visual and textual cue in a single compact element.
Optional price display per variant helps customers compare options without leaving the product page.
The fully rounded pill shape makes this style a natural fit for stores with a soft, modern aesthetic.
Supports labels and slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Dropdown styles
Dropdown
Dropdown
Displays variant options inside a clean collapsible dropdown selector, showing the selected variant name and price in a single compact row. This is a simple, space-efficient style that keeps the product page uncluttered while giving customers a familiar and straightforward way to select variants.
Preview:
Best used for
Products with a large number of variants where displaying all options at once would take up too much page space
Stores with a minimal design where a compact, native-feeling selector fits better than a grid of buttons or swatches
Non-visual variants such as sizes, quantities, or configurations where customers do not need an image preview to make a selection
Available customizations
Color Settings
Customize the colors of the dropdown selector in its default state. You can adjust:
Text color
Background color
Box border color
Box border on hover
Box border after selection
List Color Settings
Customize the colors of the options displayed inside the dropdown list. You can adjust:
Border color
Text color
Background color
Text on hover
Background on hover
Style Settings
Control the size and shape of the dropdown selector. You can adjust:
Height
Width
Minimum width (when width is set to Auto)
Space before text
Border thickness
Border radius
Icon Settings
Control the appearance of the dropdown toggle icon. You can adjust:
Icon position
Icon style
Icon color
Icon size
Option Value Settings
Control the typography of the variant options displayed inside the dropdown list. You can adjust:
Font size
Font style
Font weight
Label Settings
Display labels such as Sale, New, or custom labels on the dropdown. You can adjust:
Show label
Font size
Font style
Font weight
Show dropdown inline with label
Space between label and dropdown
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Grey-out
Strike-out
Do not show
Price Settings
Display pricing information alongside the selected variant in the dropdown. You can adjust:
Show price
Font size
Font weight
Color
Alignment
Left & right space
Top & bottom space
Additional notes
Designed for text-based variants only — no image or color swatch thumbnail is displayed.
The selected variant name and price are shown inline within the dropdown trigger, giving customers an at-a-glance summary of their current selection.
A space-efficient choice for products with many variants or stores that prefer a minimal product page layout.
Out of stock variants can be hidden or visually distinguished to reduce customer confusion.
Price display per variant helps customers compare options directly within the dropdown.
Live preview updates automatically as you customize the style.
Dropdown with label
Dropdown with label
Displays a collapsible dropdown selector with the option label and selected variant value shown together inline within the dropdown box, alongside the variant price. Unlike a standard dropdown, the option name acts as a persistent label inside the selector itself — for example, "Size: Extra small" — giving customers immediate context about what they are selecting without needing to read a separate label above.
Best used for
Products with multiple option types such as size, color, and fit where showing the option label inline removes ambiguity about what each dropdown controls
Stores that prefer a single-row, label-inclusive selector that keeps the product page compact and well-organized
Any store where clarity of selection context matters, particularly when multiple dropdowns appear on the same product page
Available customizations
Color Settings
Customize the colors of the dropdown selector in its default state. You can adjust:
Option label color
Option value color
Box border color
Background color
Box border on hover
Box border after selection
Option label on hover color
List Color Settings
Customize the colors of the options displayed inside the dropdown list. You can adjust:
Border color
Text color
Background color
Text on hover
Background on hover
Style Settings
Control the size and structure of the dropdown selector. You can adjust:
Height
Separator type
Space before option label
Space after separator
Width
Minimum width (when width is set to Auto)
Border thickness
Border radius
Icon Settings
Control the appearance of the dropdown toggle icon. You can adjust:
Icon style
Icon color
Icon position
Icon size
Option Value Settings
Control the typography of the variant options displayed inside the dropdown list. You can adjust:
Font size
Font style
Font weight
Label Settings
Control the appearance of the option label displayed inside the dropdown selector. You can adjust:
Font size
Font style
Font weight
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Grey-out
Strike-out
Do not show
Price Settings
Display pricing information alongside the selected variant inside the dropdown. You can adjust:
Show price
Font size
Font weight
Color
Alignment
Left & right space
Top & bottom space
Additional notes
Designed for text-based variants only — no image or color swatch thumbnail is displayed.
The option label is displayed persistently inside the dropdown box alongside the selected value, for example "Size: Extra small", eliminating the need for a separate label above the selector.
Particularly useful on product pages with multiple dropdown selectors, where inline labels prevent customer confusion about which option each dropdown controls.
Price display per variant helps customers compare options directly within the dropdown.
Out of stock variants can be hidden or visually distinguished to reduce customer confusion.
Live preview updates automatically as you customize the style.
Button styles
Text-only button
Text-only button
Displays variant options as plain text buttons with an underline indicator, showing the variant name without any swatch thumbnail. This style keeps the selector minimal and typography-focused, letting the variant names speak for themselves.
Best used for
Size variants such as XS, S, M, L, XL where no visual swatch is needed
Stores with a minimal or editorial design aesthetic that prioritize clean typography over imagery
Products where the variant name alone is sufficient for customers to make a selection, such as sizing, fit, or pack quantity
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Text color
Underline color
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Text color
Underline color
Hover Settings
Control how buttons appear when customers hover over them. You can adjust:
Text color
Underline color
Style Settings
Control the size, spacing, and underline appearance of the buttons. You can adjust:
Space between buttons
Underline thickness
Underline position
Font size
Font style
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name within label
Space between label and buttons
Slider Settings
Configure how buttons behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Do not show
Additional notes
Designed for text-based variants only — no image or color swatch thumbnail is displayed.
The selected variant is highlighted with a distinct text and underline color for clear visual feedback.
Works best for short variant names; supports both short and long text previews.
Supports labels and slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Button pills
Button pills
Displays variant options as rounded pill-shaped text buttons, giving the selector a soft, modern look. The fully rounded edges create a friendly and contemporary feel while keeping the focus on the variant name.
Best used for
Size variants such as XS, S, M, L, XL where a clean, modern selector is preferred
Stores with a soft, rounded design aesthetic such as beauty, wellness, or lifestyle brands
Products with short, readable variant names where the pill shape enhances the visual hierarchy without overwhelming the page
Available customizations
Selected Button
Customize the appearance of the currently selected pill button. You can adjust:
Text color
Border color
Background color
Animation
Unselected Button
Customize the appearance of pill buttons that have not been selected. You can adjust:
Text color
Border color
Background color
Hover Settings
Control how pill buttons appear when customers hover over them. You can adjust:
Text color
Border color
Background color
Animation:
No effect
Increase size
Add shadow
Add glow
Style Settings
Control the size, spacing, and typography of the pill buttons. You can adjust:
Minimum width
Width type
Width (when width type is fixed)
Top & bottom space
Right & left space
Font size
Space between buttons
Border thickness
Border radius
Font style:
Default
Lowercase
Uppercase
Capitalize
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name within label
Space between label and buttons
Slider Settings
Configure how buttons behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants only — no image or color swatch thumbnail is displayed.
The fully rounded pill shape gives the selector a modern, approachable look suitable for a wide range of store aesthetics.
Supports both short and long text previews for variant names.
Hover animations including size increase, shadow, and glow effects allow for additional interactivity.
Supports labels and slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Button
Button
Displays variant options as clean rectangular text buttons with a solid fill on the selected state. This is one of the most straightforward and widely used styles, offering a no-fuss, universally familiar selector that fits seamlessly into any store design.
Best used for
Size variants where customers are accustomed to selecting from clearly labelled rectangular buttons
Stores with a minimal, professional, or neutral design aesthetic where simplicity and clarity are the priority
Any product type — from clothing sizes to storage capacities — where a clean, distraction-free selector helps customers make quick decisions
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Text color
Border color
Background color
Animation:
No effect
Increase size
Add shadow
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Text color
Border color
Background color
Hover Settings
Control how buttons appear when customers hover over them. You can adjust:
Text color
Border color
Background color
Animation:
No effect
Increase size
Add shadow
Style Settings
Control the size, spacing, and typography of the buttons. You can adjust:
Minimum width
Width type
Width (when width type is fixed)
Top & bottom space
Right & left space
Font size
Space between buttons
Border thickness
Border radius
Font style:
Default
Lowercase
Uppercase
Capitalize
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and buttons
Slider Settings
Configure how buttons behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants only — no image or color swatch thumbnail is displayed.
The solid filled selected state gives customers an immediate, unambiguous indication of their current selection.
Works well for both short variant names such as XS, S, M and longer names such as Extra Small, Double Extra Large.
Supports both short and long text previews for variant names.
Hover animations including size increase and shadow effects allow for additional interactivity.
Supports labels and slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Small button
Small button
Displays variant options as compact rectangular text buttons with uppercase lettering, offering a tight, space-efficient selector that keeps the product page neat and organized. The minimal footprint and clean typographic style make this a go-to choice for stores that want a sharp, structured look without taking up too much page real estate.
Best used for
Size variants where abbreviated labels such as XS, S, M, L, XL are the norm and a compact button fits naturally
Stores with a high-fashion, editorial, or luxury aesthetic where uppercase typography and minimal spacing convey a premium feel
Product pages with multiple option selectors where keeping each selector compact prevents the page from feeling cluttered
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Text color
Border color
Background color
Animation
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Text color
Border color
Background color
Hover Settings
Control how buttons appear when customers hover over them. You can adjust:
Text color
Border color
Background color
Animation
Style Settings
Control the size, spacing, and typography of the buttons. You can adjust:
Minimum width
Width type
Width (when width type is fixed)
Top & bottom space
Right & left space
Font size
Space between buttons
Border thickness
Border radius
Font style:
Default
Lowercase
Uppercase
Capitalize
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and buttons
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants only — no image or color swatch thumbnail is displayed.
The compact size and uppercase font style make this button particularly effective for abbreviated size labels and short variant names.
Works well on product pages with multiple variant option rows where space efficiency matters.
Supports labels for additional variant information.
Live preview updates automatically as you customize the style.
Button with price
Button with price
Great point! Let me update the Best used for section to reflect those real-world use cases. Here is the revised full write-up:
Button with price Displays variant options as rectangular buttons showing both the variant name and its price stacked within the same button. This style gives customers instant pricing visibility per variant directly on the swatch selector, reducing the need to navigate away or add to cart just to check pricing differences between variants.
Best used for
Furniture and home décor stores where different dimensions or sizes carry different price points, allowing customers to compare options without any extra clicks
Frame and art stores offering multiple size variants where the price difference between each size is a key part of the buying decision
Electronics and mobile stores where storage capacities, GPS configurations, or connectivity options are priced differently and need to be clearly communicated upfront
Fashion and accessories stores offering variants at multiple price points where price transparency directly influences which variant a customer selects
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Border color
Variant name color
Price color
Variant name background color
Price background color
Animation:
No effect
Increase size
Add shadow
Add glow
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Border color
Variant name color
Price color
Variant name background color
Price background color
Hover Settings
Control how buttons appear when customers hover over them. You can adjust:
Border color
Variant name color
Price color
Variant name background color
Price background color
Animation:
No effect
Increase size
Add shadow
Add glow
Button Style Settings
Control the size, shape, and spacing of the buttons. You can adjust:
Minimum width
Width type
Width (when width type is fixed)
Top & bottom space
Left & right space
Border thickness
Border radius
Space between buttons
Variant Info Settings
Control how the variant name and price are displayed within each button. You can adjust:
Alignment
Variant name font size
Variant name font style
Variant name font weight
Price font size
Price font weight
Separator Settings
Control the visual divider between the variant name and price within the button. You can adjust:
Separator thickness
Separator top & bottom space
Separator color
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Font size
Font style
Font weight
Show selected option value with label
Space between label and buttons
Slider Settings
Configure how buttons behave when a large number of variants are available. You can adjust:
Enable or disable slider mode
Slider layout
Arrow style
Arrow size
Last swatch preview behavior
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants — no image or color swatch thumbnail is displayed.
Each button displays the variant name and its price as two distinct stacked elements separated by a visual divider, making price differences between variants immediately scannable.
Variant name and price sections can be styled independently with separate background and text colors for clear visual hierarchy within the button.
Particularly effective for stores where pricing varies significantly across variants, as it removes the need for customers to select a variant just to see its price.
Hover animations including size increase, shadow, and glow effects allow for additional interactivity.
Supports labels and slider navigation for products with many variants.
Live preview updates automatically as you customize the style.
Connected button
Connected button
Displays variant options as rectangular buttons joined seamlessly together in a single connected row, with no gaps between them and shared borders creating a unified, cohesive selector. This style gives the variant selector a polished, premium feel that is widely recognised from high-end electronics and tech retail experiences.
Best used for
Electronics and tech stores offering storage, memory, or model variants where a connected button row feels native and familiar to customers, similar to the selection experience on leading device retail sites
Stores with a premium or minimal design aesthetic where a sleek, borderless joined selector communicates quality and attention to detail
Products with a small, clearly defined set of variants such as sizes, capacities, or configurations where a compact connected row fits neatly without wrapping
Merchants who want a distinctive, modern alternative to standard spaced-out buttons that draws subtle attention to the variant selector
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Variant color
Price color
Border color
Background color
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Variant color
Price color
Border color
Background color
Hover Button
Control how buttons appear when customers hover over them. You can adjust:
Variant color
Price color
Border color
Background color
Button Style Settings
Control the size and shape of the connected buttons. You can adjust:
Width type
Fix width (when width type is fixed)
Top & bottom space
Right & left space
Border thickness
Border radius
Variant Settings
Control the typography of the variant name displayed inside each button. You can adjust:
Variant font size
Variant info alignment
Variant font style
Variant font weight
Price Settings
Display pricing information inside each connected button. You can adjust:
Show price
Price font size
Price font weight
Space above price
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and buttons
Slider Settings
Configure how the connected buttons behave when a large number of variants are available. You can adjust:
Arrow size
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants — no image or color swatch thumbnail is displayed.
Buttons are joined edge to edge with shared borders, creating a single cohesive unit rather than a row of individual buttons, giving the selector a refined and intentional look.
Optional price display per variant is stacked below the variant name inside each button, making this style particularly effective for products where variants carry different price points.
The connected layout works best with a small, consistent set of variant names to maintain a clean, unbroken row.
Supports labels for additional variant information.
Slider navigation with arrow controls is available for products with more variants than fit in a single visible row.
Live preview updates automatically as you customize the style.
Full width button
Full width button
Displays variant options as full-width rectangular buttons stretching across the entire width of the selector, with the variant name on the left and the price aligned to the right within the same row. This style creates a clean, list-style selector that is easy to scan and feels familiar to customers accustomed to modern e-commerce checkout-style interfaces.
Best used for
Stores selling products with descriptive variant names and differing prices where a full-width row gives ample space to display both the name and price clearly without truncation
Fashion and apparel stores with long variant names such as print or pattern names that would be clipped inside a compact button
Service-based or subscription products offering different tiers or plans where a full-width list format naturally resembles a pricing table, making comparison straightforward
Any store where accessibility and readability are a priority, as the larger tap and click target of a full-width button improves usability on both mobile and desktop
Available customizations
Selected Button
Customize the appearance of the currently selected button. You can adjust:
Variant color
Price color
Border color
Background color
Unselected Button
Customize the appearance of buttons that have not been selected. You can adjust:
Variant color
Price color
Border color
Background color
Hover Settings
Control how buttons appear when customers hover over them. You can adjust:
Variant color
Price color
Border color
Background color
Animation:
No effect
Increase size
Add shadow
Button Style Settings
Control the size, spacing, and shape of the full-width buttons. You can adjust:
Width type
Fix width (when width type is fixed)
Top & bottom space
Right & left space
Space between buttons
Border thickness
Border radius
Variant Settings
Control the typography of the variant name displayed inside each button. You can adjust:
Variant font size
Variant font style
Variant font weight
Price Settings
Display and control the pricing information shown inside each button. You can adjust:
Price font size
Price font weight
Price display position
Price alignment
Space between variant and price
Label Settings
Display labels such as Sale, New, or custom labels on buttons. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and buttons
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants — no image or color swatch thumbnail is displayed.
The full-width layout gives each variant its own clearly defined row, making it easy for customers to scan and compare options, particularly when variant names are long or prices vary.
Price is displayed inline within the button and can be positioned and aligned independently of the variant name for precise layout control.
The large click and tap target makes this style particularly user-friendly on mobile devices.
Hover animations including size increase and shadow effects allow for additional interactivity.
Supports labels for additional variant information.
Live preview updates automatically as you customize the style.
Radio button (Stacked)
Radio button (Stacked)
Displays variant options as full-width rows with a radio button indicator on the left, the variant name in the center, and the price aligned to the right. This style brings a familiar form-like selection experience to the product page, making it feel intuitive and structured — particularly for customers who are used to selecting options in checkout flows, booking forms, or pricing plan pages.
Best used for
Subscription or service-based stores offering different plans or tiers where a radio button list naturally mirrors the format customers expect when choosing between options
Stores with descriptive variant names and varying prices where a stacked list with clear radio indicators makes scanning and comparing easy
Any product page where accessibility and clarity are a priority, as the radio button pattern is one of the most universally understood selection interfaces across both desktop and mobile
Available customizations
Selected Button
Customize the appearance of the currently selected row. You can adjust:
Text color
Price color
Border color
Background color
Selector icon color
Unselected Button
Customize the appearance of rows that have not been selected. You can adjust:
Text color
Price color
Border color
Background color
Selector icon border color
Hover Settings
Control how rows appear when customers hover over them. You can adjust:
Text color
Price color
Border color
Background color
Selector icon border color
Animation:
No effect
Increase size
Add shadow
Style Settings
Control the size, shape, and layout of the radio button rows. You can adjust:
Width type
Fix width (when width type is fixed)
Top & bottom space
Right & left space
Border thickness
Box border radius
Selector icon type
Selector icon position
Text Settings
Control the typography of the variant name displayed inside each row. You can adjust:
Font size
Font weight
Font style
Price Settings
Display and control the pricing information shown inside each row. You can adjust:
Show price
Font size
Font weight
Display position
Space before price
Label Settings
Display labels such as Sale, New, or custom labels on rows. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and buttons
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants — no image or color swatch thumbnail is displayed.
The radio button indicator provides an immediately recognisable selection pattern that feels native and accessible to a wide range of customers across all devices.
Price is displayed inline within each row and can be positioned independently for precise layout control.
The stacked full-width layout makes this style particularly effective for products with longer variant names or multiple price points that need to be clearly laid out without crowding.
Particularly well suited to stores offering bundles, service tiers, or configurable products where the decision feels more considered and the list format supports that experience.
Supports labels for additional variant information.
Live preview updates automatically as you customize the style.
Radio button (Horizontal)
Radio button (Horizontal)
Displays variant options as individual cards arranged in a horizontal scrollable row, each showing a radio button indicator alongside the variant name and price stacked within the card. This style combines the clarity and familiarity of a radio button selector with a compact card-based layout that scrolls horizontally, making it a space-efficient choice for product pages with multiple variants.
Best used for
Stores offering variants with both a name and a price that need to be visible at once without expanding a dropdown or scrolling through a stacked list
Subscription, bundle, or service-based stores where customers are choosing between a small set of clearly priced options and a horizontal card layout feels lighter and less form-like than a stacked list
Mobile-first stores where a horizontally scrollable row of compact radio cards is an intuitive and thumb-friendly selection experience
Available customizations
Selected Button
Customize the appearance of the currently selected card. You can adjust:
Text color
Price color
Border color
Background color
Selector icon color
Unselected Button
Customize the appearance of cards that have not been selected. You can adjust:
Text color
Price color
Border color
Background color
Selector icon border color
Hover Settings
Control how cards appear when customers hover over them. You can adjust:
Text color
Price color
Border color
Background color
Selector icon border color
Animation:
No effect
Increase size
Add shadow
Style Settings
Control the size, shape, and layout of the radio button cards. You can adjust:
Width type
Fix width (when width type is fixed)
Top & bottom space
Right & left space
Space between buttons
Border thickness
Box border radius
Selector icon type
Selector icon position
Text Settings
Control the typography of the variant name displayed inside each card. You can adjust:
Font size
Font weight
Font style
Price Settings
Display and control the pricing information shown inside each card. You can adjust:
Show price
Font size
Font weight
Display position
Space before price
Label Settings
Display labels such as Sale, New, or custom labels on cards. You can adjust:
Label size
Label style
Label weight
Show selected option name with label
Space between label and buttons
Slider Settings
Configure how cards behave when a large number of variants are available. You can adjust:
Slider layout
Arrow style
Arrow size
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Strike-out
Grey-out
Do not show
Additional notes
Designed for text-based variants — no image or color swatch thumbnail is displayed.
The horizontal layout with slider navigation keeps the product page compact while still allowing customers to browse through all available variants without the page feeling cluttered.
Each card displays the variant name and price stacked vertically, with the radio button indicator providing a clear and familiar selection cue.
The radio button pattern is universally understood, making this style highly accessible across different customer demographics and devices.
Price is displayed below the variant name within each card and can be configured independently for precise layout control.
Supports labels for additional variant information.
Live preview updates automatically as you customize the style.
Radio labels
Radio labels
Displays variant options as inline radio button selectors with the variant name placed directly next to each radio icon, arranged horizontally in a single compact row. This is the most minimal and lightweight radio button style, stripping away cards, borders, and price displays to present a clean, form-style selector that blends naturally into any product page layout.
Best used for
Products with a small number of short variant names where a simple inline radio list is sufficient and a more elaborate selector would feel excessive
Stores with a clean, minimal design aesthetic where native-feeling form elements are preferred over styled buttons or swatches
Non-visual variants such as sizes, fits, or basic color names where customers do not need a thumbnail or price to make their selection
Available customizations
Selected Button
Customize the appearance of the currently selected radio option. You can adjust:
Text color
Selector icon color
Unselected Button
Customize the appearance of radio options that have not been selected. You can adjust:
Text color
Selector icon border color
Hover Settings
Control how radio options appear when customers hover over them. You can adjust:
Text color
Selector icon border color
Style Settings
Control the spacing, icon type, and typography of the radio labels. You can adjust:
Space between buttons
Selector icon type
Font size
Font weight
Font style:
Default
Lowercase
Uppercase
Capitalize
Label Settings
Display labels such as Sale, New, or custom labels on options. You can adjust:
Font size
Label style
Label weight
Show selected option name with label
Label display position
Space between label and buttons
Out of Stock Settings
Control how unavailable variants are displayed. Available options:
No change
Strike-out
Do not show
Additional notes
Designed for text-based variants only — no image, color swatch, or price display is included in this style.
The inline radio label layout is the most compact and unobtrusive radio button style, making it ideal for product pages where the variant selector needs to occupy minimal space.
The familiar radio button pattern is universally understood and requires no learning curve for customers.
Works best with short variant names and a small number of options to keep the horizontal row clean and readable.
Supports labels for additional variant information.
Live preview updates automatically as you customize the style.
All Collection page styles and their customisations.
Swatch styles
Square swatch - Small
Square swatch - Small
Circular swatch - Small
Circular swatch - Small
Circular swatch - Large
Circular swatch - Large
Square swatch - Large
Square swatch - Large
Square swatch with icon - Small
Square swatch with icon - Small
Circular swatch with icon - Small
Circular swatch with icon - Small
Button styles
Circular button
Circular button
Text only button
Text only button
Square button
Square button
Dropdown styles
Dropdown
Dropdown
Dropdown with label
Dropdown with label