Optimized Showcase

Adding a New Widget

Adding the Optimized Showcase widget to your Wix site is easy. Just follow these steps:

1. Start by opening the Wix editor and navigating to the page where you want to add the widget.
2. Click on "Add to Site" on the left side of the Editor.
3. Choose the "App Widgets" tab.
4. Look for "Optimized Showcase" and either click on a widget or drag it to your site to add it.

Widget Elements

The main Optimized Showcase widget contains several Featured Product widgets displayed in a column layout. Each Featured Product widget will automatically load a random product from your Store. From here you can adjust the general settings, customize the styles of the elements, or define filters to control what products display in each column.

Adjusting Widget Settings

To change the general settings of the widget, follow these steps:

1. Find the main Optimized Showcase widget in the editor.
2. Click on it to select it.
3. Click the Settings button in the toolbar to open the Settings panel.

Layout Settings

These settings allow you to customize how the Featured Product widgets are displayed.

Products to show
Choose how many products you want to display at a time, ranging from 1 to 5.

Product style preset
Select from one of the pre-defined style options. Each preset can be further customized through the editor. Learn more

Product info alignment
Decide how you want to align the information of each product, whether it's left, center, or right aligned.

What do you want to show?
Toggle options to choose what details you want to display for each featured product.

Image & Interaction Settings

These settings define how the product images display and what happens when a user interacts with a featured product.

Image resizing
Control how the images of the products should be automatically resized to fit the layout.

• Crop: Ensures that the entire image fits within the designated space without distortion. It might cut off parts of the image to maintain a consistent size.
• Fit: Resizes the image to fully fit within the designated space while maintaining its original aspect ratio. This prevents any distortion but may result in empty spaces if the image's aspect ratio is not square.
• Keep image ratio: Ensures that the image's original aspect ratio is maintained. This prevents distortion, keeping the image's proportions intact even if it results in the image height being inconsistent with other product images.

Clicking on the product & Clicking the button
Define what happens when a user clicks on the product and what happens when a user clicks on the product button.

• Loads product page: Will navigate the user to the dedicated page showing detailed information about that specific product.

• Opens quick view: Allows users to view essential product details in a pop-up without leaving the current page.

• Adds product to cart: Adds the product directly to their shopping cart.

Show message on hover
Enable or disable displaying a message when a user hovers over a product with a mouse cursor.

Hover message text
Customize the text that appears when a user hovers over a product.

Ribbon Settings

These settings allow you to customize the text found in the various ribbon types and control which ribbons are automatically displayed.

Show ribbons
Toggle to show or hide ribbons that indicating special product attributes.

• User defined: Displays the ribbon defined in the Store Products > Product info. If a product has this user defined ribbon, it will take precedence over all the non-user defined ribbons listed below.
• High engagement: Displays when a product is shown based on the engagement filter. The ribbon text can be defined in the “High engagement text” field.
• New: Displays when a product is shown based on the age filter. The ribbon text can be defined in the “New text” field.
• Low stock: Displays when a product is shown based on the stock filter when set to “Stock is less than”. The ribbon text can be defined in the “Low stock text” field.
• Discounted: Displays when a product is shown based on the discount filter when set to “Has discount”. The ribbon text can be defined in the “Discounted text” field.

High engagement text
Customize the text displayed for products with high engagement.

New text
Set the text for indicating newly added products.

Low stock text
Define the text for products that are running low in stock. Use the shortcode [#] to display the actual quantity of stock in the ribbon.

Discounted text
Specify the text to indicate products with discounts. Use the shortcode [#] to display the actual price difference of the applied discount in the ribbon. You can also alternatively use the shortcode [%] to display the percentage of the discount.

Defining Featured Product Filters

By default, a random product will be loaded in each of the Featured Product widgets. Filters can be enabled to narrow down the pool of possible products that can display in each of these columns. To edit the filters:

1. Click on the Optimized Showcase widget in the editor.
2. Choose one of the Featured Product widgets and click on it to select it.
3. Click the Edit Filters button in the toolbar to open Edit Filters panel.

Filter Settings

In the Edit Filters panel, you'll find two lists of filters that you can turn on or off to manage which products are shown. Additionally, there's a Description section that explains how each enabled filter affects the product display.

Product filters
These filters give you specific results based on product details, helping you narrow down what products are included.

• Category: Filter products based on their inclusion in specific categories.
• Keyword: Filter products based on keywords found in the product name, ribbon text, or brand text.
• Price: Filter products based on price range.
• Has media image: Filter products based on whether they have associated images. Products without images will be excluded when this filter is enabled.

Optimization filters
These filters use data and changing metrics to automatically update results, providing dynamic results based on the latest information.

• Engagement: Filter products based on their engagement metrics. Engagement rates are determined automatically through user interaction with the Optimized Showcase widget.
• Age: Filter products based on their date of release.
• Stock: Filter products based on their quantity of stock.
• Discount: Filter products based on the availability of discounts.

Description
A description of the enabled filters and their defined settings will display here to help you understand how they apply.

Engagement Filter Settings

Engagement timeframe
Define the time period for measuring engagement.

Views threshold
Set the minimum views required for a product’s engagement rate to be considered.

Number of products to include
Specify the maximum number of products to be included based on engagement. Only products with the highest engagement rates will be included.

Engagement rate filter priority
Set the priority of the filter to change how it is applied.

• Auto (Allow testing): Products must match the defined Engagement filter settings to be included. However, any products that have less than the defined views threshold will be occasionally tested to see how well they perform.
• High: Products must match the defined Engagement filter settings to be included. If no products match the defined settings, then no product will be shown.
• Moderate: Products should if possible match the defined Engagement filter settings to be included. If no products match the defined settings, then the engagement filter will not be applied.
• Low: Products that match the defined Engagement filter settings will be featured more often than those that do not. If other optimization filters are also set to “Low” priority, then products that match any one of the low priority filters will be included.

Age Filter Settings

Filter by

• Order of release: Only the latest defined number of products will be included calculated by their date of release/creation.
• Age of release: Only products released/created within the defined amount of time will be included.

Number of products to include (Order of release)
Set the maximum number of products to include based on their order of release.

Include if released within the last (Age of release)
Define the time frame within which products should be considered new.

Product age filter priority
Set the priority of the filter to change how it is applied.

• High: Products must match the defined filter settings to be included. If no products match the defined settings, then no product will be shown.
• Moderate: Products should if possible match the defined filter settings to be included. If no products match the defined settings, then the filter will not be applied.
• Low: Products that match the defined filter settings will be featured more often than those that do not. If other optimization filters are also set to low priority, then products that match any one of the low priority filters will be included.

Stock Filter Settings

Include if
Define the conditions for including products based on their stock availability.

Quantity
Specify the minimum quantity threshold for products to be included.

Stock filter priority
Set the priority of the filter to change how it is applied.

• High: Products must match the defined filter settings to be included. If no products match the defined settings, then no product will be shown.
• Moderate: Products should if possible match the defined filter settings to be included. If no products match the defined settings, then the filter will not be applied.
• Low: Products that match the defined filter settings will be featured more often than those that do not. If other optimization filters are also set to low priority, then products that match any one of the low priority filters will be included.

Discount Filter Settings

Include if product
Select the condition for including products based on whether they have discounts or not.

Discount filter priority
Set the priority of the filter to change how it is applied.

• High: Products must match the defined filter settings to be included. If no products match the defined settings, then no product will be shown.
• Moderate: Products should if possible match the defined filter settings to be included. If no products match the defined settings, then the filter will not be applied.
• Low: Products that match the defined filter settings will be featured more often than those that do not. If other optimization filters are also set to low priority, then products that match any one of the low priority filters will be included.

Category Filter Settings

Categories to include
Select specific categories to include in the filtering process. A product only needs to match one of the listed categories to be included.

Add category
Use this button to add more categories to the list.

Keyword Filter Settings

Keywords to include
Select specific keywords to include in the filtering process. A product only needs to match one of the listed keywords to be included.

Add keyword
Use this button to add more keywords to the list.

Price Filter Settings

Minimum price
Set the minimum price threshold for products to be included.

Maximum price
Set the maximum price threshold for products to be included.

Styling Widgets & Elements

The individual elements of the Optimized Showcase widget can be selected, modified, and styled.

Accesing Widget Background Styles

1. Click the Optimized Showcase widget in the editor.
2. Click the Design button in the toolbar to open the Widget Design panel.
3. In the Widget Design panel, click the Customize Design button to access the Widget Background styles.

Accessing Product Image, Divider, & Button Styles

1. Click the Optimized Showcase widget in the editor.
2. Click on the element you want to style and take note that the Featured Product widget is selected.
3. Click on the element once more to select it instead.
4. Click the Design button in the toolbar to open a panel where you can access the styles.

Accessing Product Background Styles

1. Click the Optimized Showcase widget in the editor.
2. Click on the empty space below the product image or the empty space above the button element and take note that the Featured Product widget is selected.
3. Click on the empty space once more to select the Product Background element.
4. Click the Design button in the toolbar to open a panel where you can access the styles.

Accessing Product Name, Details, & Price Text Styles

1. Click the Optimized Showcase widget in the editor.
2. Click on the text element you want to style and take note that the Featured Product widget is selected.
3. Click on the text element once more to select it instead.
4. Click the Design Text or Edit Text button in the toolbar to open a panel where you can access the styles.

Accessing Product Description Text Styles

1. Click the Optimized Showcase widget in the editor.
2. Click on the product description text and take note that the Featured Product widget is selected.
3. Click on the description text once more to select it instead.
4. Click the Change Design button in the toolbar to open the Collapsible Text Design panel.
5. In the Collapsible Text Design panel, click the Customize Design button to access the text styles.

Adjusting Product Description Line Length

1. With the Product Description selected, click the Layout button in the toolbar to open the Collapsible Text Layout panel.
2. In the Collapsible Text Layout panel, change the Number of lines displayed field value to your desired line length.

Accessing Button Layout Settings

1. Click the Optimized Showcase widget in the editor.
2. Click on the Button element and take note that the Featured Product widget is selected.
3. Click on the button element once more to select it instead.
4. Click the Layout button in the toolbar to open the Button Layout panel.

Changing Button Text & Icon

1. With the Button element selected, click the Change Text & Icon button in the toolbar to open the Button Settings panel.
2. In the Button Settings panel are fields where you can change the displayed text and icon.

Managing The Product Index

When you add the Optimized Showcase widget to your website for the first time, it creates an index of all your store products. This index helps randomize the display of products in the widget and tracks engagement metrics.

Opening the Dashboard

You can visit the Optimized Showcase dashboard page to view engagement data and select which products to include in the widget display. To open the dashboard from the editor:

1. Find the Optimized Showcase widget in the editor.
2. Click on it to select it.
3. Click the Manage Index button in the toolbar to open the dashboard.

Including/Excluding Products

You have control over which products appear in the Featured Product columns of the Optimized Showcase widget. Here's how:

1. Accessing the Dashboard:
• Open the Optimized Showcase dashboard page.
2. Include or Exclude Products:
• Find the product you want to include or exclude.
• Hover your mouse cursor over the product row.
• Click on the Include/Exclude icon on the right.
3. Save Your Changes:
• After adjusting the products as needed, click the Save Changes button at the top of the page to apply your changes.

Including Product Variants

Product variants can be separately included in the index from their parent product. This feature is handy for testing the performance of specific variations of your product, helping you prioritize the most engaging ones. To include a product variant:

1. Accessing the Dashboard:
• Open the Optimized Showcase dashboard page.
2. Locate the Product:
• Find the product whose variants you want to include.
3. View Variants:
• Click on the "View variants" link under the product title to see all available variants in a popup table.
4. Include Variants:
• Hover over the variant you want to include.
• Click on the Include icon on the right.
5. Close the Popup:
• After including all needed variants, close the popup table by clicking the "x" icon.
6. Save Your Changes:
• Click the Save Changes button at the top of the page to add the variants to the list.

Now, the included variants will appear in the product index table along with their engagement data. To remove variants from the index, simply click the Exclude icon on the right of the variant's row.

Rebuilding The Index

The product index automatically updates whenever there are changes to your store products, such as adding new ones, deleting them, modifying details, or when the quantity of stock changes.

If you notice incorrect product details in the Optimized Showcase widget or if a product is missing from the dashboard index table, you can rebuild the index to ensure it's up to date. Here's how:

1. Click on the "More actions" button in the top right corner of the product index table.
2. In the menu that appears, select "Re-index."
3. Wait a moment for the index to rebuild. Once complete, a success message will confirm that the index is up to date.

During the index rebuild, engagement data won't be overwritten, so there's no risk of losing valuable information.

Filter Tutorials

These tutorials guide you through different ways to use the Featured Product widget filters. Each tutorial builds upon the previous one, helping you create increasingly specific results.

1. Show Products With The Highest Engagement

To display products with the highest engagement using the Featured Product widget Filter settings, follow these steps:

1. Select the Optimized Showcase Widget:
• Click on the Optimized Showcase widget in the editor.
2. Choose a Featured Product Widget:
• Click on one of the Featured Product widgets to select it.
3. Open Edit Filters:
• Click the Edit Filters button in the toolbar to open the Edit Filters panel.
4. Enable the Engagement Filter:
• In the Edit Filters panel, turn on the “Engagement” optimization filter option.
5. Adjust Filter Settings:
• A new section will appear in the panel for adjusting the filter’s settings.
• Choose an Engagement timeframe (e.g., “Past 3 months”) to consider recent engagement data.
• Set the views threshold slider to determine the minimum number of views required for a product's engagement data to be considered.
• Use the next slider to specify how many top engagement rate products will be included in the featured product display (e.g., top 3 products).
• Keep the Engagement rate filter priority set to “Auto (Allow testing)” to continually test products until enough views are collected.

This filter's results update over time, ensuring that only products with the most interaction from visitors are shown, while also giving new products a chance to prove their engagement.

2. Narrow by Product Age

Say you want to show your highest engagement products but limit that to only products released in the past 6 months. You can enable a second optimization filter to make things more specific. Here’s how:

1. Enable the Age Filter:
• Open the Edit Filters panel.
• Turn on the "Age" optimization filter option.
2. Adjust Filter Settings:
• A new section will appear in the panel for adjusting the filter's settings.
• Choose whether to filter by the age or order of release.
• If filtering by the order of release, use the slider to specify how many of the latest released products to include (e.g., "10").
• If filtering by the age of release, select a release timeframe (e.g., "Past 3 months") to include only products created within this timeframe.
3. Set Filter Priority:
• Keep the Age filter priority set to "High" to include only products that match the timeframe. If no products match, none will be shown.
• Change the priority to "Moderate" to disable the filter if no products match, allowing older products to be shown.
• Change the priority to "Low" to feature products matching the timeframe more often, but not as a requirement.

3. Narrow by Category

Say you want to narrow the possible displayed products even further by only considering those in a specific category. You can enable a product filter to include only products from a one or multiple categories. Here’s how:

1. Enable the Category Filter:
• Open the Edit Filters panel.
• Turn on the "Category" product filter option.
2. Adjust Filter Settings:
• A new section will appear in the panel for adjusting the filter's settings.
• Click the "Add category" button to start adding categories.
3. Add Categories:
• Enter the name of the category in the input field. Note that the value is case and space sensitive.
• Click "Add" to include the category in the list.
4. Repeat as Needed:
• Repeat the process to add more categories. Products matching any of the listed categories will be included.

Narrow by Keyword

You also have the option to narrow by keyword instead of category. The process is the same, however products will be included only if the provided keyword is found either in the product name or the product details (brand, ribbon, variant name).

4. Optimizing for Conversions

Imagine you have one Featured Product widget, but you want it to show different types of products: trending ones, new arrivals, those in low stock, and items on sale. Here’s how:

1. Adjust Engagement and Age Filters:
• In the Edit Filters panel, set both the Engagement and Age filter priorities to "Low."
2. Activate Stock Filter:
• Turn on the "Stock" filter option at the top of the panel.
• Adjust the settings to define when a product should be considered in low stock (e.g., “Stock is less than 10” ).
3. Set Stock Filter Priority:
• Change the Stock filter priority to "Low."
4. Activate Discount Filter:
• Turn on the "Discount" filter option.
• Configure the settings to include products with discounts (e.g., “Include if product has discount” ).
5. Set Discount Filter Priority:
• Change the Discount filter priority to "Low."

When multiple optimization filters are set to “Low” priority, products that match any one of the defined filters will be included. This Featured Product widget will either display:

• Trending products: The top 3 highest engagement rate products collected in the last 3 months.
• New products: Any products released within the past 6 months.
• Urgent action products: Products with less than 10 items in stock.
• Sale products: Products currently on sale.

This widget automatically updates to optimize featured products with ones that may help lead to conversions. You can use the ribbon settings for to further emphasize the products with calls to action.

FAQs

Can / should I use multiple widgets to feature more products on a single page?

While it is technically feasible to place multiple widgets on a single page, it is not necessarily advisable. The rationale behind this is from the principle of minimizing choice overload for page visitors. When confronted with too many options, users may feel overwhelmed, leading to decision paralysis or a decreased likelihood of interacting with any of the products.

Furthermore, the layout of products on the page can also significantly impact which products receive the most attention. For example, products showcased in prominent positions, such as the top row, may garner more engagement compared to those placed in less visible areas. This variation in visibility can potentially skew the accuracy of the data collected from the widgets.

Can / should I place multiple widgets across my site?

It is possible to place multiple widgets across the pages of your website but there are some things that should be considered. The positioning of each widget relative to other elements on the page significantly influences user interaction. For instance, a product showcased at the top of one page might garner significant engagement, but the same product featured lower down on another page could receive far less attention.

This variance in engagement based on widget positioning can skew the data, making it challenging to accurately assess the performance of individual products. It is generally advisable to exercise caution and consider the potential impact on user experience and data accuracy when choosing where you place your widgets.

Why doesn't the app track conversion data / product sales?

The Optimized Showcase widget is designed with the aim of boosting store conversions by highlighting products that get the most interaction. However, it doesn't directly track conversion data or product sales. Instead, it focuses on monitoring views and engagements, such as click interactions.

The reason behind this approach is that tracking conversions solely based on widget interactions becomes complicated once a user transitions to the product page. At this stage, numerous factors influence whether a user completes a purchase, making it challenging to attribute the conversion solely to the widget's impact. Consequently, attempting to track conversions from this point could yield unreliable data for the widget's performance.

Instead, the app prioritizes monitoring engagements, as increased interaction typically indicates higher interest from users. By emphasizing products with significant engagement metrics, the app indirectly enhances the likelihood of conversions. In theory, the more engaged users are with showcased products, the greater the chance of conversion.

Why is the engagement data not being tracked when I test?

The engagement data is specifically designed to be tracked solely on the live site, rather than during testing phases such as when using the Site editor or preview mode. This ensures that only meaningful and relevant data is collected for analysis.