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.
Please make sure you have installed AfterShip Personalization from the Shopify app store. Check this guide to know the steps you need to follow.
Log into your Shopify admin dashboard and find AfterShip Personalization in the Apps section.
Click Smart Upsell widgets
Click Get started under the Cart widget
Click Create widget > Cart page > Create
Once done, take care of the recommendation settings:
Offer title: Give your offer a suitable title. Be careful while adding the title because it will be shown to your store visitors.
Status: Change the status from Disabled to Enabled.
In the Product settings, please take care of these 3 things:
1) 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.
2) Pinned product: Pin a product you want to be available in recommendations all the time. Click here to learn all the details.
3) 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.
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
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
Please make sure you have installed AfterShip Personalization from the Shopify app store. Check this guide to know the steps you need to follow.
Log into your Shopify admin dashboard and find AfterShip Personalization in the Apps section.
Click Smart Upsell widgets
Click Get started under the Cart widget
Click Create widget > Cart page > Create
Once done, take care of the recommendation settings:
Offer title: Give your offer a suitable title. Be careful while adding the title because it will be shown to your store visitors.
Status: Change the status from Disabled to Enabled.
In the Product settings, please take care of these 3 things:
1) 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.
2) Pinned product: Pin a product you want to be available in recommendations all the time. Click here to learn all the details.
3) 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.
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
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: 15/12/2023
Thank you!