Recommendations on an empty basket

Published October 19, 2023
Modules
Difficulty

Not every customer on your website converts. Some of them leave their basket empty after deleting products from it. You should remember to use every valuable place on your website to encourage customers to make a purchase and an empty basket is one of them. A empty shopping cart page is definitely a place with sales potential that usually remains unused.

Why do customers leave behind an empty basket?

  • They added something to their shopping cart during a previous visit and they want to check it, but its content has already expired.
  • They checked the contents of their basket, after which they decided to remove all products from it.
  • They do not know what the online shopping process looks like or they just have clicked it by accident.

In all of these cases you can optimize the empty shopping cart page and help the customer find the products they need thanks to personalized recommendations. Our algorithms implemented in the basket could help them make a choice and make a purchase. Recommendations that present personalized products based on previous purchases or recently viewed items can be more effective than simply leaving the space empty.

In this use case, we will present product recommendations on an empty basket page. There we will display a personalized offer where customers can find products selected for them. Those products are selected based on each customer’s behavioral history.

The view of recommendations on an empty basket

Prerequisites


Process


In this use case, you will go through the following steps:

  1. Create AI recommendations with personalized products.
  2. Create a dynamic content on the empty basket page.

Create AI recommendations


In this part of the process, you will configure a personalized recommendation which will be later used in the dynamic content campaign.

  1. Go to Communication icon Communication > Recommendations > Add recommendation.
  2. Enter the name of the recommendation (it is only visible on the list of recommendations).
  3. In the Type & source section, click Define.
  4. From the Catalog dropdown list, select an item feed.
  5. In the Type section, choose the Personalized recommendation type.
  6. Confirm the settings by clicking Apply.
  7. In the Items section, click Define.
    1. Click Add slot.
    2. Define the minimum and maximum number of items that will be recommended to the user in each slot.
    3. Optionally, define Static filters and Elastic filters.
    4. Confirm by clicking Apply.
  8. Optionally, you can define the Boosting factors and settings in the Additional settings section.
  9. In the right upper corner, click Save.

Create a dynamic content


Create a dynamic content campaign, which will be displayed on an empty basket page.

  1. Go to Communication > Dynamic content > Create new.

  2. Enter the name of the dynamic content.

  3. Choose the Insert Object type.

  4. As the audience, select everyone.

  5. In the Content section, select Simple message, and set the CSS to after and add the value .cart-empty.

  6. In the Content tab, click Create Message.

  7. In the code editor, insert Jinjava with the AI recommendation and add your own CSS.

    Click to see Jinjava

    Replace your_campaign_ID with the ID of the AI recommendation (either of the bestselling shoes suitable for asphalt or off-road). The ID of the AI campaign is contained in the URL of the recommendation.

    <div class="title-and-link">
    		<h2>Personalized offers for you!</h2>
    		<a href="https://app.synerise.com/ai-v2/recommendations/bWdoIUSmSfLO" target="_blank" class="border-bottom">Go to Platform</a>
    </div>
    <div id="recommendationsForYou"
        class="block widget block-products-list grid products-grid__layout-default products-grid__buttons-below secondary-top-right product-columns-4 product-columns-l-4 product-columns-m-2 product-columns-s-2 title--align-center   quickview-bottom-left  ">
        <div class="block-content">
            <div class="products-grid grid">
                <ol class="product-items widget-product-grid">
                     {% recommendations3 campaignId=bWdoIUSmSfLO %}
                  {% for p in recommended_products3 %}
                    <li class="product-item">
                        <div class="product-item-info">
                            <div class="product-grid__image-wrapper">
                                <a href="{{p.productUrl}}"
                                    class="product-item-photo">
                                    <span class="product-image-container product-image-container-5600"
                                        style="width: 489px;">
                                        <span class="product-image-wrapper" style="padding-bottom: 100%;">
                                            <img class="product-image-photo"
                                                src="{{p.image}}"
                                                data-original="{{p.image}}"
                                                loading="lazy" width="489" height="489"
                                                alt="{{p.name}}"></span>
                                    </span>
                                </a>    
                                </div>
                            </div>
                            <div class="product-grid-overlay"></div>
                            <div class="product-item-details">
                                <div class="ox-product-grid__categories"><a
                                        href="https://demoshop.synerise.com/men/watches.html"
                                        class="ox-product-grid__category-link">{{p.category.split('>')[3]}}</a></div>
                                <strong class="product-item-name">
                                    <a title="{{p.name}}"
                                        href="{{p.productUrl}}"
                                        class="product-item-link">
                                        {{p.name}}</a>
                                </strong>
                                <div class="price-box price-final_price" data-role="priceBox" data-product-id="5600"
                                    data-price-box="product-id-5600">
                                    <span class="price-container price-final_price tax weee">
                                        <span id="old-price-5600-widget-product-grid" data-price-amount="619"
                                            data-price-type="finalPrice" class="price-wrapper "><span
                                                class="price">${{p.price|float(2)}}</span></span>
                                    </span>
    
                                </div>
    
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                    {% endrecommendations3 %}
                </ol>
            </div>
        </div>
    </div>

  8. Save the template.

  9. In the Schedule section, select the date when the dynamic content is activated.

  10. In Display settings, configure the settings:

    • Set Triggers to On landing.
    • Leave Delay at default.
    • In the Page targeting section, select Others:
      • Under Display on pages banner, click Add rule.
      • From the dropdown list, select Page containing URL.
      • In the text field, enter the link to your basket.
      • Leave the rest of the settings at default.
    `Screenshot presenting display settings`
    Display settings
  11. Confirm by clicking Apply.

  12. In the UTM & URL parameters section, click Skip step.

  13. Activate the dynamic content.

  14. Create the second dynamic content template to display the recommendations with the other group bestselling shoes for specific terrain. Repeat all the steps.
    Result: The recommendation frames are displayed at the URLs with the empty basket.

Check the use case set up on the Synerise Demo workspace


You can check the configuration of the campaign components directly in Synerise Demo workspace:

If you don’t have access to the Synerise Demo workspace, please leave your contact details in this form, and our representative will contact you shortly.

Read more


😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker