Skip to main content

Options

Fast Simon Upsell & Cross-sell widgets supports customization options via the JS variable object __fast_options.

Available Options​

OptionDescriptionType
"upsell_full_page_add_to_cart"Open full page add to cartboolean
"disable_upsell_shadow_root"Disable the shadow root for upsell widgetsboolean
"upsell_media_queries"Customize screen breakpoints for responsive device switching. Allows merchants to define custom viewport widths for mobile, tablet, and desktop layouts to match their store's theme breakpoints.{device: string, query: string}[]
"parseUpsellProductPrice"Custom callback to override the formatted product price displayed in upsell/cross-sell widgets. Receives the formatted price and compare price strings, returns the desired display string.(formattedPrice: string, comparePrice: string) => string
"parseUpsellComparePrice"Custom callback to override the formatted compare-at price displayed in upsell/cross-sell widgets. Receives the formatted compare price string, returns the desired display string.(formattedCompare: string) => string
"use_bigcommerce_jscontext_customer_group_id"BigCommerce B2B: read the live customer_group_id from the storefront Stencil context (window.jsContext.customer.customer_group_id) instead of the app JWT. Required for correct group-based pricing when a B2B user masquerades between companies, since the JWT is not refreshed on company switch.boolean
"show_carousel_marks_not_just_on_hover"Always display the image carousel dots (markers) on product cards, instead of revealing them only while the shopper hovers the product. Applies to products showing more than one image.boolean
"show_quick_add_button_always"Always display the variant Quick Add selector on product cards, instead of revealing it only while the shopper hovers the product. Applies on desktop; mobile and tablet behavior is unchanged, and widgets already configured to show a Quick Add button are unaffected.boolean
"omit_carousel_image_indexes"0-based indexes into the product's PDP image list to drop from the tile carousel — e.g. [1] removes the second PDP image from every product. Useful when an image is already shown elsewhere on the card (such as a theme's hover overlay) and would otherwise appear twice. The main product image is never affected. Note it also changes which image the 2nd-image carousel type shows on hover, since that picks from the same list.number[]
"product_image_custom_class"Extra class(es) added to every product image in the widget — carousel images, the hover second-image, and plain (non-carousel) tiles. Space-separate for more than one. See Styling with a custom image class for the shadow-root and specificity caveats.string

How to add custom options:​

Add the __fast_options variable to your HTML head within a script tag, for example:

<script>
    var __fast_options = __fast_options || {};
    __fast_options.disable_upsell_shadow_root = true;
    __fast_options.upsell_full_page_add_to_cart = true;
    __fast_options.show_carousel_marks_not_just_on_hover = true;
    __fast_options.product_image_custom_class = 'my-widget-image';

    // Custom media queries to match your theme's breakpoints
    __fast_options.upsell_media_queries = [
        {device: 'mobile', query: '(max-width: 480px)'},
        {device: 'tablet', query: '(min-width: 481px) and (max-width: 1024px)'},
        {device: 'desktop', query: '(min-width: 1025px)'}
    ];

    // Custom price formatting
    __fast_options.parseUpsellProductPrice = function(formattedPrice, comparePrice) {
        return formattedPrice; // return your custom formatted price
    };
    __fast_options.parseUpsellComparePrice = function(formattedCompare) {
        return formattedCompare; // return your custom formatted compare price
    };
</script>