# Bolder Storefronts — Components Reference

> Auto-generated on 2026-07-07 from source files.
> Do not edit by hand — run `ruby scripts/generate_docs.rb` to regenerate,
> or push a change to a source file and the GitHub Action will update automatically.
> For headless integration (npm / script-tag wiring), see [headless-reference.md](./headless-reference.md).

## Table of Contents

1. [JavaScript Modules](#javascript-modules)
2. [JavaScript Components](#javascript-components)

## JavaScript Modules

Self-contained feature scripts activated via the `data-module` attribute or imported directly.

### accept_terms

Requires the customer to check a terms-and-conditions checkbox before the cart submit button is enabled.

| Option | Description |
|--------|-------------|
| `termsUrl` | URL to the terms page |
| `message` | Introductory label text |
| `linkText` | Anchor text for the terms link |
| `container` | CSS selector for the cart container |

### add_to_cart_button

Manages the dynamic add-to-cart button state, including quantity increase/decrease controls, stock limit enforcement, volume discount notices, and quote flow support.

| Option | Description |
|--------|-------------|
| `productId` | ID of the product to manage |
| `formSelector` | CSS selector for add_to_cart forms (default: `.add_to_cart`) |

### add_to_cart_loader

Scans the page for product forms marked with `data-add-to-cart` and initialises the appropriate add-to-cart component (button, dynamic variant selector, or options panel) based on each form's data attributes.

| Option | Description |
|--------|-------------|
| `container` | Root element to scan (default: `document.body`) |
| `productItemSelector` | CSS selector for individual product items |

### add_to_cart_with_options

Shows a slide-out drawer or inline panel for products that require variant selection before adding to cart (e.g. products with size or color options). Loads the product form dynamically and handles variant selection and quantity.

| Option | Description |
|--------|-------------|
| `productUrl` | URL to fetch the product options form from |
| `container` | CSS selector or element to render the options panel into |

### animate_number

Smoothly animates a numeric counter from its current value to a new target value with an easing effect. This module is called programmatically via `Bootic.call` rather than configured with options.

### cart_modal

Displays a cart preview modal or slide-out panel when a product is added to the cart. Renders the live cart contents including line items, totals, and a checkout link.

| Option | Description |
|--------|-------------|
| `showOnAdd` | Open the modal automatically after adding a product (default: true) |
| `triggerSelector` | CSS selector for elements that open the cart modal on click |

### cart_quote

Presents a contact form modal so a customer can request a formal quote for the current cart contents instead of placing a direct order.

| Option | Description |
|--------|-------------|
| `formUrl` | URL of the quote request endpoint |
| `triggerSelector` | CSS selector for the button that opens the quote form |

### cart_rules

Exposes shop-configured order requirements to other modules that need to look one up directly — currently just AddToCartButton, which caps a product's quantity stepper against a matching max_units_per_product requirement before it's ever added to the cart. Cart-page validation (disabling checkout, showing which requirements aren't met) is no longer done here: it's now declarative, computed by cart-decorator.js/cart-rules.js (the shared core module) inside cart-table-v3's beforeUpdate() and dynamic_cart_table.js's renderCart(), and rendered directly by the cart-table templates — see cart_action_buttons in cart-table-v3/template.qiq and cart-table/template.qiq.

| Option | Description |
|--------|-------------|
| `requirements` | Shop's configured order requirements (widgets.cart_requirements) |

### cart_slideout


### cart_tracking

Sends cart event data (add, remove, checkout) to the Bootic tracking endpoint for analytics and remarketing purposes. No user-facing options required.

### cart_units

Updates item quantities in the cart in real time via AJAX without a page reload. Attaches increment/decrement controls to quantity inputs and syncs with the cart API. Emits cart update events that other modules (CartModal, CartBadge) can listen to.

### dynamic_cart_buttons

Upgrades static add-to-cart forms to dynamic AJAX buttons that add items without a page reload, updating button state to reflect in-cart status.

| Option | Description |
|--------|-------------|
| `formSelector` | CSS selector for cart forms (default: `.add_to_cart`) |
| `requireDeliverySetup` | Prompt for delivery address before adding (default: false) |

### dynamic_cart_table

Renders and keeps the cart table in sync with live cart state. Handles quantity changes, item removal, promo codes, shipping estimates, and related product suggestions.

| Option | Description |
|--------|-------------|
| `containerId` | ID of the cart table wrapper (default: `dynamic-cart-table`) |
| `showRelated` | Show related product suggestions (default: false) |

### dynamic_prices

Updates displayed prices, comparison prices, and stock status in real time when variant or quantity selections change. Also handles volume discount tier displays.

| Option | Description |
|--------|-------------|
| `productContainer` | CSS selector wrapping each product (default: `.product`) |
| `showComparisonPrice` | Show strikethrough comparison price (default: true) |

### dynamic_quantity_buttons

Adds increase/decrease quantity controls to in-cart item rows, updating totals live via the Cart API without a page reload.

| Option | Description |
|--------|-------------|
| `formSelector` | CSS selector for cart item forms (default: `.add_to_cart`) |

### dynamic_variants

Updates price, availability status, and images in real time when a customer selects a product variant (size, color, etc.). Reads variant data from the product JSON endpoint and applies changes to the surrounding product form without a page reload.

| Option | Description |
|--------|-------------|
| `productId` | The product ID to load variant data for |
| `variantSelector` | CSS selector for the variant option inputs |
| `priceSelector` | CSS selector for the price display element |
| `updateImages` | Swap to the variant's image on selection (default: true) |

### favorites

Lets customers save products to a favourites list, storing them locally or server-side when logged in, and toggles heart/star icons on product cards accordingly. When a logged-in session starts, locally-stored favourites are synced to the server automatically.

| Option | Description |
|--------|-------------|
| `mainContainer` | Products wrapper selector whose children are scanned for product cards (default: `.products`) |
| `requireLogin` | Show a login prompt before saving a favourite when the customer is not logged in (default: true) |

### image_gallery

Initialises a touch-friendly image slideshow (powered by Siema) for product image lists. Supports auto-play, previous/next controls, optional dot navigation, and add-to-cart integration.

| Option | Description |
|--------|-------------|
| `container` | The gallery element to activate |
| `autoplay` | Auto-advance slides (default: false) |
| `autoplayInterval` | Milliseconds between auto-advance steps (default: 7000) |
| `minItems` | Minimum number of slides required before activating the gallery (default: 1) |

### image_zoom

Adds a CSS zoom effect to a product image on hover or touch, loading a higher-resolution version. An optional magnifier mode (WebGL) can be enabled via the `mode` option.

| Option | Description |
|--------|-------------|
| `imageElement` | The img element to make zoomable |
| `bigImage` | URL of the high-resolution image to display when zooming (defaults to the parent anchor's href) |

### notify_restocked

Shows a modal form where customers can subscribe to receive an email notification when an out-of-stock product is restocked. Optionally fetches and displays the product's variant list in the form.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for the trigger button(s) that open the modal (default: `[data-notify-restocked]`) |
| `includeVariants` | Fetch and display a variant selector inside the subscription form (default: false) |

### product_comparison_picker

Lets customers select 2–4 products to compare side by side, rendering a checkbox on each product card and navigating to the comparison page once enough products are chosen. Products of different types cannot be mixed in the same comparison.

| Option | Description |
|--------|-------------|
| `mainContainer` | Products wrapper selector (default: `.products`) |
| `maxComparable` | Maximum number of products that can be selected for comparison (default: 4) |

### product_filters

Handles faceted product filtering: listens for changes on filter form inputs and selects, then submits the form via AJAX and replaces the product list without a full page reload, optionally updating the browser URL.

| Option | Description |
|--------|-------------|
| `formSelector` | CSS selector for the filter form element |
| `resultsContainer` | CSS selector for the element where AJAX results are injected |

### product_images

Manages the main product image viewer: clicking a thumbnail swaps the main image with a fade/spinner transition, and optionally activates zoom on the displayed image.

| Option | Description |
|--------|-------------|
| `mainContainer` | Wrapper selector that contains both the main image and thumbnails (default: `.product-images`) |
| `bigImageContainer` | Selector for the main image anchor element (default: `.main-image`) |
| `thumbSelector` | Selector for thumbnail link elements (default: `.product-image`) |
| `enableZoom` | Enable image zoom; pass `'magnifier'` for WebGL magnifier mode (default: false) |

### product_modal

Opens a product detail page inside a modal overlay when a product link is clicked, keeping the customer on the listing page and setting a URL hash for shareability.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for product links that trigger the modal (default: `.product-link`) |
| `container` | Parent selector used to scope link event delegation (default: document.body) |

### product_promotions

Fetches and displays active promotion details (discount conditions, savings amount, and related product groups) for the products currently in view, updating dynamically as the cart changes.

| Option | Description |
|--------|-------------|
| `container` | Element containing the promotion card markup to scan and initialise |

### products_lists_modal

Opens a modal listing products that qualify for a volume discount or matching bundle, letting customers browse and add items directly from the overlay.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for the trigger elements |
| `matchMethod` | Method used to match products (required) |

### variant_images

Switches the displayed product images when the customer selects a different variant (size, colour, etc.), highlighting images tagged with the chosen variant's ID. Also triggers a click on the matching thumbnail so the main image viewer updates when ProductImages is active.

| Option | Description |
|--------|-------------|
| `container` | Root element to scan for variant inputs and images (default: document.body) |
| `variantsContainer` | CSS selector for the variant inputs wrapper (default: `.cart_variants`) |
| `imageSelector` | CSS selector for product image elements (default: `.product-image`) |

### address_autocomplete

Enhances an address text input with Google Places-powered autocomplete suggestions, auto-filling region and locality fields on selection.

| Option | Description |
|--------|-------------|
| `input` | The address input element |
| `country` | ISO country code to bias results, e.g. `"CL"` |
| `onChange` | Callback receiving the parsed address components |

### address_fields

Populates region and locality `<select>` fields from the delivery API based on the selected country code.

| Option | Description |
|--------|-------------|
| `regionSelect` | The region select element |
| `localitySelect` | The locality select element |
| `countryCode` | ISO country code (default: `"CL"`) |

### auth_delivery

Combines customer authentication and delivery address selection into a single unified flow component, mounting automatically into a managed container.

### choose_branch_modal

Shows a modal listing available store locations so the customer can select a branch for pickup or delivery.

| Option | Description |
|--------|-------------|
| `triggerSelector` | CSS selector for the trigger button |
| `changeBranchMessage` | Heading text inside the modal |

### country_code_inputs


### delivery_setup

Opens a modal that guides the customer through selecting their delivery method (shipping or pickup) and address before adding items to the cart.

| Option | Description |
|--------|-------------|
| `showAutomatically` | Open on first visit (default: false) |
| `triggerSelector` | CSS selector for manual trigger links |

### rut_formatter

Formats and validates Chilean RUT (tax ID) inputs in real time as the customer types, automatically applying dots and a dash in the correct positions.

| Option | Description |
|--------|-------------|
| `inputSelector` | CSS selector for RUT input fields (default: input[data-rut]) |

### shipping_costs

Opens the shipping calculator component in a modal so the customer can estimate shipping costs before checkout.

| Option | Description |
|--------|-------------|
| `triggerSelector` | CSS selector for the "calculate shipping" link |
| `country` | Default country code |

### live_search

Live product search with autocomplete and instant results. Displays matching products, collections, and tags as the user types. Can show product images, prices, SKUs, and inline add-to-cart buttons.

| Option | Description |
|--------|-------------|
| `withImages` | Show product thumbnail in results (default: false) |
| `withPrices` | Show product price in results (default: false) |
| `withSkus` | Show variant SKU in results (default: false) |
| `withAddToCart` | Show add-to-cart button in results (default: false) |
| `showAutocomplete` | Enable autocomplete suggestion above results (default: false) |
| `inputSelector` | CSS selector for the search input element |
| `container` | Where to render the results list |

### beta_mode

Manages beta user mode in the storefront. - Injects a dismissible "Beta" ribbon badge in the top-left corner when beta mode is active. - Wires `data-toggle-beta` elements for toggling beta mode on/off via AJAX. - Shows toast notifications confirming the change.

### bounce

Detects exit-intent behaviour (mouse leaving the viewport towards the top) and invokes a callback, useful for triggering a last-chance offer or modal.

| Option | Description |
|--------|-------------|
| `callback` | Function to call when exit intent is detected |
| `sensitivity` | Vertical pixel threshold for detection (default: 20) |
| `delay` | Milliseconds to wait before activating the listener (default: 0) |
| `cookieDays` | Days to suppress the callback after first trigger (default: 7) |

### countdown_timer

Displays a live countdown to a target date/time, updating days, hours, minutes, and seconds every second. Optionally shows a "finished" message when the countdown reaches zero.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for countdown elements (default: `.countdown`) |
| `container` | Root element to scope selector |
| `time` | ISO date string for the target time, overrides `data-time` attribute |

### link_preview

Shows a floating product-card preview when the customer hovers over a product link, fetching and rendering the product component inline.

| Option | Description |
|--------|-------------|
| `container` | Root element to scan for links |
| `selector` | CSS selector for product links |

### lottie_animations

Loads and plays Lottie JSON animations on page elements, supporting event-triggered playback (hover, click, scroll).

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for animation containers (default: `[data-animation]`) |
| `animateOn` | Trigger event: `"hover"`, `"click"`, or `"scroll"` |

### map

Map integration — embed Leaflet or Google Maps for address input and delivery zone display. Access via: Bootic.call('Map', 'init', opts, callback)

### modal

Modal dialogs — create and manage overlay popups. Access via: Bootic.call('Modal', 'methodName', args, callback)

### notice

Top-of-page notification bar — display and listen for page-level notices. Access via: Bootic.call('Notice', 'methodName', args, callback)

### page_modal

Intercepts clicks on internal page links (collections, pages, tags) and loads the target page inside a modal overlay instead of navigating away.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for intercepted links (default: `[data-page-modal]`) |

### promo_notice

Displays an inline promotion notice (applied discounts and free shipping status) in a designated banner element whenever the cart is updated.

| Option | Description |
|--------|-------------|
| `templateId` | ID of the Liquid template used to render the notice (default: bootic-top-promo-template) |

### promo_toasts

Shows toast notifications when promotions are applied to or removed from the cart, displaying the discount name and amount saved.

### range_slider

Renders a styled price-range slider input for filter forms.

| Option | Description |
|--------|-------------|
| `inputSelector` | CSS selector for the range input elements |
| `min` | Minimum value |
| `max` | Maximum value |

### section_menus

Auto-generates a sticky or inline navigation menu from page `<section>` elements, inserting anchor links into `.bootic-section-menu` placeholders.

| Option | Description |
|--------|-------------|
| `sectionSelector` | CSS selector for sections (default: `section`) |
| `sticky` | Make the menu sticky (default: false) |

### share_button

Activates the browser's native Web Share API on a designated share button, falling back gracefully if the API is unavailable.

| Option | Description |
|--------|-------------|
| `title` | Share title |
| `description` | Share description text |

### spin_wheel

Renders a spin-the-wheel prize game with configurable prize tiers, probabilities, and coupon code rewards.

| Option | Description |
|--------|-------------|
| `items` | Prize items, each with `label`, `probability`, and optional `coupon_code` and `coupon_label` |
| `triggerSelector` | CSS selector for the spin trigger button |

### ticker

Cycles through a list of text messages in a container, fading each in and out on a configurable interval.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the ticker element |
| `messages` | List of strings to cycle through |
| `wait` | Seconds between messages (default: 6) |
| `includeEmpty` | Include a pause with empty text (default: false) |

### toasts

Toast notifications — brief, auto-dismissing alerts in a corner of the page. Access via: Bootic.call('Toasts', 'show', opts)

### view_modal

Fetches an arbitrary internal URL and renders its content inside a modal overlay.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for trigger links (default: `.show-promos-link`) |
| `url` | URL to load inside the modal |

### view_transitions


### welcome_modal

Shows a welcome pop-up modal on first visit (using a cookie to avoid repeat displays), optionally including a newsletter subscribe form or promotional image and message.

| Option | Description |
|--------|-------------|
| `show_subscribe_form` | Show a newsletter subscription form in the modal (default: false) |
| `subscribe_form_tag` | Liquid form tag name to render inside the modal |
| `delay` | Seconds to wait before showing the modal (default: 3) |
| `always_show` | Show on every visit regardless of cookie (default: false) |

### login_modal


### user_menu

Renders the customer account drop-down menu with links to orders, profile, and favourites when the customer is logged in, or a login prompt when logged out.

| Option | Description |
|--------|-------------|
| `triggerSelector` | CSS selector for the menu toggle button (default: `.user-menu-toggle`) |
| `menuContainer` | CSS selector for the menu target container (default: `.user-menu-container-target`) |

### user_signup

Renders a customer registration / sign-in form component inside a specified container, handling submission, validation errors, and post-login redirects.

| Option | Description |
|--------|-------------|
| `formContainer` | CSS selector for the container to render the form into |
| `formUrl` | URL to submit the registration form to |

### ajax_pagination

Loads the next page of products or blog posts via AJAX and appends them to the current page without a full reload. Works with both numbered pagination and "load more" style buttons.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the element to append results into |
| `paginationSelector` | CSS selector for the pagination links wrapper |

### async_partial

Fetches a Liquid template partial asynchronously via AJAX and injects its HTML into a target element, with optional timezone-aware scheduling and query-param forwarding.

| Option | Description |
|--------|-------------|
| `name` | Name of the partial template to fetch |
| `target` | CSS selector for the container to inject content into |
| `params` | Query parameters to pass to the partial endpoint |
| `currentParams` | Forward the current page's query string to the partial (default: false) |

### console_api

Provides a consolidated API for the Buyer/Customer Console UI

### contact_widget

Renders a floating contact widget with links to WhatsApp, email, phone, Telegram, Twitter, and other configured channels.

| Option | Description |
|--------|-------------|
| `twitter` | Twitter handle |
| `facebook` | Facebook page ID |
| `telegram` | Telegram username |
| `email` | Contact email address |
| `sms` | SMS phone number |
| `call` | Click-to-call phone number |

### feedback

Loads and displays customer comments and a feedback form for the current page, connecting to the Bootic comments service.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the feedback container |
| `templateId` | ID of the Liquid template used to render comments (default: `feedback-template`) |

### lazyload

Defers loading of images and iframes until they scroll near the viewport, replacing `data-src` with `src` using IntersectionObserver.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for lazy elements (default: `.lazy`) |
| `container` | Root container (default: `document`) |
| `rootMargin` | IntersectionObserver root margin (default: `"0px"`) |

### native_client

Bridges the web storefront with Bootic's native mobile app WebView by detecting the Capacitor runtime and adding platform-specific CSS classes to the body element.

### pdf_viewer

Embeds a PDF file viewer inside the page using a PDF.js-based renderer. Sets minimum dimensions on the container if needed.

| Option | Description |
|--------|-------------|
| `pdfUrl` | URL of the PDF file to display |
| `container` | CSS selector for the viewer container element |

### places_map

Renders an interactive Google Map with markers for each store branch location. Requires branches to have latitude/longitude coordinates set.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the map container element |
| `places` | Array of branch objects with address.latlong coordinates |

### shop_visits

Sends an anonymous shop-visit beacon to Bootic analytics on every page load. No configuration required.

### streaming_videos

Initialises embedded video players supporting direct video files and HLS (.m3u8) streams found in page content.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for video elements to initialise (default: 'video') |
| `container` | CSS selector or element scoping the search for video elements |

## JavaScript Components

Custom Elements and Vue components. Marked as `base` (bundled) or `on-demand` (loaded on use).

### add-to-cart-qiq [base]

Renders the add-to-cart form with variant selectors and quantity controls using a QiQ template. Supports product bundles, modifiers, subscription fees, volume discounts, and dynamic variant selection.

| Option | Description |
|--------|-------------|
| `product_id` | ID of the product to render the form for |
| `button_type` | Visual style of the add-to-cart button (e.g. 'normal', 'icon') |
| `with_variants` | Whether to display variant selectors (default: false) |
| `available_variant_id` | ID of the pre-selected available variant |

### age-verification [on-demand]

Renders a full-screen age verification gate that requires visitors to confirm they are of legal age before accessing the store. On confirmation the gate fades out after a brief success message; on denial it displays a rejection message with a redirect button.

| Option | Description |
|--------|-------------|
| `logoUrl` | URL of the store logo displayed on the gate (default: '') |
| `logoAlt` | Alt text for the store logo (default: 'Logo') |
| `question` | Age-check question shown to the visitor (default: '¿Eres mayor de edad?') |
| `yesButtonText` | Label for the confirm/yes button (default: 'Sí') |
| `noButtonText` | Label for the deny/no button (default: 'No') |
| `bottomText` | Fine-print text shown beneath the buttons (default: 'Para ingresar a nuestro sitio...') |
| `termsText` | Clickable terms-and-conditions link text (default: 'términos y condiciones') |
| `termsLink` | URL for the terms-and-conditions page (default: undefined) |
| `primaryColor` | Accent colour used for buttons and highlights (default: '#ff4000') |
| `darkMode` | Enable dark colour scheme (default: false) |
| `successTitle` | Heading shown after the visitor confirms their age (default: '¡Perfecto!') |
| `successMessage` | Body text shown after confirmation (default: 'Bienvenido a nuestra tienda...') |
| `successDelay` | Milliseconds to display the success screen before dismissing the gate (default: 1800) |
| `rejectionTitle` | Heading shown when the visitor denies their age (default: '¡Ups! Eres muy joven aún') |
| `rejectionMessage` | Body text shown on denial (default: 'Vuelve cuando seas mayor de edad...') |
| `redirectUrl` | URL the visitor is sent to when they click the redirect button after denial (default: 'https://www.disney.com') |
| `redirectButtonText` | Label for the redirect button shown on denial (default: 'Ir a Disney') |
| `onVerify` | Callback invoked after the gate is dismissed; receives no arguments (default: no-op) |

### auth-delivery [base]

Renders the combined authentication and delivery address selection flow. Guides customers through login/account creation and then delivery method and address setup in a modal.

| Option | Description |
|--------|-------------|
| `welcomeTitle` | Title displayed on the welcome/login step |
| `api` | API methods for authentication and delivery (auth + delivery methods) |
| `validProviders` | Names of OAuth providers to enable (e.g. ['google', 'facebook']) |

### biggy-slider [on-demand]

Renders a full-width hero image/content slider using Swiper with autoplay, navigation arrows, and pagination dots support.

| Option | Description |
|--------|-------------|
| `autoplay` | Auto-advance slides (default: false) |
| `interval` | Milliseconds between slide transitions (default: 4000) |
| `loop` | Loop from the last slide back to the first (default: true) |

### bundle-option-configurator [base]

Renders a product bundle option selector letting customers choose components or variants for each bundle slot. Validates that all required slots are filled and syncs selections back to the add-to-cart form.

| Option | Description |
|--------|-------------|
| `productId` | ID of the bundle product |
| `options` | Array of bundle option objects describing each slot and its available items |

### cart-promos [base]

Renders available promotion codes and discount summaries within the cart. Displays an optional promo code input field and shows applied discounts.

| Option | Description |
|--------|-------------|
| `showApplyPromo` | Show the promo code input field (default: true) |

### cart-table [base]

Renders the full cart table with line items, quantity controls, item removal, subtotals, and a checkout button. Supports an optional progress gauge showing how far a customer is from a free-shipping threshold.

| Option | Description |
|--------|-------------|
| `show_cart_gauge` | Show the free-shipping progress gauge (default: false) |
| `cart_gauge_limit` | Cart total threshold for the free-shipping gauge |
| `hide_footer` | Hide the cart footer with totals and checkout button (default: false) |

### cart-table-v3 [base]

Renders an updated cart table layout (v3) with redesigned line items, optional cart gauge progress bar, and bundle/volume-discount action hints. Purely a renderer — doesn't wire its own clicks. Hosted themes wire it via DynamicCartTable; headless callers (e.g. ShoppingBeacon) wire it themselves after mounting.

| Option | Description |
|--------|-------------|
| `show_cart_gauge` | Show a progress gauge towards a cart goal (default: false) |
| `cart_gauge_limit` | Cart total amount that fills the gauge |

### cart-table-view [on-demand]

Renders a full standalone cart page view with all cart table functionality, suitable for embedding on a dedicated cart or checkout page.

| Option | Description |
|--------|-------------|
| `show_cart_gauge` | Show a progress gauge towards a free-shipping goal (default: false) |
| `cart_gauge_limit` | Cart subtotal amount that completes the gauge |

### cart-totals [base]

Renders the cart summary panel showing item subtotal, discounts, taxes, shipping costs, and the grand total, with an optional related-product suggestion row.

| Option | Description |
|--------|-------------|
| `show_suggestions` | Show related product suggestions below the totals (default: false) |

### contact-widget [base]

Renders a floating multi-channel contact widget with configurable links to WhatsApp, email, phone, Telegram, Twitter, and other channels.

| Option | Description |
|--------|-------------|
| `email` | Contact email address |
| `call` | Click-to-call phone number |
| `sms` | SMS phone number |
| `telegram` | Telegram username |
| `twitter` | Twitter handle |
| `facebook` | Facebook page ID |

### cookie-consent [on-demand]

Renders a cookie consent banner with accept and decline controls, storing the customer's choice in a cookie to avoid repeat displays.

| Option | Description |
|--------|-------------|
| `message` | Consent message text |
| `acceptLabel` | Label for the accept button (default: 'Accept') |
| `declineLabel` | Label for the decline button (default: 'Decline') |
| `privacyUrl` | URL of the privacy policy page |

### countdown-timer [base]

Renders a live countdown clock displaying days, hours, minutes, and seconds until a target date/time, with a configurable finished message.

| Option | Description |
|--------|-------------|
| `startTime` | ISO date string for the countdown target |
| `finishedMessage` | Text to display when the countdown reaches zero |

### country-phone-input [on-demand]

Renders a phone number input with an international country-code selector, auto-formatting the number based on the selected country's format rules.

| Option | Description |
|--------|-------------|
| `defaultCountry` | ISO alpha-2 country code to pre-select (default: 'CL') |
| `value` | Initial phone number value |

### customer-console [on-demand]

Renders a developer console panel for inspecting customer account data, cart state, and order history (intended for store admin or debugging use).

### customer-menu [base]

Renders the logged-in customer navigation menu with links to orders, profile, addresses, favourites, and subscriptions, with SVG icons for each section.

| Option | Description |
|--------|-------------|
| `user` | Customer data object |
| `links` | Custom additional menu link objects |

### delivery-setup [base]

Renders the delivery method and address selection flow, supporting both shipping and pickup options with locality search and optional map display.

| Option | Description |
|--------|-------------|
| `delivery` | Delivery API object with getShippingOptions and related methods |
| `showMap` | Show a map for pickup branch selection (default: false) |

### delivery-setup-v2 [base]

Headless delivery-setup modal. Mounts DeliverySetup inside a managed overlay and exposes open()/close(). Each open() call creates a fresh modal; close() or backdrop-click dismisses it.

### faceted-search [on-demand]

Renders a full faceted search interface with filter checkboxes by tag, type, vendor, and price range, fetching updated results via AJAX on each filter change.

| Option | Description |
|--------|-------------|
| `formAction` | Search endpoint URL (default: '/search') |
| `filters` | Initial filter state object |
| `resultsContainer` | CSS selector where results are injected |

### feedback-button [base]

Renders a floating feedback/help button that opens the Help Scout Beacon or a custom feedback form when clicked. Headless-safe: form field definitions and submissions go through `shared.forms` (storefront.forms) when available, falling back to the legacy `Forms` AMD module (registered by register-amd.js) in hosted themes.

| Option | Description |
|--------|-------------|
| `label` | Button label text (default: from theme settings) |

### feedback-comments [base]

Renders a list of customer comments/reviews with ratings for the current page.

| Option | Description |
|--------|-------------|
| `no_comments_message` | Message shown when there are no comments yet |

### fulfillment-info [base]

Renders estimated delivery date, pickup availability, and branch stock information for a product, updating when the selected variant changes.

| Option | Description |
|--------|-------------|
| `store` | Store/branch identifier |
| `productId` | Product ID to show fulfillment info for |
| `variantId` | Initially selected variant ID |

### fullpage-slider [on-demand]

Renders a full-viewport vertical scroll slider where each section occupies the entire screen height, with keyboard and swipe navigation.

| Option | Description |
|--------|-------------|
| `loop` | Loop from last section back to first (default: false) |
| `speed` | Transition speed in milliseconds (default: 600) |

### image-hotspots [on-demand]

Renders an image with interactive hotspot markers that reveal product cards or tooltip details on click or hover.

| Option | Description |
|--------|-------------|
| `image` | URL of the background image |
| `hotspots` | Array of hotspot objects with x, y (percentage) and productId |

### infobar [base]

Renders a dismissible announcement bar at the top of the page with configurable background colour, text colour, and message.

| Option | Description |
|--------|-------------|
| `message` | HTML message to display in the bar |
| `bg_color` | Background colour (default: '#111') |
| `text_color` | Text colour (default: 'white') |
| `max_width` | Maximum bar content width (default: '1170px') |

### matching-bundle-selector [base]

Renders a UI for selecting matching products to build a bundle (e.g. "complete the look"), showing compatible items and letting the customer add them as a set.

| Option | Description |
|--------|-------------|
| `productId` | The anchor product ID |
| `bundles` | Array of bundle option objects to display |

### megamenu [base]

Renders a full-width dropdown mega menu with first and second level navigation links, activating second-level sub-menus on hover or focus.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for first-level links (default: .first-level-menu) |
| `secondMenuSelector` | CSS selector for second-level containers (default: .second-level-menu) |

### notification-list [base]

Renders a list of customer notifications (order updates, restock alerts, messages) with read/unread state management.

| Option | Description |
|--------|-------------|
| `emptyMessage` | Message shown when there are no notifications |

### notify-restocked [base]

Renders the restock notification subscription form, letting a customer submit their email to be alerted when an out-of-stock product becomes available again.

| Option | Description |
|--------|-------------|
| `form_url` | URL of the notify-restocked POST endpoint (required) |
| `variants` | Array of variant objects to show in the variant selector |
| `submit_css` | CSS class for the submit button (default: 'primary') |

### order-tracking [on-demand]

Renders an order status tracking form where customers can enter their order number or email address to view real-time fulfilment and shipping status.

| Option | Description |
|--------|-------------|
| `inModal` | Render in a condensed modal-friendly layout (default: false) |

### popover-menu [on-demand]

Renders a floating popover navigation menu that appears near a trigger element, with configurable link items and auto-positioning.

| Option | Description |
|--------|-------------|
| `links` | Array of link objects with label and url properties |
| `triggerSelector` | CSS selector for the button that opens the menu |

### product-detail [on-demand]


### product-list [base]

Renders a mini product list (e.g. for "you may also like" or cart cross-sell suggestions) with product images, titles, prices, and inline add-to-cart buttons.

| Option | Description |
|--------|-------------|
| `title` | Section heading (default: '¡Que no se te olviden!') |
| `products` | Array of product objects to display |

### product-option-selector [on-demand]

Renders a product option/variant picker with visual swatches or buttons, designed for embedding in listing pages or quick-buy modals.

| Option | Description |
|--------|-------------|
| `title` | Product title |
| `options` | Variant option definitions (name, values) |
| `selectedVariantId` | Initially selected variant ID |

### product-preview [base]

Renders a compact product preview card with image, title, price, and a quick-add button for use in hover cards or inline listings.

| Option | Description |
|--------|-------------|
| `productSlug` | Product slug used to fetch product data |
| `productId` | Product ID |

### product-variant-selector [on-demand]

Renders a full variant selection UI with add-to-cart integration, showing available options as buttons and updating price and stock status on selection.

| Option | Description |
|--------|-------------|
| `title` | Product title |
| `selectedVariantId` | Initially selected variant ID |
| `variants` | Array of variant objects with id, options, price, and available |

### promo-notice [base]

Renders a dismissible promotional notice banner inside the page layout, showing active discounts or free shipping status from the cart.

| Option | Description |
|--------|-------------|
| `message` | Promotional message to display |

### push-notifications-prompt [base]

Renders the push notification permission prompt with a subscribe button, asking the customer to allow browser push notifications.

| Option | Description |
|--------|-------------|
| `prompt` | Prompt message text (default: from theme settings) |

### quick-stats [on-demand]

Renders a dashboard-style panel with key shop metrics including order counts, revenue totals, and top products, for admin preview or store-owner contexts.

### salesbot [on-demand]


### search-popover [base]

Renders a search input with a floating results popover that shows matching products, collections, and tags as the customer types, with optional images, prices, and autocomplete.

| Option | Description |
|--------|-------------|
| `withImages` | Show product thumbnails in results (default: false) |
| `withPrices` | Show product prices in results (default: false) |
| `showAutocomplete` | Enable search-term autocomplete suggestion (default: false) |

### shipping-calculator [base]

Renders the shipping cost calculator form where customers enter their address to receive a real-time shipping estimate before checkout.

| Option | Description |
|--------|-------------|
| `delivery` | Delivery API object with getShippingOptions method |
| `country` | Default country code for the address form |

### shopping-beacon [base]

Floating cart launcher with search, account menu, and a delivery-setup trigger, mounted as a persistent corner widget. Headless-safe by default: the cart badge, the cart slideout (Slideout + CartTable), and the delivery-setup trigger (Slideout + DeliverySetup) are wired directly from `shared.cart`/`shared.delivery` and work in any environment, hosted or headless. Search (`show_search`) and the account menu (`show_user_menu`) still depend on legacy-only globals (SearchIndex, search-popover, UserMenu) that don't exist in a headless/npm-only page — when the `Bootic` global isn't present those two sections are hidden automatically. Pass `show_search:false`/`show_user_menu:false` explicitly to hide them in a hosted theme too.

| Option | Description |
|--------|-------------|
| `show_search` | default true (forced off if legacy `Bootic` global is unavailable) |
| `show_user_menu` | default true (forced off if legacy `Bootic` global is unavailable) |
| `show_cart` | default true (badge + cart slideout) |
| `show_delivery_setup` | default true (location indicator opens DeliverySetup) |
| `delivery_text` | text shown next to the location indicator (default: "Elige tu forma de entrega") |
| `position` | 'bottom-right' (default), 'bottom-left', 'top-right', 'top-left' |

### signup-form [on-demand]

Renders a customer registration form with configurable fields for name, email, password, phone, and address, handling submission and displaying validation errors.

| Option | Description |
|--------|-------------|
| `title` | Form heading text (default: 'Crea tu cuenta') |
| `showPhone` | Include a phone number field (default: false) |
| `showAddress` | Include address fields (default: false) |
| `submitLabel` | Submit button label (default: 'Crear cuenta') |

### slideout [base]

Renders a slide-out drawer panel that overlays content from the right side of the screen, supporting multiple sequential steps and a programmatic open/close API.

| Option | Description |
|--------|-------------|
| `width` | Drawer width (default: '440px') |
| `onClose` | Callback invoked when the drawer is closed |

### supernav [base]

Renders a persistent top navigation bar with configurable logo, background colour, text colour, and optional cart icon and customer menu integration.

| Option | Description |
|--------|-------------|
| `bg_color` | Background colour (default: '#0071dc') |
| `text_color` | Text colour (default: 'white') |
| `logoUrl` | URL of the store logo image |

### welcome-modal [on-demand]

Renders a configurable welcome pop-up modal for first-time visitors with optional subscribe form and promotional image. Loaded via modules/ui/welcome_modal.js, which maps the (snake_case) widget settings onto this component's camelCase props.

| Option | Description |
|--------|-------------|
| `title` | Heading text |
| `text` | Body text |
| `imageUrl` | Promotional image URL |
| `imageLink` | URL the image links to |
| `linkText` | Call-to-action link text (default: "Ver más") |
| `linkUrl` | Call-to-action link URL |
| `showSubscribeForm` | Include a newsletter subscription form (default: false) |
| `subscribeFormTag` | Liquid form tag name to apply to subscribers |
| `buttonColor` | Subscribe button color (default: #18181b) |
| `modalPosition` | center, top-left, top-right, bottom-left, or bottom-right (default: center) |
| `darkMode` | Use dark modal styling (default: false) |
| `showCloseButton` | Show the close (x) button (default: true) |
| `closeOnOverlayClick` | Close when clicking outside the modal (default: false) |