Articles on: Getting started

How to Recommend Products on the Cart Page

Plans: All Plans Platforms: Shopify


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

Steps to follow

Please make sure you have installed AfterShip Personalization from the Shopify app store. Check this guide to know the steps you need to follow.

Go to Smart Upsell 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.

1. Settings

Status: Change the status from Disabled to Enabled.

Undern the Product settings, please take care of these 3 things:

i) Recommendation type: By default, we show products bought together frequently on the cart page. For example, an iPhone case will be recommended if a shopper adds an iPhone to the cart.

Other recommendation types are also available. Kindly check this guide to learn what's best for your store.

ii) Pinned product: Pin a product you want to be available in recommendations all the time. Click here to learn all the details.

iii) Exclusions: You can exclude products from recommendations. You have three options to choose from: Exclude products in customers’ cart, Exclude specific products, and Exclude by tag. Click here to learn all the details.

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

iv) 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 during checkout.
Click Save to let your changes come into effect

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

vi) Select the checkbox for Remove "Powered by AfterShip" to remove AfterShip branding from the widget.

Layout: Choose the layout for both desktop and mobile devices. Available options are Carousel and Grid. Also, decide on the number of columns and products.

Note: You can have a maximum of 2 and 6 columns for mobile and desktop devices. Also, you can recommend a maximum of 24 products at a time.

Action button: Give your action button a name

AfterShip branding: You can remove “Powered by AfterShip” for free by verifying your store with us. Click Contact support for help.

Style: Shopify theme 1.0 users must click the checkbox (if unchecked) to let us automatically sync up their store's theme, fonts, and colors. For Shopify theme 2.0 users, syncing will be done by default.

If you are using Shopify theme 1.0 and leave the checkbox unchecked, our default setting will be applied.

Location: 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.

Click Save to let the recommendation widget come into action


Are there any other recommendation types available?

We do provide other recommendation types. 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, 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.

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 campaign and click Save. Once done, visit your store's cart page and check the widget.

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 -%}
<li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
<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 == '_' -%}
<li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>
{%- endunless -%}
{%- endfor -%}

Save the changes and preview the store. It should look normal

If you still need any help, connect with our support team

Updated on: 21/05/2024

Was this article helpful?

Share your feedback


Thank you!