> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.