Design & Settings

Want your swatches to blend seamlessly with your store's brand identity? In Styling & Settings (Design), you can customize the global look and feel of every swatch style on both Product Pages and Collection Pages, control how out-of-stock variants behave, set up compact sliders or +N counters, and preview every change live before saving.

Follow this quick guide to style your swatches in minutes!

From your Dashboard, click Go to Design in the setup guide (or click Styling & Settings / Design in the left sidebar menu).

1. At the top of the page, choose the context tab you want to style: Product page or Collection page.

2. In the Display type dropdown, select the specific swatch style you want to customize:

   • Product Page (6 styles): Button, Pill swatch, Image swatch, Color swatch, Dropdown, or Swatch with price.

   • Collection Page (5 styles): Button, Pill swatch, Image swatch, Color swatch, or Dropdown.

Each display type saves its own independent styling for Product Pages and Collection Pages!

Use the styling cards on the left while watching the Live preview on the right update in real time:

• Out of stock display: Choose how unavailable variants appear to shoppers:

  • Show normally

  • Cross out (draws a diagonal line across the swatch)

  • Blur out (dims the swatch opacity)

  • Hide (removes unavailable variants from view)

• Typography (for styles with text labels): Adjust Font size (10px–32px) and Font weight (Regular, Medium, Semi-bold, or Bold).

• Swatch size & Spacing:

  • Choose Maintain aspect ratio (1:1 Square, 3:4 Portrait, 4:3 Landscape, or 16:9 Wide) or Custom size to set independent Width and Height (16px–200px).

  • Turn Circle swatch ON for round swatches (available on Image swatch, Color swatch, and Pill swatch).

  • Adjust Gap between swatches (0px–32px) and inner Vertical / Horizontal padding.

• Border & Swatch border: Customize Corner radius (0px–100px), Border width (0px–5px), and inner Padding between swatch and border (0px–10px).

• Color: Set custom colors (including transparency) for Default, Hover, and Active (Selected) states (Background, Text, Border, and Price colors), plus the Out of stock cross-out line color.

Have products with many colors or sizes? In the Overflow card (available for all non-dropdown styles), choose how long rows of swatches are displayed:

• Wrap (multiple lines): Wraps swatches cleanly onto multiple rows.

  • Collection Page Exclusive: Turn ON Limit swatches and set a Limit number (e.g., 4) to display only the first 4 swatches followed by a +N counter button that redirects shoppers to the product page.

• Slider (single line): Keeps swatches in a single horizontal carousel. Configure Items per view (2–15), Navigation (Arrow inside, Arrow outside, or Dots), and arrow button colors/borders.

Switch to the General settings tab at the top to manage storewide swatch behaviors:

• Product page settings:

  • Show selected option value in label (e.g., Color: Navy Blue)

  • Show tooltip on swatch hover

  • Hide native Shopify variant picker (Recommended)

  • Preselect first available variant

• Collection page settings:

  • Center align swatches on collection card

  • Change product card image on swatch hover

  • Show swatch label on collection card

  • Redirect to product page on swatch click

• Advanced settings:

  • Enable smooth transition animation & Enable lazy loading for swatch images

  • Custom CSS: Add custom CSS rules (up to 50,000 characters) for advanced theme-specific styling.

Click Save in the top-right corner to publish your design across your store!

Pro Tip: Want to start fresh on a specific style? Click Reset to default at the bottom of the style editor to restore the default settings for the currently selected context and display type without affecting your other styles.

Need Help? Need custom CSS tweaks to match a custom Shopify theme? Click Chat with us at the bottom right. Our support team is always happy to assist!