Use this page to customize 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 — the styles you can use for options on your product pages
Collection page — the styles you can use for options on your product cards
Switch between them using the tabs at the top of the page.
In the Your styles section you will see every style you have added, for both the product page and the collection page. A style must be added here before it can be assigned to any option on the Product page settings or Collection page settings pages.
You can keep up to 20 styles at a time. That limit is for your whole store, not per page type — your product page styles and collection page styles share the same 20. If you are at the limit, remove a style you are not using before adding another.
Understanding the style card
Click the Active status on any card to see every option that style is applied to. The star icon marks your default style.
Adding more styles
Swatch King includes 23 pre-built product page styles and 12 collection page styles, all of which can be added and customized to match your storefront.
Go to the bottom of the page and click View more. Browse the Swatch, Button and Dropdown styles, then click Add on any style to add it to Your styles.
Renaming or removing a style
Click the three dots on a style card to rename it, or to remove it from Your styles.
Renaming is worth doing if you keep several versions of the same style — "Square swatch" and "Square swatch (large)" are easier to tell apart on the settings pages than two identically named entries.
Managing default styles for options
When you install the app, a default style is applied to every option, and to any new option you add to your products later. The default is Button.
To change it, click Manage default styles on this page and pick one of the 6 available defaults.
Defaults are text-based only. That is deliberate — an image-based default would produce blank swatches on any option where you have not yet assigned images to variants.
All product page styles and their customizations
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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the swatch row. 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
Control the option name displayed alongside the button row. 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
Control the option name displayed alongside 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
Control the option name displayed alongside the button row. 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
Control the option name displayed alongside the button row. 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
Control the option name displayed alongside the button row. 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
Control the option name displayed alongside the button row. 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
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
Control the option name displayed alongside the button row. 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
Control the option name displayed alongside the button row. 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 Control the option name displayed alongside the button row. 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
Control the option name displayed alongside the option row. 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
Control the option name displayed alongside the option row. 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
Control the option name displayed alongside the option row. 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 customizations
Collection page styles are built for product cards rather than product pages. Cards are smaller, sit in a grid, and often hold four to six across a row — so these styles are tighter, and several come in Small and Large so you can match your card size.
Where the swatches sit on the card is not set here. Swatch alignment, swatch position, hover behavior and auto-select live in your theme editor, inside the Swatch King app embed. See [Swatch King] Collection page settings.
Collection swatches need the grid options switched on. If the grid settings in App settings → Page settings are off, none of these styles will appear anywhere on your store.
Swatch styles
Swatch - Circle in square
Swatch - Circle in square
Displays a circular swatch inside a square frame. The frame stays fixed while the circle inside it changes, so the swatch row holds its shape as customers move across the options on a product card.
Best used for
Stores whose product cards use square imagery, so the swatch frames line up with the card edges
Catalogs with many similar tones, where the double border makes the selected option obvious
Grids where a steady, non-shifting swatch row matters more than maximum swatch size
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 Control the option name displayed alongside the swatch row. 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
The outer border radius controls the frame: set it to zero for a hard square, or raise it towards the swatch width to turn the frame into a circle.
Space between borders is what keeps the selected state readable on similar tones — reduce it and dark colors start to look identical.
Keep the total width under roughly 28px on grids four or more products across, or the row will wrap on mobile.
Upload swatch images at about four times the display size so they stay sharp on high-resolution screens.
Out of stock treatment is set separately here and on the product page — configure both.
Square swatch - Small
Square swatch - Small
A compact square swatch. The smallest of the collection swatch styles, built for product cards that need to show several colors without pushing the title and price down.
Best used for
Product cards with a long color range, where a larger swatch would wrap onto a second row
Dense grids of four or more products across on desktop
Stores using a solid color or flat pattern as the swatch, where fine detail is not needed
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 Control the option name displayed alongside the swatch row. 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
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.
Additional notes
Small is the safest default for a four-across grid. Step up to Large only when cards are two or three across.
At this size the tooltip does more work than the swatch itself — leave Show tooltip on hover enabled.
Increase size as the hover effect can make the row jump on small swatches; Add shadow is steadier.
If colors are hard to tell apart at this scale, raise the outer border thickness rather than the swatch size.
Very light colors disappear against a white card — give unselected swatches a visible border.
Circular swatch - Small
Circular swatch - Small
A compact round swatch. The same footprint as Square swatch - Small, with softer edges that suit cards with rounded corners or circular imagery.
Best used for
Themes with rounded product cards, buttons or image corners
Fashion and beauty catalogs where round color dots are the established convention
Long color ranges that need to stay on a single row
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 Control the option name displayed alongside the swatch row. 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
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.
Additional notes
Keep height and width equal — an uneven pair produces an oval, which reads as a mistake rather than a style.
A photographic swatch image is cropped to the circle, so keep the important part of the image centered.
The border radius is already set to produce a circle; you only need to change it for a squircle.
Round swatches need slightly more spacing than square ones to avoid looking crowded.
Cross-out and Small cross both read poorly on a small circle — Grey-out is usually the clearest out of stock treatment here.
Circular swatch - Large
Circular swatch - Large
A larger round swatch. Gives each color enough space to be recognisable straight from the grid, at the cost of how many fit on a row.
Best used for
Product cards two or three across, where there is room to spare
Products where the swatch is a photograph — a fabric, a wood grain, a finish — and detail matters
Short option lists, typically five colors or fewer
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 Control the option name displayed alongside the swatch row. 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: Additional notes
Show or hide Sold Out badge
Show or hide Sale badge
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.
Additional notes
Large swatches are where Zoom image on hover earns its place — a textured swatch is worth a closer look.
Check this style at mobile width before publishing; a row that fits on desktop often wraps on a phone.
With more than six colors, consider a Small style on mobile and Large on desktop rather than forcing one size everywhere.
Upload at about four times the display size — at this scale a low-resolution swatch is obvious.
Give selected and unselected clearly different border colors; on a large swatch a subtle difference gets lost against the image.
Square swatch - Large
Square swatch - Large
A larger square swatch. The most space each color can get while keeping straight edges that line up with the product card.
Best used for
Materials and finishes where the pattern needs to be visible — tile, fabric, wood, stone
Product cards two or three across
Stores whose theme uses square imagery throughout
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 Control the option name displayed alongside the swatch row. 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: Additional notes
Badge style
Show or hide Sold Out badge
Show or hide Sale badge
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.
Additional notes
A small outer border radius of two or three pixels softens the square without making it look round, and usually sits better with modern themes.
Set the image fit mode to cover for patterned images so they fill the square rather than letter-boxing.
Height and width do not have to match — a wider-than-tall swatch can work well for fabric.
More than five or six of these will push the price and title further down the card. Check the whole grid, not one product.
Cross-out reads clearly at this size, which makes it a better out of stock choice here than on the Small variants.
Square swatch with icon - Small
Square swatch with icon - Small
A compact square swatch that marks the selected option with a tick or circle icon, instead of relying on a border change alone.
Best used for
Palettes with many similar tones, where a border change is too subtle to notice on a card
Very dark or very light color ranges, where borders disappear into the swatch itself
Stores that want the selected option obvious at a glance across a whole grid
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 Control the option name displayed alongside the swatch row. 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: Additional notes
Badge style
Show or hide Sold Out badge
Show or hide Sale badge
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.
Additional notes
Out of stock offers three options here rather than five — the cross treatments would collide with the selection icon.
Set the icon color against your swatches, not your theme. A white tick vanishes on a white swatch.
Show icon border is what keeps the tick readable on mid-tone colors; turn it on if your palette is mostly mid-range.
Keep the icon size below about half the swatch width, or it covers the color it is meant to mark.
At Small size a Circle icon usually reads better than a Check icon, which needs more pixels to stay legible.
Circular swatch with icon - Small
Circular swatch with icon - Small
A compact round swatch that marks the selected option with an icon. The round counterpart to Square swatch with icon - Small.
Best used for
Rounded themes that also need an unmistakable selected state
Beauty, cosmetics and paint catalogs with many close shades
Grids where customers scan several cards at once and need to see selections without stopping
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 Control the option name displayed alongside the swatch row. 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: Additional notes
Show or hide Sold Out badge
Show or hide Sale badge
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.
Additional notes
As with the square version, out of stock offers three options rather than five.
A Circle icon inside a circular swatch can read as a second ring rather than a selection — test both icon styles before choosing.
Because the icon already marks the selection, the border difference between selected and unselected can stay subtle.
Keep height and width equal so the icon sits centered.
Use the same icon style on your product pages. A customer who learns the tick on a card expects it on the product.
Button styles
Circular button
Circular button
A round button showing the option value as text rather than as a color or image. Built for short values that need to be read.
Best used for
Short numeric or single-character values such as shoe sizes, capacities or pack counts
Options that cannot be represented by a color or an image
Themes already using round buttons elsewhere on the product card
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 Control the option name displayed alongside the button row. 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: Additional notes
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Round buttons only stay round while the text is short. A two-character value fits; a word turns them into ovals.
Set a minimum width so single-digit and double-digit values produce buttons of the same size.
If your option values are words rather than numbers, use Square button or Text only button instead.
Uppercase font style keeps mixed-case values looking consistent across a grid.
On a product card, four or five of these is the practical limit before the row wraps.
Text only button
Text only button
The option values as plain text with no box around them. The lightest-weight collection style — it adds information to the card without adding visual furniture.
Best used for
Minimal themes where a bordered button would compete with the card design
Longer option values that would look cramped inside a box
Cards already busy with badges, ratings or promotional text
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
Control the option name displayed alongside the button row. 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: Additional notes
No change
Cross-out
Strike-out
Do not show
Additional notes
With no border to carry it, the underline is the only thing marking the selection. Give it a clear color and at least 2px of thickness.
Out of stock offers four options here rather than five. Grey-out is not available, because greyed text against a card is close to invisible.
Strike-out and the selection underline can be confused with each other. If you use Strike-out, make the two colors clearly different.
Space between buttons matters more in this style than any other — too little and the values read as one string.
Keep the font size at or above the card price size, or customers will not register it as interactive.
Square button
Square button
A rectangular button showing the option value as text. The most readable of the collection button styles, and the safest choice for word-length values.
Best used for
Word-length option values such as Small, Medium, Large, Cotton or Oak
Size and material options that belong on the card but cannot be shown as a color
Stores that want the option row to look like part of the theme’s own button set
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 Control the option name displayed alongside the button row. 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: Additional notes
No change
Cross-out
Strike-out
Grey-out
Do not show
Additional notes
Match the border radius to your theme’s Add to cart button and the row will look native rather than added on.
A fixed width type keeps every button the same size regardless of the text; auto lets each one size to its content. Fixed looks tidier in a grid.
Long values will still wrap. If any option runs past about eight characters, check the card at mobile width.
Buttons take more horizontal room than swatches — three or four per row is realistic on a card.
Uppercase is worth using where option values were entered inconsistently in Shopify, since it hides the difference.
Dropdown styles
Dropdown
Dropdown
A compact select control on the product card. Trades visibility for space — the customer sees one value and opens the list to see the rest.
Best used for
Options with a long list of values that no swatch or button row could hold
Cards where vertical space is tight and the option must not push the price down
Secondary options that matter, but not enough to show every value up front
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
Control the option name displayed alongside 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: Additional notes
Show price
Font size
Font weight
Color
Alignment
Left & right space
Top & bottom space
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.
Additional notes
A dropdown hides your options, which is the opposite of why most stores put swatches on collection pages. Use it for Size or Material and keep Color as a swatch.
Box border color after selection is the quickest way to show a customer they have already chosen on that card.
The opened list can extend past the bottom of the card and over the card below. Check it on the last row of a collection page.
Out of stock offers four options here rather than five — there is no cross treatment, since a cross inside a list row is hard to read.
Set a minimum width wide enough for your longest value, or the control will resize as the customer changes selection.
Dropdown with label
Dropdown with label
The same control as Dropdown, with the option name shown inside it — "Size: Medium" rather than just "Medium". Useful when a card carries more than one dropdown.
Best used for
Cards showing two or more dropdowns, where an unlabelled one is ambiguous
Products where the value alone does not say what it is — 38 could be a size or a capacity
Stores that want the card to read as a summary of the configuration
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: Additional notes
Show price
Font size
Font weight
Color
Alignment
Left & right space
Top & bottom space
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.
Additional notes
The label comes from your Shopify option name, so it inherits whatever casing you used there.
Separator type is the character between label and value. A colon is the usual choice, and the spacing settings on either side of it are what stop it looking cramped.
Give the label a lighter color than the value. The value is what the customer is choosing and should carry more weight.
This style needs more width than the plain Dropdown. On a four-across grid it will usually be too tight.
If you already show the option name above the control via Label settings, the in-control label is redundant — use the plain Dropdown instead.
Need help? Our support team is always here. Hit the chat button and we will get you sorted.