• Swatch Visibility Controls

  These settings control how many swatches are shown and how grouped swatches are displayed on the storefront. Setting Description Swatch Types Show category headers Displays category labels above grouped swatches All Limit to one row Dynamically restricts swatches to a single visible row Image, Button Max visible Sets the maximum number of visible swatches (0 = show all) Image, Button ![](https://storage.crisp.chat/users/helpdesk/website/-/3/a/d/7/3ad7edFew readers

• Out-of-Stock Behavior

  Out-of-stock behavior is controlled at two levels: global logic in the Settings page and visual styling inside each product group. On the Settings page, you can define how unavailable products behave structurally: Setting Label Description Default Hide "Hide out-of-stock swatches" When enabled, swatches for out-of-stock products are completely hidden Off | Push to end | "Push out-of-stock swatches to the end" | When enabled, unavailable swatches appearFew readers

• Price Display

  Swatches can optionally display product pricing directly inside the component, making it easier for customers to compare options without opening each product. Supported pricing features: Regular price display Compare-at price with strikethrough when the product is on sale Price range indicator, which adds a “+” suffix when the product contains multiple variant prices (for exampleFew readers

• Image Sources

  Visual swatches can use different image sources depending on how you want them to appear. This gives full control over whether swatches show real product images, custom uploads, or color-based previews. Option Description First product image Uses the product’s featured or first image Second product image Uses the second image of the product (falls back to first if unavailable) Last product image Uses the last image of the product | Custom image | Uses the uploadFew readers

• Tooltips

  Tooltips display the swatch label when a customer hovers over a swatch, making it easier to understand each option without enabling visible labels. This feature is controlled globally from Settings: Show tooltips When enabled, a tooltip appears on hover and displays the swatch label text. Tooltips are rendered outside the Shadow DOM as a portal element. This prevents clipping issues caFew readers

• Color Split Directions

  When using the Two colors image source, you can control how the primary and secondary colors are visually divided inside the swatch. Direction Description Vertical Splits colors left and right Horizontal Splits colors top and bottom Diagonal right Diagonal split from top-left to bottom-right Diagonal left Diagonal split from top-right to bottom-leftFew readers

• Multiple Groups per Product

  A single Shopify product can belong to multiple product groups at the same time. This allows you to create layered swatch structures. For example, a product can appear inside both a “Color” group and a separate “Material” or “Style” group, each rendering as its own swatch row on the storefront. When a product is included in more than one group, the Display order setting controls the visual priority. Groups with lower display order numbers are rendered first. This ensures you can decide whicFew readers

• Product Card Image Swap on Hover

  On collection and grid pages, hovering over a swatch inside a product card can temporarily replace the card’s featured image with the hovered product’s image. This creates a live preview effect and helps customers explore different options without opening the product page. This feature is controlled globally from Settings: Change product card image on hover When enabled, hovering over aFew readers

• Swatch Image Resolution

  You can control the image quality used inside visual swatches from the global Settings page. Swatch image resolution Defines the width of images loaded inside swatches, in pixels (100–2000). Higher values load larger images for sharper visuals, while lower values reduce file size and may improve performance. This setting applies to all visual swatches across product pages and productFew readers