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

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;

    // 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>