How to add Recommendations to my store?

In order to get Recommendations live on your site there are two things that need to be done:

Step 1 - Javascript

Add a javascript snippet to the bottom of your <BODY> tag on every page where you want to use Recommendations.

<script async src="https://static.sooqr.com/recommendations/sooqr-recommender.js"></script>

Step 2 - HTML-tag per carousel

For every carousel (container) you want to add to your store, you will need to place an HTML tag. This tag has some optional attributes.

<ins
class="sqr-recommender"
data-sqr-container-uuid="<CONTAINER UUID>"
</ins>

The Container UUID can be found under the name of the recommendations container in Spotler Activate Search. But the easiest option is to click Options and click Copy Script. That will copy the script to your clipboard.

Script.png

The options to use for the HTML tag:

Attribute Required Type Description
data-sqr-placeholder-uuid YES string Unique identifier of placeholder (UUID)
data-sqr-product-id Only required for Product-based Recommendations string Product ID to show recommendations for. Required for Product-based Recommendations.
data-sqr-items-per-page NO number Limit the number of items per slide page
data-sqr-automatic-sliding NO bool Enable or disable automatic sliding (default: true)
data-sqr-slide-timeout NO number Interval between each slide, in milliseconds (default: 3000)

Optional step - Add styling to the recommender

Adding custom styling to the Recommender can help it to blend into your webshop more seamlessly. However, navigating the complicated maze that is CSS-classes can be a bit overwhelming. To that purpose, we’ve created a list of CSS classes and elements with a short description of their function below, in LESS / SCSS format. You can use these classes in your own CSS-file to attribute styling to the Recommender.

Please note that the short description of the element the class is on is written as a comment above the class.

// The main outer div of the recommender. 
.sqr-recommender {
    // Overlay div for the recommender slider. 
    .srq-recommender-slider-container {
        // Title of the recommender slider
        .srq-recommender-slider-title {
        }
        // Navigation arrow left. 
  .sqr-recommender-navigation.is--left {
            // Icon of the navigation arrow. 
.sqr-recommender-navigation.is--left span {
}
}
        // Navigation arrow right. 
.sqr-recommender-navigation.is--right {
            // Icon of the navigation arrow. 
    .sqr-recommender-navigation.is--right span {
    }
}
// Outer div for the recommender tile.
.srq-recommender-slider-outer {
    // Flex div for the recommender tile.
    .srq-recommender-slider {
​                // Inner div for the recommender tile. 
    .sqr-recommender-slide {
​                    // Anchor for the recommender tile. 
    .sqr-recommender-link.sqr-recommender-title {
        // Container for the image. 
    .sqr-recommender-image-container {
​                            // Image, img element.
    .sqr-recommender-image {
    }
    }
                        // Title of the individual recommender item. 
    .sqr-recommender-title {
    }
                        // Price of the individual recommender item. 
    .sqr-recommender-prices {
    }
    }
    }
    }
}
}
}