• 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:Few 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

• 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

• Swatch Visibility Controls

  These settings control how many swatches are shown and how grouped swatches are displayed on the storefront. (https://storage.crisp.chat/users/helpdesk/website/-/3/a/d/7/3ad7edFew 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.Few 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

• 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

• 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.Few readers