Advanced UI Settings

This guide outlines all the advanced options available within the Plug & Play integration of Experro. These settings can be updated directly through the UI using the Custom JS tab in Experro’s UI Customization panel allowing you to tailor how your components behave. Here is the sample code to be pasted in the Custom JS tab in Experro’s UI Customization panel. Replace the values in <> with your own selectors and change the default values as per your requirements. Here is the detailed explanation of each setting:

window["Experro"].BeforeInit(`
    window["Experro"].SetConfig({
        "content_page_desc_count": 200,
        "product_desc_count": 70,
        "autocomplete_desc_count": 50,
        "is_search_redirect_enabled": true,
        "is_live": false,
        "add_to_cart_behavior": "redirect",
        "spellcheck_enabled": false,
        "compare_limit": 4,
        "did_you_mean_limit": 1,
        "desktop_view": {
            "autocomplete_block_selector": "<your_autocomplete_block_selector>",
            "autocomplete_input_selector": "<your_autocomplete_input_selector>",
            "autocomplete_result_selector": "<your_autocomplete_result_selector>",
            "autocomplete_replace_with": "input",
            "category_page_selector": "<your_category_page_selector>",
            "search_page_selector": "<your_search_page_selector>",
            "swatch_visibility_scope": "limited",
            "swatch_visibility_type": "image",
            "placeholder_animation_type": "typing"
        },
        "mobile_view": {
            "autocomplete_block_selector": "<your_autocomplete_block_selector>",
            "autocomplete_input_selector": "<your_autocomplete_input_selector>",
            "autocomplete_result_selector": "<your_autocomplete_result_selector>",
            "autocomplete_replace_with": "icon",
            "category_page_selector": "<your_category_page_selector>",
            "search_page_selector": "<your_search_page_selector>",
            "swatch_visibility_scope": "limited",
            "swatch_visibility_type": "image",
            "placeholder_animation_type": "typing"
        }
    })
`);

Global Settings

These settings apply universally across the platform.

Setting	Description
`content_page_desc_count`	Maximum number of characters to show for content descriptions. (Default: `200`)
`product_desc_count`	Truncation limit for product descriptions across product listings. (Default: `70`)
`autocomplete_desc_count`	Character limit for product descriptions shown in the autocomplete dropdown. (Default: `50`)
`is_search_redirect_enabled`	If enabled (`true`), certain queries will auto-redirect to specific landing pages.
`add_to_cart_behavior`	Determines add-to-cart behavior: `redirect` (takes user to cart) or `modal` (inline popup).
`spellcheck_enabled`	If set to `true`, activates spelling correction in search & autocomplete suggestions.
`is_live`	Indicates whether Experro is live on the store. Set to true to enable live features or false for development mode.
`compare_limit`	Restricts the number of products that can be added for comparison. (Only for BigCommerce. Default: `4`)
`did_you_mean_limit`	Limits the number of “Did You Mean” suggestions displayed. (Default: `1`)

Desktop View Settings

These selectors define how Experro’s frontend plug-in integrates with your desktop layout.

Setting	Description
`autocomplete_block_selector`	Selector where the autocomplete block (icon or input) will be inserted.
`autocomplete_input_selector`	Selector holding the autocomplete input.
`autocomplete_result_selector`	Selector where autocomplete results should be rendered.
`autocomplete_replace_with`	Replaces search bar with either `icon` or `input` field.
`category_page_selector`	Selector for injecting category page product results.
`search_page_selector`	Selector for injecting search results on search listing pages.
`swatch_visibility_scope`	Controls how many swatches to show: `limited` (default) or `all`.
`swatch_visibility_type`	Type of swatch display: `image`, `text`, or `color`. Default: `image`
`placeholder_animation_type`	Determines the animation style of the search box placeholder text. Possible values: `typing`, `rotation`, `fade`.

Mobile View Settings

These settings mirror the desktop options but are scoped specifically for mobile layouts.

Setting	Description
`autocomplete_block_selector`	Selector to position autocomplete block in mobile view.
`autocomplete_input_selector`	Input selector for mobile autocomplete.
`autocomplete_result_selector`	Where the mobile autocomplete results should render.
`autocomplete_replace_with`	Mobile option to toggle between search `icon` or full `input` field.
`category_page_selector`	Selector for rendering mobile category listings.
`search_page_selector`	Selector for rendering mobile search result pages.
`swatch_visibility_scope`	Mobile-specific swatch scope visibility: `limited` (default) or `all`.
`swatch_visibility_type`	Swatch display mode for mobile: `image`, `text`, or `color`.
`placeholder_animation_type`	Determines the animation style of the search box placeholder text. Possible values: `typing`, `rotation`, `fade`.

By configuring these settings, you gain full visual and behavioral control over how Experro plug-and-play features integrate into your site experience across both desktop and mobile storefronts.

The Proof of Value

Experro Discovery

Using Discovery Dashboard

Experro Analytics

Plug & Play Integration

Analytics SDK

Advanced UI Settings

Global Settings

Desktop View Settings

Mobile View Settings

​Global Settings

​Desktop View Settings

​Mobile View Settings

Global Settings

Desktop View Settings

Mobile View Settings