Widget Recommendations

The recommendations allow you to show to each user product recommendations based on artificial intelligence algorithms and their customer behavior, you can customize and add these recommendations to each page of your website and style them to your liking.

The first thing you see when clicking “Recommender” widgets is this customization page. Look at this documentation to know how this visualization works.

In the panel of the left you can see the page you are editing and some options:

Global Configuration

All recommender widgets will use this configuration and inherit these values if you change some value here, every recommender widget of the website will change, but remember that you can customize every widget on its own.

Global Options: Check this to know about the options available.
Global Customization: Check this to know configuration values.

This option allows you to add a new widget to the website.

Here, you can customize each aspect of your widget.

Recommendation type: You can select between all of our recommender types
- Predictive (default): This is our widget based on predictions, we analyze each user and determine which products are most likely to buy.
- Predictive last categories: Prediction algorithms but only for products of the same categories the user visited.
- Predictive last brands: Prediction algorithms but only for the las brands of the products the user interacted with.
- Last Viewed: The last products the user saw on its journey.
- Most popular: Most viewed/bought products of all time.
- Trending: The most popular products of the last 7 days.
- New arrivals: New products on the feed.
- Complementary: Products similar to the products you selected.
Title: The title of your recommender.
Type: How the products are displayed
- Carousel: Slideshow component for cycling throw products.
- Grid: All of the products one after the other.
Number of products: Number of products displayed
Placement:
- At the bottom of the main content: Place the widget at the end of the website, just before the footer.
- At the top of the main content: Place the widget at the beginning of the website, just before the header.
- Custom placement: To know more about this feature, read this.
- Collections: To exclude and include specific collections.
- Tag: To exclude and include specific tags.

Customization

This option allows you to customize the look and feel of your widget.

Options to customize the widget.

Reset all: Change every configuration to the default value.
Width: Total width of the widget (Relative to the parent) in percentage.
Padding (top, bottom, right, left): The “internal” margin of the widget.
Background color: The color of the background on the widget
Border color: Color of the border of the widget.

Carousel

This option lets you change the configuration of the carousel if this is the option selected to display the products.

Reset all: Change every configuration to the default value.
Show pagination: Activate or deactivate pagination.
Show navigation buttons: Activate or deactivate navigation buttons.
Allow loop: Carousel goes from the last product to the first.
Autoplay delay: Amount of time to change between products (default is 0).
Max items count per view/row: Limit products displayed.
Navigation buttons background: Change the color of the background of the buttons.
Navigation buttons arrow: Change the color of the arrow of the navigation button.

Product Image

The image of the product.

Reset all: Change every configuration to the default value.
Show: Show or hide the product image.
Width: Select the width of every product image in pixels.
Height: Select the height of every product image in pixels.
Margin (top, right, bottom, left): Space between the widget and the image in pixels.

Base font

The font all your text is going to inherit.

Reset all: Change every configuration to the default value.
Search Google Font: Select one font to use it in all of the text elements.

Title

Title of the Carousel, displays the name you use in Recommender options.

Reset all: Change every configuration to the default value.
Show: Show or hide the title.
Font: Select the font of the text.
Font size: Size of the text on pixels.
Font style: Select the styles you want in your text.
- Bold
- Italic
- Underline
Align: Align the text to the left, center or right.
Text color: Select the color of the text.
Margin (top, left, right, bottom): Space between the widget and the title in pixels.

Product Title

The name of the product.

Reset all: Change every configuration to the default value.
Show: Show or hide the title.
Font: Select the font of the text.
Font size: Size of the text on pixels.
Font style: Select the styles you want in your text.
- Bold
- Italic
- Underline
Align: Align the text to the left, center or right.
Text color: Select the color of the text.
Margin (top, left, right, bottom): Space between the widget and the product title in pixels.

Price

The actual price of the product.

Reset all: Change every configuration to the default value.
Show: Show or hide the title.
Font: Select the font of the text.
Font size: Size of the text on pixels.
Font style: Select the styles you want in your text.
- Bold
- Italic
- Underline
Align: Align the text to the left, center or right.
Text color: Select the color of the text.
Margin (top, left, right, bottom): Space between the widget and the product title in pixels.

Before Price

After the price, shows with a strikethrough the price before the discount, like this.

Reset all: Change every configuration to the default value.
Show: Show or hide the title.
Format: Adjust the text of the before price (default is before: [price]):
This will show:
Font: Select the font of the text.
Font size: Size of the text on pixels.
Font style: Select the styles you want in your text.
- Bold
- Italic
- Underline
Align: Align the text to the left, center or right.
Text color: Select the color of the text.
Margin (top, left, right, bottom): Space between the widget and the product title in pixels.

Discount Badge

Shows a badge with the percentage of the discount.

Reset all: Change every configuration to the default value.
Discount badge position: Choose between Near product price (default), None (Hides the badge), top left corner and top right corner.
Discount badge type: By default is Triangle.
- Triangle:
- Round:
Format: Choose the text you want to appear in the badge, default is [discount_percent]% off, Example: [discount_percent]% discount
Font: Select the font of the text.
Font size: Size of the text on pixels.
Font style: Select the styles you want on your text.
- Bold
- Italic
- Underline
Align: Align the text to the left, center or right.
Text color: Select the color of the text.
Background color: Select the color of the background.
Margin (top, left, right, bottom): Space between the widget and the product title in pixels.

“Add to cart” button

Button to directly add the product to the cart.

Reset all: Change every configuration to the default value.
Add to cart: Choose between:
- None: The button is not displayed
- Ajax API: The button adds a product to the cart and keeps the user on the same page.
- Redirect to Cart: Adds the product and redirects the user to the cart page.
Position: Choose between Top, Bottom (default) or Hover Center (Appears only when the user hover the product in the center of the image).
Format: Choose the text you want to appear in the button. For example: “Buy Now”.
Font: Select the font of the text.
Font size: Size of the text on pixels.
Font style: Select the styles you want in your text.
- Bold
- Italic
- Underline
Align: Align the text to the left, center or right.
Text color: Select the color of the text.
Background color: Select the color of the background.
Shadow: Activate or deactivate a shadow effect for the button.
Shadow color: Choose the color of the shadow effect.
Border Radius: Pick the roundness of the button. Example:
With value 0:
With value 100:
Margin (top, left, right, bottom): Space between the widget and the product title in pixels.

Options

This set of configurations let you change “General” values about the recommender.

If your store uses another currency than “USD” remember to activate the “Multi-Currency” option and use Price format to specify the order you want your price displayed.

For example, “[symbol][value]” will look like this: $15 and “[value][symbol] MXN” will look like this: 15$ MXN.

Custom Placement

This option lets you place your widget anywhere on your website as long as you identify a “CSS Unique Identifier”.

CSS Unique Identifier

These identifiers are values assigned to an HTML element (Image, link, text, containers...) which can only have one unique id.

For example, this is an image on a website.

But for this image to show up, this is the code necessary:

In this case, the unique CSS identifier is “#northern-lights”, the “#” symbol is always required before the id.

You can find this unique identifier in the HTML element as “id”, but not all of the elements will have this, so you have to find one or create a custom place to add this widget.

How to find CSS Unique Identifier

To find a CSS Unique Identifier, use right-click on the element you want to check and select “inspect”.

The element you are checking will appear outlined.

As you can see, the unique identifier is “#SiteNav”, or you can even use it’s father element, with the id “#AccessibleNav”.

If you add this identifier to “Custom Selector” and select a position (in, before, after), the widget will be placed in this position.

You can also add this “ids” to your HTML elements on Shopify by modifying the theme's code.

Shopify Documentation