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.
You must install AfterShip Personalization from the Shopify app store. Refer to 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.
i) Status: Change the status from Disabled to Enabled.
ii) 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.
iii) Pinned product: Pin a product you want to be available in recommendations all the time. Click here to learn all the details.
iv) 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.
v) 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
vi) 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.
vii) Select the checkbox for Remove "Powered by AfterShip" to remove AfterShip branding from the widget.
i) Set how the offer section will be displayed to your customers including the offer 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 Yotpo product reviews. Select the checkbox if you want to display product reviews via Yotpo integration.
You must install the Yotpo product review app to display review ratings to your upsell products.
v) Configure the logic behind the variant preselection of the recommended products
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 checkbox if you want to Allow customers to change product quantity right from the offer widget
vi) Select the primary button text to encourage customers to add more to their existing order
Under the style settings, change how the upsell 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.
In case you need any further assistance, please contact our support team.
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.
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
Overview
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
You must install AfterShip Personalization from the Shopify app store. Refer to 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
i) Status: Change the status from Disabled to Enabled.
ii) 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.
iii) Pinned product: Pin a product you want to be available in recommendations all the time. Click here to learn all the details.
iv) 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.
v) 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
vi) 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.
vii) Select the checkbox for Remove "Powered by AfterShip" to remove AfterShip branding from the widget.
2. Display
i) Set how the offer section will be displayed to your customers including the offer 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 Yotpo product reviews. Select the checkbox if you want to display product reviews via Yotpo integration.
You must install the Yotpo product review app to display review ratings to your upsell products.
v) Configure the logic behind the variant preselection of the recommended products
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 checkbox if you want to Allow customers to change product quantity right from the offer widget
vi) Select the primary button text to encourage customers to add more to their existing order
3. Style
Under the style settings, change how the upsell 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.
In case you need any further assistance, please contact our support team.
Click Save to let the recommendation widget come into action
Widget 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.
FAQs
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: 22/05/2024
Thank you!