{
  "generatedAt": "2026-04-07T04:37:40.971Z",
  "items": [
    {
      "id": "product:b3-swatches",
      "type": "product",
      "productSlug": "b3-swatches",
      "title": "B3 Swatches",
      "summary": "Reference docs for configuring B3 Swatches: swatch types, layouts, product overrides, sharing, and storefront behavior.",
      "href": "/software/docs/b3-swatches",
      "badges": [
        {
          "label": "WooCommerce"
        },
        {
          "label": "Storefront",
          "tone": "info"
        },
        {
          "label": "Admin UI",
          "tone": "success"
        }
      ],
      "keywords": [
        "variation swatches",
        "woo swatches",
        "woocommerce swatches",
        "variation chips",
        "swatch plugin",
        "Reference docs for configuring B3 Swatches: swatch types, layouts, product overrides, sharing, and storefront behavior.",
        "B3 Swatches replaces WooCommerce variation dropdowns with visual selectors and gives you control over swatch styling, per-product overrides, shop-loop output, and variation sharing. These docs track the current plugin UI and the storefront behavior it actually ships."
      ]
    },
    {
      "id": "article:b3-swatches:getting-started",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "getting-started",
      "title": "Getting Started",
      "summary": "Install the plugin, enable dropdown conversion, assign swatch data, and verify the first storefront output on a variable product.",
      "href": "/software/docs/b3-swatches/getting-started",
      "badges": [
        {
          "label": "Core"
        }
      ],
      "keywords": [
        "Getting Started",
        "Install the plugin, enable dropdown conversion, assign swatch data, and verify the first storefront output on a variable product.",
        "The fast path is simple: activate B3 Swatches, confirm the admin tabs, assign swatch data to your attribute terms or product overrides, and verify the product page changes from dropdowns to swatches.",
        "setup",
        "install",
        "activation",
        "settings page",
        "auto convert dropdowns",
        "product overrides"
      ]
    },
    {
      "id": "section:b3-swatches:getting-started:install-activate",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "getting-started",
      "title": "Getting Started / Install and activate",
      "summary": "Get the plugin live and confirm it loads in WordPress.",
      "href": "/software/docs/b3-swatches/getting-started#install-activate",
      "badges": [
        {
          "label": "Core"
        }
      ],
      "keywords": [
        "Install and activate",
        "Get the plugin live and confirm it loads in WordPress.",
        "install",
        "activate",
        "plugin"
      ]
    },
    {
      "id": "section:b3-swatches:getting-started:settings-location",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "getting-started",
      "title": "Getting Started / Find the settings",
      "summary": "Use the main settings screen, attribute terms, and product overrides together.",
      "href": "/software/docs/b3-swatches/getting-started#settings-location",
      "badges": [
        {
          "label": "Core"
        }
      ],
      "keywords": [
        "Find the settings",
        "Use the main settings screen, attribute terms, and product overrides together.",
        "settings",
        "tabs",
        "admin"
      ]
    },
    {
      "id": "section:b3-swatches:getting-started:first-storefront-change",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "getting-started",
      "title": "Getting Started / First storefront change",
      "summary": "Turn on conversion and confirm a variable product now renders real swatches.",
      "href": "/software/docs/b3-swatches/getting-started#first-storefront-change",
      "badges": [
        {
          "label": "Core"
        }
      ],
      "keywords": [
        "First storefront change",
        "Turn on conversion and confirm a variable product now renders real swatches.",
        "replace dropdowns",
        "front end",
        "storefront",
        "auto convert"
      ]
    },
    {
      "id": "article:b3-swatches:swatch-types",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "swatch-types",
      "title": "Swatch Types",
      "summary": "Use button, color, image, or number swatches, then add dual-color rendering when an option needs two tones.",
      "href": "/software/docs/b3-swatches/swatch-types",
      "badges": [
        {
          "label": "Core"
        },
        {
          "label": "Overrides",
          "tone": "info"
        }
      ],
      "keywords": [
        "Swatch Types",
        "Use button, color, image, or number swatches, then add dual-color rendering when an option needs two tones.",
        "Swatch type decides what the customer sees for each option: text, color, image, or number. Defaults usually live on the attribute term, and product-level overrides let you change that output for a specific product.",
        "color swatches",
        "image swatches",
        "button swatches",
        "button swatches",
        "number swatches",
        "dual color",
        "product overrides"
      ]
    },
    {
      "id": "section:b3-swatches:swatch-types:core-types",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "swatch-types",
      "title": "Swatch Types / Core swatch types",
      "summary": "Button, color, image, and number swatches cover the main storefront cases.",
      "href": "/software/docs/b3-swatches/swatch-types#core-types",
      "badges": [
        {
          "label": "Core"
        },
        {
          "label": "Overrides",
          "tone": "info"
        }
      ],
      "keywords": [
        "Core swatch types",
        "Button, color, image, and number swatches cover the main storefront cases.",
        "color",
        "button",
        "image",
        "number"
      ]
    },
    {
      "id": "section:b3-swatches:swatch-types:dual-color-support",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "swatch-types",
      "title": "Swatch Types / Dual-color support",
      "summary": "Enable a second color when one option needs to communicate a paired palette.",
      "href": "/software/docs/b3-swatches/swatch-types#dual-color-support",
      "badges": [
        {
          "label": "Core"
        },
        {
          "label": "Overrides",
          "tone": "info"
        }
      ],
      "keywords": [
        "Dual-color support",
        "Enable a second color when one option needs to communicate a paired palette.",
        "dual color",
        "secondary color",
        "gradient"
      ]
    },
    {
      "id": "section:b3-swatches:swatch-types:where-to-configure",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "swatch-types",
      "title": "Swatch Types / Where to configure types",
      "summary": "Set defaults on attribute terms and use product overrides only where a product needs different output.",
      "href": "/software/docs/b3-swatches/swatch-types#where-to-configure",
      "badges": [
        {
          "label": "Core"
        },
        {
          "label": "Overrides",
          "tone": "info"
        }
      ],
      "keywords": [
        "Where to configure types",
        "Set defaults on attribute terms and use product overrides only where a product needs different output.",
        "attribute terms",
        "product overrides",
        "default"
      ]
    },
    {
      "id": "article:b3-swatches:layouts",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "layouts",
      "title": "Layouts Overview",
      "summary": "Choose between wrap, grid, scroll, pill, and slider layouts, then refine selector style, shape, and spacing.",
      "href": "/software/docs/b3-swatches/layouts",
      "badges": [
        {
          "label": "Layouts"
        }
      ],
      "keywords": [
        "Layouts Overview",
        "Choose between wrap, grid, scroll, pill, and slider layouts, then refine selector style, shape, and spacing.",
        "Layout controls how swatches occupy space before color, typography, or motion matter. Start with the browsing pattern you want, then adjust selector style, shape, and padding from there.",
        "wrap layout",
        "grid layout",
        "scroll layout",
        "pill",
        "slider",
        "layout",
        "selector style",
        "shape"
      ]
    },
    {
      "id": "section:b3-swatches:layouts:layout-modes",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "layouts",
      "title": "Layouts Overview / Layout modes",
      "summary": "Each layout mode prioritizes a different kind of browsing behavior.",
      "href": "/software/docs/b3-swatches/layouts#layout-modes",
      "badges": [
        {
          "label": "Layouts"
        }
      ],
      "keywords": [
        "Layout modes",
        "Each layout mode prioritizes a different kind of browsing behavior.",
        "wrap",
        "grid",
        "scroll",
        "pill",
        "slider"
      ]
    },
    {
      "id": "section:b3-swatches:layouts:selector-shape-behavior",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "layouts",
      "title": "Layouts Overview / Selector and shape behavior",
      "summary": "Selector style, shape, and width controls depend on the layout you chose.",
      "href": "/software/docs/b3-swatches/layouts#selector-shape-behavior",
      "badges": [
        {
          "label": "Layouts"
        }
      ],
      "keywords": [
        "Selector and shape behavior",
        "Selector style, shape, and width controls depend on the layout you chose.",
        "selector style",
        "shape",
        "underline",
        "outline"
      ]
    },
    {
      "id": "section:b3-swatches:layouts:choose-layout",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "layouts",
      "title": "Layouts Overview / Choose a layout",
      "summary": "Pick the browsing pattern first, then fine-tune padding and presentation.",
      "href": "/software/docs/b3-swatches/layouts#choose-layout",
      "badges": [
        {
          "label": "Layouts"
        }
      ],
      "keywords": [
        "Choose a layout",
        "Pick the browsing pattern first, then fine-tune padding and presentation.",
        "choose layout",
        "best practice"
      ]
    },
    {
      "id": "article:b3-swatches:labels-and-display",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "labels-and-display",
      "title": "Labels & Display Options",
      "summary": "Control label visibility, clear behavior, image sizing, and how WooCommerce dropdowns are converted into swatches.",
      "href": "/software/docs/b3-swatches/labels-and-display",
      "badges": [
        {
          "label": "Display"
        }
      ],
      "keywords": [
        "Labels & Display Options",
        "Control label visibility, clear behavior, image sizing, and how WooCommerce dropdowns are converted into swatches.",
        "This part of the plugin decides how much text support the swatches keep and how conversion from native WooCommerce selects behaves. It also covers reset behavior and the image size used for image-based swatches.",
        "clear button",
        "clear on reselect",
        "replace dropdowns",
        "show labels",
        "image labels",
        "color labels",
        "attribute image size"
      ]
    },
    {
      "id": "section:b3-swatches:labels-and-display:label-controls",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "labels-and-display",
      "title": "Labels & Display Options / Label controls",
      "summary": "Show or hide labels when the attribute needs text support alongside the swatch.",
      "href": "/software/docs/b3-swatches/labels-and-display#label-controls",
      "badges": [
        {
          "label": "Display"
        }
      ],
      "keywords": [
        "Label controls",
        "Show or hide labels when the attribute needs text support alongside the swatch.",
        "color labels",
        "image labels",
        "hide text"
      ]
    },
    {
      "id": "section:b3-swatches:labels-and-display:selection-reset",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "labels-and-display",
      "title": "Labels & Display Options / Selection reset behavior",
      "summary": "Use the clear button and clear-on-reselect to make selection changes easier to recover from.",
      "href": "/software/docs/b3-swatches/labels-and-display#selection-reset",
      "badges": [
        {
          "label": "Display"
        }
      ],
      "keywords": [
        "Selection reset behavior",
        "Use the clear button and clear-on-reselect to make selection changes easier to recover from.",
        "clear button",
        "clear on reselect"
      ]
    },
    {
      "id": "section:b3-swatches:labels-and-display:dropdown-replacement",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "labels-and-display",
      "title": "Labels & Display Options / Dropdown replacement",
      "summary": "Convert native selectors into swatches while keeping the original form meaning intact.",
      "href": "/software/docs/b3-swatches/labels-and-display#dropdown-replacement",
      "badges": [
        {
          "label": "Display"
        }
      ],
      "keywords": [
        "Dropdown replacement",
        "Convert native selectors into swatches while keeping the original form meaning intact.",
        "replace dropdowns",
        "convert selectors",
        "image size"
      ]
    },
    {
      "id": "article:b3-swatches:variation-chips",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "variation-chips",
      "title": "Variation Chips & Container Styling",
      "summary": "Set the selected-state color, style the swatch wrapper, and tune dual-color cut and gradient behavior.",
      "href": "/software/docs/b3-swatches/variation-chips",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Variation Chips & Container Styling",
        "Set the selected-state color, style the swatch wrapper, and tune dual-color cut and gradient behavior.",
        "Variation chip styling controls how the selector feels on the page. The active state highlights the current option, the wrapper can be given its own surface, and dual-color settings change how paired colors are drawn.",
        "variation chips",
        "container background",
        "selected chip color",
        "dual color",
        "selected color",
        "chip background"
      ]
    },
    {
      "id": "section:b3-swatches:variation-chips:selected-state",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "variation-chips",
      "title": "Variation Chips & Container Styling / Selected state",
      "summary": "Use selected chip color to make the active option obvious without overwhelming the page.",
      "href": "/software/docs/b3-swatches/variation-chips#selected-state",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Selected state",
        "Use selected chip color to make the active option obvious without overwhelming the page.",
        "selected chip color",
        "active state"
      ]
    },
    {
      "id": "section:b3-swatches:variation-chips:container-surface",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "variation-chips",
      "title": "Variation Chips & Container Styling / Container surface",
      "summary": "Adjust the background, border, and radius around the swatch group when it needs more separation.",
      "href": "/software/docs/b3-swatches/variation-chips#container-surface",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Container surface",
        "Adjust the background, border, and radius around the swatch group when it needs more separation.",
        "container background",
        "border",
        "radius"
      ]
    },
    {
      "id": "section:b3-swatches:variation-chips:dual-color-rendering",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "variation-chips",
      "title": "Variation Chips & Container Styling / Dual-color rendering",
      "summary": "Choose the cut direction and blend style for two-tone swatches.",
      "href": "/software/docs/b3-swatches/variation-chips#dual-color-rendering",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Dual-color rendering",
        "Choose the cut direction and blend style for two-tone swatches.",
        "dual color",
        "split color",
        "diagonal",
        "gradient"
      ]
    },
    {
      "id": "article:b3-swatches:typography",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "typography",
      "title": "Typography",
      "summary": "Set font family, size, weight, and color for attribute headings and swatch text, using theme, local, or Google fonts as needed.",
      "href": "/software/docs/b3-swatches/typography",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Typography",
        "Set font family, size, weight, and color for attribute headings and swatch text, using theme, local, or Google fonts as needed.",
        "Typography settings should make the swatches feel native to the product page. Keep heading and swatch text readable first, then decide whether B3 Swatches should inherit your theme fonts or load its own.",
        "fonts",
        "heading font",
        "label font",
        "google fonts",
        "heading typography",
        "label typography",
        "local fonts"
      ]
    },
    {
      "id": "section:b3-swatches:typography:heading-typography",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "typography",
      "title": "Typography / Heading typography",
      "summary": "Adjust heading font family, size, weight, and color for the labels that frame the swatch control.",
      "href": "/software/docs/b3-swatches/typography#heading-typography",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Heading typography",
        "Adjust heading font family, size, weight, and color for the labels that frame the swatch control.",
        "heading typography",
        "heading font"
      ]
    },
    {
      "id": "section:b3-swatches:typography:label-typography",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "typography",
      "title": "Typography / Label typography",
      "summary": "Tune label typography so text remains readable at the chosen swatch size.",
      "href": "/software/docs/b3-swatches/typography#label-typography",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Label typography",
        "Tune label typography so text remains readable at the chosen swatch size.",
        "label typography",
        "label font"
      ]
    },
    {
      "id": "section:b3-swatches:typography:font-management-boundary",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "typography",
      "title": "Typography / Font management boundary",
      "summary": "Treat typography as a presentation layer, not a reason to load duplicate fonts.",
      "href": "/software/docs/b3-swatches/typography#font-management-boundary",
      "badges": [
        {
          "label": "Styling"
        }
      ],
      "keywords": [
        "Font management boundary",
        "Treat typography as a presentation layer, not a reason to load duplicate fonts.",
        "google fonts",
        "font install",
        "local fonts"
      ]
    },
    {
      "id": "article:b3-swatches:tooltips",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "tooltips",
      "title": "Tooltips",
      "summary": "Configure tooltip position, animation, colors, and the mobile disable toggle for term-name hints on hover.",
      "href": "/software/docs/b3-swatches/tooltips",
      "badges": [
        {
          "label": "UX"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Tooltips",
        "Configure tooltip position, animation, colors, and the mobile disable toggle for term-name hints on hover.",
        "Tooltips add a small hover label for swatches that need more context. Keep them quick and readable, and disable them on mobile when the extra tap is not worth it.",
        "tooltip mobile",
        "tooltip colors",
        "tooltip position",
        "fade in",
        "fade out"
      ]
    },
    {
      "id": "section:b3-swatches:tooltips:tooltip-setup",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "tooltips",
      "title": "Tooltips / Tooltip setup",
      "summary": "Enable tooltips and choose a position that stays predictable around your layout.",
      "href": "/software/docs/b3-swatches/tooltips#tooltip-setup",
      "badges": [
        {
          "label": "UX"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Tooltip setup",
        "Enable tooltips and choose a position that stays predictable around your layout.",
        "tooltip position",
        "tooltip animation"
      ]
    },
    {
      "id": "section:b3-swatches:tooltips:tooltip-styling",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "tooltips",
      "title": "Tooltips / Tooltip styling",
      "summary": "Adjust color and typography so tooltip content feels deliberate, not generic.",
      "href": "/software/docs/b3-swatches/tooltips#tooltip-styling",
      "badges": [
        {
          "label": "UX"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Tooltip styling",
        "Adjust color and typography so tooltip content feels deliberate, not generic.",
        "tooltip colors",
        "tooltip typography"
      ]
    },
    {
      "id": "section:b3-swatches:tooltips:tooltip-mobile",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "tooltips",
      "title": "Tooltips / Tooltip behavior on mobile",
      "summary": "Decide whether mobile visitors should keep tooltips or get a cleaner tap-first experience.",
      "href": "/software/docs/b3-swatches/tooltips#tooltip-mobile",
      "badges": [
        {
          "label": "UX"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Tooltip behavior on mobile",
        "Decide whether mobile visitors should keep tooltips or get a cleaner tap-first experience.",
        "disable tooltips on mobile",
        "mobile breakpoint"
      ]
    },
    {
      "id": "article:b3-swatches:animations",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "animations",
      "title": "Animations",
      "summary": "Choose swatch and quantity animation styles, then disable motion on mobile if it adds friction.",
      "href": "/software/docs/b3-swatches/animations",
      "badges": [
        {
          "label": "Motion"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Animations",
        "Choose swatch and quantity animation styles, then disable motion on mobile if it adds friction.",
        "Animation settings add feedback to the selector without changing how the form works. Keep the motion brief and consistent so it confirms interaction instead of slowing the page down.",
        "hover animation",
        "disable animations on mobile",
        "animation type",
        "quantity animation",
        "hover"
      ]
    },
    {
      "id": "section:b3-swatches:animations:swatch-motion",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "animations",
      "title": "Animations / Swatch motion",
      "summary": "Choose the main motion style for hover feedback on swatches and selectors.",
      "href": "/software/docs/b3-swatches/animations#swatch-motion",
      "badges": [
        {
          "label": "Motion"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Swatch motion",
        "Choose the main motion style for hover feedback on swatches and selectors.",
        "animation type",
        "swatch hover"
      ]
    },
    {
      "id": "section:b3-swatches:animations:quantity-motion",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "animations",
      "title": "Animations / Quantity motion",
      "summary": "Quantity controls have their own motion settings and triggers.",
      "href": "/software/docs/b3-swatches/animations#quantity-motion",
      "badges": [
        {
          "label": "Motion"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Quantity motion",
        "Quantity controls have their own motion settings and triggers.",
        "quantity animation",
        "quantity hover",
        "quantity click"
      ]
    },
    {
      "id": "section:b3-swatches:animations:motion-on-mobile",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "animations",
      "title": "Animations / Motion on mobile",
      "summary": "Use mobile animation cutoffs when motion adds more friction than value on touch devices.",
      "href": "/software/docs/b3-swatches/animations#motion-on-mobile",
      "badges": [
        {
          "label": "Motion"
        },
        {
          "label": "Mobile note",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Motion on mobile",
        "Use mobile animation cutoffs when motion adds more friction than value on touch devices.",
        "disable animations on mobile"
      ]
    },
    {
      "id": "article:b3-swatches:quantity-controls",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "quantity-controls",
      "title": "Quantity Controls",
      "summary": "Replace the native quantity field with styled controls, set limits and sizing, and tune stock messaging.",
      "href": "/software/docs/b3-swatches/quantity-controls",
      "badges": [
        {
          "label": "Cart flow"
        }
      ],
      "keywords": [
        "Quantity Controls",
        "Replace the native quantity field with styled controls, set limits and sizing, and tune stock messaging.",
        "The quantity and stock settings let the rest of the product form match the swatch UI. Use them to style the control, constrain values, and show cleaner stock feedback on selection.",
        "custom quantity buttons",
        "stock text",
        "quantity style",
        "quantity limits",
        "out of stock"
      ]
    },
    {
      "id": "section:b3-swatches:quantity-controls:custom-buttons",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "quantity-controls",
      "title": "Quantity Controls / Custom quantity buttons",
      "summary": "Decide whether to replace native quantity controls with the B3 quantity interface.",
      "href": "/software/docs/b3-swatches/quantity-controls#custom-buttons",
      "badges": [
        {
          "label": "Cart flow"
        }
      ],
      "keywords": [
        "Custom quantity buttons",
        "Decide whether to replace native quantity controls with the B3 quantity interface.",
        "use custom quantity buttons",
        "quantity style"
      ]
    },
    {
      "id": "section:b3-swatches:quantity-controls:styling-and-limits",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "quantity-controls",
      "title": "Quantity Controls / Styling and limits",
      "summary": "Configure quantity button style, position, sizing, and allowed values.",
      "href": "/software/docs/b3-swatches/quantity-controls#styling-and-limits",
      "badges": [
        {
          "label": "Cart flow"
        }
      ],
      "keywords": [
        "Styling and limits",
        "Configure quantity button style, position, sizing, and allowed values.",
        "quantity button style",
        "quantity limits"
      ]
    },
    {
      "id": "section:b3-swatches:quantity-controls:stock-feedback",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "quantity-controls",
      "title": "Quantity Controls / Stock feedback",
      "summary": "Use stock text and out-of-stock display rules to keep unavailable choices clear.",
      "href": "/software/docs/b3-swatches/quantity-controls#stock-feedback",
      "badges": [
        {
          "label": "Cart flow"
        }
      ],
      "keywords": [
        "Stock feedback",
        "Use stock text and out-of-stock display rules to keep unavailable choices clear.",
        "stock text",
        "out of stock behavior",
        "blur",
        "cross",
        "hide"
      ]
    },
    {
      "id": "article:b3-swatches:shop-and-archive",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "shop-and-archive",
      "title": "Shop Page",
      "summary": "Enable swatches on the shop loop and understand the lighter archive output the plugin renders there.",
      "href": "/software/docs/b3-swatches/shop-and-archive",
      "badges": [
        {
          "label": "Storefront"
        }
      ],
      "keywords": [
        "Shop Page",
        "Enable swatches on the shop loop and understand the lighter archive output the plugin renders there.",
        "Shop-loop swatches are intentionally lighter than single-product output. When enabled, B3 Swatches adds a compact selector to variable product cards so shoppers can preview options before opening the product.",
        "shop swatches",
        "archive swatches",
        "enable on shop page",
        "shop loop",
        "first attribute"
      ]
    },
    {
      "id": "section:b3-swatches:shop-and-archive:enable-on-shop",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "shop-and-archive",
      "title": "Shop Page / Enable on shop",
      "summary": "Turn on loop output only when product cards still stay readable.",
      "href": "/software/docs/b3-swatches/shop-and-archive#enable-on-shop",
      "badges": [
        {
          "label": "Storefront"
        }
      ],
      "keywords": [
        "Enable on shop",
        "Turn on loop output only when product cards still stay readable.",
        "enable on shop",
        "shop page"
      ]
    },
    {
      "id": "section:b3-swatches:shop-and-archive:archive-output",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "shop-and-archive",
      "title": "Shop Page / Archive output",
      "summary": "The shop loop uses a smaller, simpler swatch renderer than the product page.",
      "href": "/software/docs/b3-swatches/shop-and-archive#archive-output",
      "badges": [
        {
          "label": "Storefront"
        }
      ],
      "keywords": [
        "Archive output",
        "The shop loop uses a smaller, simpler swatch renderer than the product page.",
        "first attribute",
        "variable products",
        "shop loop"
      ]
    },
    {
      "id": "section:b3-swatches:shop-and-archive:keep-cards-clean",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "shop-and-archive",
      "title": "Shop Page / Keep cards clean",
      "summary": "Use the loop view as a quick preview, not a full product form.",
      "href": "/software/docs/b3-swatches/shop-and-archive#keep-cards-clean",
      "badges": [
        {
          "label": "Storefront"
        }
      ],
      "keywords": [
        "Keep cards clean",
        "Use the loop view as a quick preview, not a full product form.",
        "attribute order",
        "card layout",
        "shop swatches"
      ]
    },
    {
      "id": "article:b3-swatches:share-and-variation-urls",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "share-and-variation-urls",
      "title": "Share & Variation URLs",
      "summary": "Generate variation-specific URLs, add the copy button beside add to cart, and style its messaging and icon.",
      "href": "/software/docs/b3-swatches/share-and-variation-urls",
      "badges": [
        {
          "label": "Discovery"
        }
      ],
      "keywords": [
        "Share & Variation URLs",
        "Generate variation-specific URLs, add the copy button beside add to cart, and style its messaging and icon.",
        "This part of the plugin turns a selected variation into a shareable URL. It can auto-generate those links, let you store manual URLs per variation, and add a copy button beside add to cart when the current variation has a valid URL.",
        "share button",
        "variation urls",
        "social share",
        "share button enable",
        "auto generate urls",
        "copy url",
        "manual variation urls"
      ]
    },
    {
      "id": "section:b3-swatches:share-and-variation-urls:variation-urls",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "share-and-variation-urls",
      "title": "Share & Variation URLs / Variation URLs",
      "summary": "Variation URLs keep a product state shareable and easier to return to.",
      "href": "/software/docs/b3-swatches/share-and-variation-urls#variation-urls",
      "badges": [
        {
          "label": "Discovery"
        }
      ],
      "keywords": [
        "Variation URLs",
        "Variation URLs keep a product state shareable and easier to return to.",
        "variation urls",
        "auto generate urls",
        "manual urls"
      ]
    },
    {
      "id": "section:b3-swatches:share-and-variation-urls:product-share-button",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "share-and-variation-urls",
      "title": "Share & Variation URLs / Product share button",
      "summary": "Show the copy button only when the variation URL layer is ready.",
      "href": "/software/docs/b3-swatches/share-and-variation-urls#product-share-button",
      "badges": [
        {
          "label": "Discovery"
        }
      ],
      "keywords": [
        "Product share button",
        "Show the copy button only when the variation URL layer is ready.",
        "share button",
        "share button style"
      ]
    },
    {
      "id": "section:b3-swatches:share-and-variation-urls:share-button-styling",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "share-and-variation-urls",
      "title": "Share & Variation URLs / Share button styling",
      "summary": "Set the button style, size, icon, tooltip, and success message.",
      "href": "/software/docs/b3-swatches/share-and-variation-urls#share-button-styling",
      "badges": [
        {
          "label": "Discovery"
        }
      ],
      "keywords": [
        "Share button styling",
        "Set the button style, size, icon, tooltip, and success message.",
        "share button icon",
        "share button size",
        "success message"
      ]
    },
    {
      "id": "article:b3-swatches:advanced",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "advanced",
      "title": "Advanced",
      "summary": "Set out-of-stock handling, enable dual-color support, and decide whether plugin data is removed on uninstall.",
      "href": "/software/docs/b3-swatches/advanced",
      "badges": [
        {
          "label": "Advanced",
          "tone": "success"
        },
        {
          "label": "Caveats",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Advanced",
        "Set out-of-stock handling, enable dual-color support, and decide whether plugin data is removed on uninstall.",
        "The Advanced tab holds the feature gates and cleanup choices that affect the rest of the plugin. These settings are simple, but they change how swatches render across the storefront and what happens if the plugin is later removed.",
        "out of stock behavior",
        "dual color support",
        "remove on uninstall",
        "out of stock behavior",
        "dual color support",
        "remove on uninstall"
      ]
    },
    {
      "id": "section:b3-swatches:advanced:out-of-stock-handling",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "advanced",
      "title": "Advanced / Out-of-stock handling",
      "summary": "Choose whether unavailable swatches blur, cross out, or disappear.",
      "href": "/software/docs/b3-swatches/advanced#out-of-stock-handling",
      "badges": [
        {
          "label": "Advanced",
          "tone": "success"
        },
        {
          "label": "Caveats",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Out-of-stock handling",
        "Choose whether unavailable swatches blur, cross out, or disappear.",
        "out of stock",
        "blur",
        "cross",
        "hide"
      ]
    },
    {
      "id": "section:b3-swatches:advanced:dual-color-support",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "advanced",
      "title": "Advanced / Dual-color support",
      "summary": "Turn on the second-color system before you configure two-tone terms or overrides.",
      "href": "/software/docs/b3-swatches/advanced#dual-color-support",
      "badges": [
        {
          "label": "Advanced",
          "tone": "success"
        },
        {
          "label": "Caveats",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Dual-color support",
        "Turn on the second-color system before you configure two-tone terms or overrides.",
        "dual color support",
        "secondary color",
        "gradient"
      ]
    },
    {
      "id": "section:b3-swatches:advanced:cleanup-choice",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "advanced",
      "title": "Advanced / Cleanup choice",
      "summary": "Treat uninstall cleanup as a deliberate maintenance decision, not a casual default.",
      "href": "/software/docs/b3-swatches/advanced#cleanup-choice",
      "badges": [
        {
          "label": "Advanced",
          "tone": "success"
        },
        {
          "label": "Caveats",
          "tone": "warning"
        }
      ],
      "keywords": [
        "Cleanup choice",
        "Treat uninstall cleanup as a deliberate maintenance decision, not a casual default.",
        "remove on uninstall"
      ]
    },
    {
      "id": "article:b3-swatches:troubleshooting",
      "type": "article",
      "productSlug": "b3-swatches",
      "articleSlug": "troubleshooting",
      "title": "Troubleshooting",
      "summary": "Diagnose missing swatches, wrong output, shop-loop surprises, and share-button issues with simple symptom-to-check guidance.",
      "href": "/software/docs/b3-swatches/troubleshooting",
      "badges": [
        {
          "label": "Support"
        }
      ],
      "keywords": [
        "Troubleshooting",
        "Diagnose missing swatches, wrong output, shop-loop surprises, and share-button issues with simple symptom-to-check guidance.",
        "Start with the symptom you can see on the page. Most issues come down to one of four causes: dropdown conversion is off, the option has no swatch data, a product override is winning, or a feature such as shop output or sharing has not been fully enabled.",
        "why is this not working",
        "swatches not showing",
        "dropdown still showing",
        "share button missing",
        "tooltips not showing"
      ]
    },
    {
      "id": "section:b3-swatches:troubleshooting:conversion-issues",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "troubleshooting",
      "title": "Troubleshooting / Conversion issues",
      "summary": "Check conversion and product setup first when swatches do not appear at all.",
      "href": "/software/docs/b3-swatches/troubleshooting#conversion-issues",
      "badges": [
        {
          "label": "Support"
        }
      ],
      "keywords": [
        "Conversion issues",
        "Check conversion and product setup first when swatches do not appear at all.",
        "dropdown still showing",
        "auto convert dropdowns",
        "variable product"
      ]
    },
    {
      "id": "section:b3-swatches:troubleshooting:output-issues",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "troubleshooting",
      "title": "Troubleshooting / Output issues",
      "summary": "Check term data and product overrides when the swatch looks wrong or loses text or media.",
      "href": "/software/docs/b3-swatches/troubleshooting#output-issues",
      "badges": [
        {
          "label": "Support"
        }
      ],
      "keywords": [
        "Output issues",
        "Check term data and product overrides when the swatch looks wrong or loses text or media.",
        "tooltips not showing",
        "hide text",
        "product overrides"
      ]
    },
    {
      "id": "section:b3-swatches:troubleshooting:shop-and-share-issues",
      "type": "section",
      "productSlug": "b3-swatches",
      "articleSlug": "troubleshooting",
      "title": "Troubleshooting / Shop and share issues",
      "summary": "Shop-loop and share-button issues usually come from feature prerequisites, not styling.",
      "href": "/software/docs/b3-swatches/troubleshooting#shop-and-share-issues",
      "badges": [
        {
          "label": "Support"
        }
      ],
      "keywords": [
        "Shop and share issues",
        "Shop-loop and share-button issues usually come from feature prerequisites, not styling.",
        "share button missing",
        "enable on shop page",
        "variation urls"
      ]
    }
  ]
}