Articles on: Getting started

How to Recommend Products on the Cart Page

Plans: All Plans Platforms: Shopify


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.

  1. Go to Smart Upsell widgets > Cart in your AfterShip Personalization admin
  2. Click Get started



  1. 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


Display settings


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.


Style settings


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


  1. 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.


  1. 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.


  1. 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.


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


  1. 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-detailsitem product-detailsitem--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 -%}


  1. Insert {%- assign first_character = p.first | slice: 0 -%} between {%- for p in properties -%} and {%- unless p.last == blank -%}
  2. 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-detailsitem product-detailsitem--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 -%}


  1. 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