How to Recommend Products on the Cart Page

Plans: All Plans Platforms: Shopify

Overview

AfterShip Personalization lets you recommend products on your Shopify store's cart and cart drawer to drive more sales, enhance store visitors’ shopping experience, clear the stock of products low in demand, and much more.

The recommendation widgets you create as part of your cart's cross-sell strategy can be used to further drive additional sales accompanying offers to boost your average order value in smart carts.

This article explains how to set up and customize AfterShip Personalization cart page recommendations on a Shopify store. It walks you through installing the app, creating a cart upsell widget, and configuring its Settings, Display, and Style options to show relevant product recommendations.

Steps to follow

You must install AfterShip Personalization from the Shopify app store. Refer to this guide to know the steps you need to follow.

Go to Cross-sell widgets > Cart in your AfterShip Personalization admin
Click Get started
Click Create widget > Cart page > Create

Once the product recommendations editor is open, set up 3 primary settings for your cross-sell widget.

1. Settings

i) Offer status: Change the status from Disabled to Enabled.

ii) Product recommendations: This section displays the complete list of active and inactive recommendations strategies you have created till now that are being used for different offers and widgets you have built for your store.

These strategies determine which products are going to be recommended in your widgets based on different settings.
These pre-made/existing strategies are centralized on one dashboard named Strategies and can be reused for different widgets.
Expand the dropdown to access the list of strategies or simply search the strategy you are looking for.
Select the strategy that best aligns with your current requirements for the cart/cart drawer page.
Click Edit if you wish to set up a new strategy from scratch or modify the existing one. You will be taken to the **Strategies dashboard **where you can take the mentioned actions.

a. Strategy name: Start off by giving your strategy a name.

b. Pre-made rules: It consists of 14 pre-made rules or recommendation types which you can select from to show the type of product recommendations you want.

c. Custom rules: It allows you to add custom rules based on your requirements. The products that will meet those requirements will be shown in the widget you are setting up and applying the strategy to. Learn more about custom rules.

d. Pinned product: It allows you to pin a product that you want to highlight and prioritise in product recommendations all the time.

Click here to learn all the details.

e. Exclusions: You can exclude products from recommendations. Three options to choose from: Exclude products in customers’ cart, Exclude specific products, Exclude by tag, Exclude by collection, and Exclude by vendor. Click here to know all the details

Product exclusion and pinning are possible depending on the recommendation type you've selected.

f. Product type: In this section, you can choose the type of product you would like to offer as product recommendations. The available options are One-time purchase only, Subscription only, Both ( One-time and subscription)

Offer promotion: In this section, you can enable and offer your customers discount offers on recommended products on the cart page.
Click Save to let your changes come into effect.

Move back to the offer editor to complete the rest of the settings.

iii) Widget installation: Make sure you add our app as a block in Shopify's theme editor. Refer to the Installation section and click Learn more to access the step-by-step guide to add cross-sell offers to your store. You can also refer to our in-built installation guide from the top right corner.

Widget installation on Shopify

2. Display

Display settings

i) Set the display settings of the widget section like border, border radius, and overall padding. Set how the widget section will be displayed to your customers including the title content, padding, and alignment.

Take help of the in-built AI-model to come up with captivating titles.

ii) Decide the number of products to be displayed in the upsell offer by dragging the radio button across the bar

Configure the display style for desktop and mobile and whether the recommended products will be displayed in the list or carousel format

iii) Configure whether the image source will be the original product or the product variant and simultaneously set the image radius, border, and aspect ratio

iv) Decide what product information will be displayed and how it will be displayed under the Product info settings.

AfterShip Personalization has direct integration with AfterShip Reviews, Yotpo, Okendo, and Judge.me product reviews. Select the checkbox if you want to display product reviews via AfterShip reviews or other reviews apps.
You must install the necessary product review app to display review ratings to your upsell products.

v) Configure the logic behind the variant preselection of the recommended products

Select whether the variants will Always display below the products recommendations or Dynamically once the customer click the CTA button.
Smart variant match: Automatically displays the best product variant based on the selected products or the cart items.
First available variant: Displays the first in-stock product variant in the Shopify admin to the shopper.
Select the checkboxes

a. If you want to Allow customers to change product quantity right from the offer widget.

b. If you want to Show subscription options for the product recommendations.

To display subscription options, you must install a subscription management app such as Recharge to set up subscription type, discount, and delivery frequency.

vi) Select the primary button text to encourage customers to add more to their existing order.

You can also edit the success message that will display once the customer adds a product to the cart.

3. Style

Under the style settings, change how the cross-sell offer section will look to the customers and make it brand-consistent.

The section will automatically sync with your Shopify store and match its theme. You can adjust the colors and fonts of the section as per your reference with extensive customization options.

Style settings

Click Save to let the recommendation widget come into action

We will show the product recommendation widget right above the footer. If you are using a Shopify theme 1.0 and want to try a different position, do let us know by clicking Make a request.

Shopify Theme 2.0 users can adjust the widget location on their own by simply following this guide.

FAQs

Are there any other recommendation types available apart from the supported ones?

We do provide other recommendation types based on customer requirements. Please click let us know and inform our support team about your requirements.

Can I request to change the product recommendation widget’s location?

Yes, For Shopify Theme 1.0, after receiving a request, we will put the widget wherever you want through coding. However, it is important to know that some Shopify themes don’t allow custom coding. We will check the Shopify theme you’re using currently and then try to change the product recommendation widget’s location for you.

If you are using a Shopify Theme 2.0, you can follow this guide to adjust the position of the cross-sell widget on the cart page.

Why am I not seeing my store’s products in the preview, even after enabling my offer?

In the preview, we just show how products will look in the widget, not display actual products of your store. To see your store’s products in the product recommendation widget, enable your widget and click Save. Once done, visit your store's cart page, add products, and check if the widget is displaying.

How can I hide product properties on the cart page?

In certain themes like Symmetry and Debut, the cart page displays some product properties like shown in the image below

Follow the steps below to hide product properties in the cart:

Change your theme’s/cart liquid or sections/cart-template.liquid file

The code would look like this

{%- for p in properties -%}

{%- unless p.last == blank -%}

<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

{%- endunless -%}

{%- endfor -%}

Insert {%- assign first_character = p.first | slice: 0 -%} between {%- for p in properties -%} and {%- unless p.last == blank -%}
Insert or first_character == '_' between {%- unless p.last == blank and -%}

The updated code should look like this

{%- for p in properties -%}

{%- assign first_character = p.first | slice: 0 -%}

{%- unless p.last == blank or first_character == '_' -%}