Options

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

Available Options

Option	Description	Type
"upsell_full_page_add_to_cart"	Open full page add to cart	boolean
"disable_upsell_shadow_root"	Disable the shadow root for upsell widgets	boolean
"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
"companyLocationProvider"	Shopify B2B: a callback returning the buyer's company location id, sent as company_location_context. Required for B2B catalog visibility: without it the buyer is evaluated as an ordinary shopper in their market, so products restricted to their B2B catalog are hidden from them. Called on every request rather than once at init, so a mid-session location switch is picked up. When configured it is authoritative, so return undefined for a shopper who is not buying on behalf of a company.	() => string | number | undefined
"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>