How to Display Subscription-Based Product Recommendations
Plans: All Plans Platforms: Shopify
AfterShip Personalization aims to help brands boost their AOV and maximize profits on every product sold with attractive upsell and cross-sell offers. Moving the extra mile, you can also seek to bolster your customer lifetime value (CLV) by settings up subscription-based product recommendations through smart upsell widgets on your website. This feature, besides boosting AOV, will help you capture a recurring stream of revenue, leading to more revenue gained from each customer.
Subscription-based product recommendations can be set up from AfterShip Personalization admin > Smart Upsell Widget.
In this tutorial, we’ll show you how to:
Subscription app setup on Shopify
Configure subscription-based product recommendations
Customer experience
Setting up product type as Subscription only, One-time purchase only, or both is just one step in this process. For subscription settings in the AfterShip Personalization app to reflect on your smart upsell widget for the product, cart, home, and thank you page, you must install a subscription management app like Recharge to configure subscription type, discount, and delivery frequency.
While AfterShip Personalization helps you recommend subscription products on your desired page on the website through upsell widgets, subscription management apps like Recharge, Appstle, Skio, Loop, and Seal help you configure subscription types for the products you want.
Let’s proceed with the Recharge subscription app as an example.
Install the Recharge app from the Shopify app store
Note: You must meet Shopify’s subscription eligibility requirements to set up a Recharge store
Go to Products in Recharge admin
Click Add products. A list of all your listed product will open
Select the Products you want to add to the subscription products list and click Add n product(s). The selected products will be successfully added to the list under Products
Recharge offers you the flexibility to either update subscription settings for products in bulk or update them individually
Select the checkbox for products you want to update. AfterShip two filters will appear at the top under the Search bar—Update subscription settings and More actions
To update settings for individual products, simply click on the Product.
a. Under subscription type, choose the type from One-time and subscription, Subscription, and Pre-paid subscription only you would like to offer customers. An explanation of each kind is mentioned below the checkbox.
Click on the One-time subscription
b. Set up a discount percentage to incentivize customers to subscribe and save
c. Set up an Order schedule (frequency) to determine the interval after which the order will be shipped, and the customer will be recharged on a recurring basis
Setting up multiple frequencies will give customers the option to select the schedule from the dropdown that suits them the best
d. To discontinue the subscription after the set number of recharges, select the checkbox. Input the number of recharge(s) after which the subscription will expire
e. Click Save
Go to Products in Shopify admin and select the product for which you have to manage the subscription settings of
a. Move down to the Purchase option on the order detail page. You can see the current subscription settings configured for the product
b. You can Edit and Delete the subscription plan by clicking the Manage and Remove options respectively
The Manage option allows you to update, add, and delete order frequencies and edit discount offer
You can edit the subscription type only on the subscription app. Therefore, upon clicking the Add purchase option, you will be asked to migrate to the subscription app to update the settings
The Remove option will delete the subscription plan from the product altogether.
Go to AfterShip Personalization > Smart upsell widgets in the AfterShip Personalization admin
Click Get started to select the consumer scenario or pre and post-purchase touchpoint where you would like to display personalized upsell offers
AfterShip Personalization offers 4 such scenarios
Product page
Home page
Cart page
Cart popup page
Thank you page
We will proceed with the product page for this tutorial.
The product page dashboard with key campaign metrics box and list of upsell widgets (if any) will open.
The product widget dashboard offers brief information on product recommendation widget type currently running, widget ID, active status, editing, and delete option.
Click Edit to change the widget’s product, display, and style settings.
Delete the widget by clicking the {...} button.
Once you land on the widget editor, you will get three settings
a. General settings
b. Display settings
c. Style settings
The general settings allow you to configure the widget’s core settings, including recommendation type, product type, excluded and pinned products, and widget location on your website.
Let’s know about each setting in brief.
Widget status: Select the checkbox for Enable to activate the widget.
Product settings: Configure the product recommendation rules. Select between pre-made rules that suggest products based on our AI model or set up your own custom rules to recommend products.
Pinned products: Select a product that will always appear first before the product recommendations.
Note: Pinned products override all the product exclusion rules.
Exclude options: Exclude specific products, items that are already in the customer’s cart, and specific product tags from displaying as recommendations.
Product type: Choose the type of product you would like to offer as product recommendations.
a. One-time purchase only: Products that can be purchased as a one-time item as configured in the subscription app (Ex. Multivitamins that can be purchased only once).
b. Subscription only: Products that have the option of being purchased on a recurring basis and shipped at regular intervals as configured in the subscription app (Ex. A bottle of multivitamins shipped and paid for every month).
c. Both (one-time and subscription): Products that have the option of being purchased as a one-time item or as a recurring subscription item as configured in the subscription app (Ex. Multivitamins that can be purchased only once or on a subscribe and save basis).
Offer promotion: Enable Discount if you want to give a discount on the recommended products. You can either select the fixed amount or set the discount percentage. Get clarity here.
Installation: Copy the widget code and paste it into your store code to display the smart upsell widget with the product recommendation type you configured. Find all the step to insert code by clicking Learn how.
AfterShip branding: Select the checkbox to remove AfterShip branding from your widgets.
The display settings allow you to tweak the structure and layout of the widget and how it will look on both desktop and mobile.
Under widget display settings, you get,
Widget border: The border that will cover the widget containers on two sides: top and bottom. Choose between Solid, Dashed, or None.
Mobile padding: Add space between the content of the product page and the border of the widget on all four sides in mobile view.
Desktop padding: Add space between the content of the product page and the border of the widget on all four sides in desktop view.
Under widget title display settings, you get,
Widget title: Add a title for the upsell widget or ask our AI tool to suggest an attractive title for you. Set the padding and alignment based in
Under product layout display settings, you get,
Number of products: Drag the radio button on the progress bar to the right to increase the number of products that will be displayed on the widget. Move the radio button to the left to decrease the number of products
Mobile/ Desktop style: Select between grid, list, and carousel to determine how you wish to display product recommendations
Mobile/ Desktop column: For grid and carousel style layout, drag the radio button on the progress bar to set the number of columns for product display
For the mobile layout, you can set a maximum of 2 columns
For the desktop layout, you can set a maximum of 6 columns
Under Product content display settings, you get,
Content alignment: Select from the dropdown menu whether the product detail will be unified or individually aligned. This applies to the grid and carousel layout.
Image source: Select from where you want to fetch the images of the products—product or variant
Image aspect ratio: Select the image’s ratio of its width to its height.
Image border: Select the border type around the images. You can make it solid or keep it at it is by selecting None
Image radius: Select how round the image’s outer edges you want to keep by dragging the radio button on the progress bar.
Product info: Decide what product information will be displayed and how it will be displayed under the Product info settings. Set the alignment accordingly.
a. AfterShip Personalization has direct integration with Yotpo product reviews. Select the checkbox if you want to display product reviews via Yotpo integration.
b. You must install the Yotpo product review app to display review ratings to your upsell products.
Variant selector: Configure the logic behind the variant preselection of the recommended products
a. Smart variant match: Automatically displays the best product variant based on the selected products or the cart items
b. First available variant: Displays the first in-stock product variant in the Shopify admin to the shopper
c. Select the checkbox if you want to Allow customers to change product quantity right from the offer widget
Under Action button display settings, you get,
Primary button action
Primary button action: When customer click the button, where do you want them to stay on the same page, redirect to product page, redirect to cart page or redirect to checkout page
Primary button text: Input a catchy CTA text to prompt customers to take action.
Select variant button: Input text for the button that will allow customers to select product size, color, or other options.
Button radius: Configure the radius of the button by dragging the radio button to left or right.
The style settings allow you to change the look and feel of your upsell widget to match your brand tone and style.
Style: The widget section will automatically sync with your Shopify store and match its theme.
Widget: Select colors for the background and border of the upsell widget at your convenience.
Under Widget title style settings, you get,
Title font: Select a font style for the widget title that aligns with your brand tone. By default, it will be synced with your Shopify store font style.
Title font size: Select an appropriate font size for the widget titles. We recommend between 25px to 30 px for maximum legibility.
Title font weight: Select how thick or thin characters in text should be displayed—Regular, Medium, or Bold
Title text: Select the color in which the title text will be displayed
Under Product info style settings, you get,
Product info font: Select a font style for product titles and information from the list of font styles on the dropdown menu. By default, it will be synced with your Shopify store font style.
If you wish to return to your Shopify store's original settings, click Reset to store theme style under style settings.
You can also
Configure the font size and weight—regular, medium, or bold.
Select if you want to show or hide the trailing zeros after the product price.
Individually set the color of the product name, product price, compare-at price, and discount value.
Under Variant and quantity selectors style settings, you can
Configure the color for the variantor selector background, border, and text.
Under Action button style settings, you can
Configure the font, font size, and weight of the action button.
Individual set color for the action button text, background, and border.
Click Save to clock in changes.
The products recommendations on the smart upsell widget will be the result of the combination of
The recommendation rules you’ve set up
The products you’ve pinned to appear first
The products you’ve selected to be excluded from being displayed as recommendations
The product type
If you have selected
The products not configured as Subscription only in the subscription management app will show.
Products configured as a one-time purchase and subscription will show
Products configured as pre-paid subscription only will show
The products that are configured as Subscription only in the subscription management app will show.
The products that are configured as a one-time purchase and subscription, subscription only, and one-time purchase only in the subscription management app will show.
For any further questions or help, please contact our chat support team
Overview
AfterShip Personalization aims to help brands boost their AOV and maximize profits on every product sold with attractive upsell and cross-sell offers. Moving the extra mile, you can also seek to bolster your customer lifetime value (CLV) by settings up subscription-based product recommendations through smart upsell widgets on your website. This feature, besides boosting AOV, will help you capture a recurring stream of revenue, leading to more revenue gained from each customer.
Subscription-based product recommendations can be set up from AfterShip Personalization admin > Smart Upsell Widget.
What you’ll learn
In this tutorial, we’ll show you how to:
Subscription app setup on Shopify
Configure subscription-based product recommendations
Customer experience
Subscription app setup on Shopify
Setting up product type as Subscription only, One-time purchase only, or both is just one step in this process. For subscription settings in the AfterShip Personalization app to reflect on your smart upsell widget for the product, cart, home, and thank you page, you must install a subscription management app like Recharge to configure subscription type, discount, and delivery frequency.
While AfterShip Personalization helps you recommend subscription products on your desired page on the website through upsell widgets, subscription management apps like Recharge, Appstle, Skio, Loop, and Seal help you configure subscription types for the products you want.
Let’s proceed with the Recharge subscription app as an example.
Install the Recharge app from the Shopify app store
Note: You must meet Shopify’s subscription eligibility requirements to set up a Recharge store
Go to Products in Recharge admin
Click Add products. A list of all your listed product will open
Select the Products you want to add to the subscription products list and click Add n product(s). The selected products will be successfully added to the list under Products
Recharge offers you the flexibility to either update subscription settings for products in bulk or update them individually
Select the checkbox for products you want to update. AfterShip two filters will appear at the top under the Search bar—Update subscription settings and More actions
To update settings for individual products, simply click on the Product.
a. Under subscription type, choose the type from One-time and subscription, Subscription, and Pre-paid subscription only you would like to offer customers. An explanation of each kind is mentioned below the checkbox.
Click on the One-time subscription
b. Set up a discount percentage to incentivize customers to subscribe and save
c. Set up an Order schedule (frequency) to determine the interval after which the order will be shipped, and the customer will be recharged on a recurring basis
Setting up multiple frequencies will give customers the option to select the schedule from the dropdown that suits them the best
d. To discontinue the subscription after the set number of recharges, select the checkbox. Input the number of recharge(s) after which the subscription will expire
e. Click Save
Go to Products in Shopify admin and select the product for which you have to manage the subscription settings of
a. Move down to the Purchase option on the order detail page. You can see the current subscription settings configured for the product
b. You can Edit and Delete the subscription plan by clicking the Manage and Remove options respectively
The Manage option allows you to update, add, and delete order frequencies and edit discount offer
You can edit the subscription type only on the subscription app. Therefore, upon clicking the Add purchase option, you will be asked to migrate to the subscription app to update the settings
The Remove option will delete the subscription plan from the product altogether.
Configure subscription-based product recommendations
Go to AfterShip Personalization > Smart upsell widgets in the AfterShip Personalization admin
Click Get started to select the consumer scenario or pre and post-purchase touchpoint where you would like to display personalized upsell offers
AfterShip Personalization offers 4 such scenarios
Product page
Home page
Cart page
Cart popup page
Thank you page
We will proceed with the product page for this tutorial.
The product page dashboard with key campaign metrics box and list of upsell widgets (if any) will open.
The product widget dashboard offers brief information on product recommendation widget type currently running, widget ID, active status, editing, and delete option.
Click Edit to change the widget’s product, display, and style settings.
Delete the widget by clicking the {...} button.
Once you land on the widget editor, you will get three settings
a. General settings
b. Display settings
c. Style settings
General settings
The general settings allow you to configure the widget’s core settings, including recommendation type, product type, excluded and pinned products, and widget location on your website.
Let’s know about each setting in brief.
Widget status: Select the checkbox for Enable to activate the widget.
Product settings: Configure the product recommendation rules. Select between pre-made rules that suggest products based on our AI model or set up your own custom rules to recommend products.
Pinned products: Select a product that will always appear first before the product recommendations.
Note: Pinned products override all the product exclusion rules.
Exclude options: Exclude specific products, items that are already in the customer’s cart, and specific product tags from displaying as recommendations.
Product type: Choose the type of product you would like to offer as product recommendations.
a. One-time purchase only: Products that can be purchased as a one-time item as configured in the subscription app (Ex. Multivitamins that can be purchased only once).
b. Subscription only: Products that have the option of being purchased on a recurring basis and shipped at regular intervals as configured in the subscription app (Ex. A bottle of multivitamins shipped and paid for every month).
c. Both (one-time and subscription): Products that have the option of being purchased as a one-time item or as a recurring subscription item as configured in the subscription app (Ex. Multivitamins that can be purchased only once or on a subscribe and save basis).
Offer promotion: Enable Discount if you want to give a discount on the recommended products. You can either select the fixed amount or set the discount percentage. Get clarity here.
Installation: Copy the widget code and paste it into your store code to display the smart upsell widget with the product recommendation type you configured. Find all the step to insert code by clicking Learn how.
AfterShip branding: Select the checkbox to remove AfterShip branding from your widgets.
Display settings
The display settings allow you to tweak the structure and layout of the widget and how it will look on both desktop and mobile.
Under widget display settings, you get,
Widget border: The border that will cover the widget containers on two sides: top and bottom. Choose between Solid, Dashed, or None.
Mobile padding: Add space between the content of the product page and the border of the widget on all four sides in mobile view.
Desktop padding: Add space between the content of the product page and the border of the widget on all four sides in desktop view.
Under widget title display settings, you get,
Widget title: Add a title for the upsell widget or ask our AI tool to suggest an attractive title for you. Set the padding and alignment based in
Under product layout display settings, you get,
Number of products: Drag the radio button on the progress bar to the right to increase the number of products that will be displayed on the widget. Move the radio button to the left to decrease the number of products
Mobile/ Desktop style: Select between grid, list, and carousel to determine how you wish to display product recommendations
Mobile/ Desktop column: For grid and carousel style layout, drag the radio button on the progress bar to set the number of columns for product display
For the mobile layout, you can set a maximum of 2 columns
For the desktop layout, you can set a maximum of 6 columns
Under Product content display settings, you get,
Content alignment: Select from the dropdown menu whether the product detail will be unified or individually aligned. This applies to the grid and carousel layout.
Image source: Select from where you want to fetch the images of the products—product or variant
Image aspect ratio: Select the image’s ratio of its width to its height.
Image border: Select the border type around the images. You can make it solid or keep it at it is by selecting None
Image radius: Select how round the image’s outer edges you want to keep by dragging the radio button on the progress bar.
Product info: Decide what product information will be displayed and how it will be displayed under the Product info settings. Set the alignment accordingly.
a. AfterShip Personalization has direct integration with Yotpo product reviews. Select the checkbox if you want to display product reviews via Yotpo integration.
b. You must install the Yotpo product review app to display review ratings to your upsell products.
Variant selector: Configure the logic behind the variant preselection of the recommended products
a. Smart variant match: Automatically displays the best product variant based on the selected products or the cart items
b. First available variant: Displays the first in-stock product variant in the Shopify admin to the shopper
c. Select the checkbox if you want to Allow customers to change product quantity right from the offer widget
Under Action button display settings, you get,
Primary button action
Primary button action: When customer click the button, where do you want them to stay on the same page, redirect to product page, redirect to cart page or redirect to checkout page
Primary button text: Input a catchy CTA text to prompt customers to take action.
Select variant button: Input text for the button that will allow customers to select product size, color, or other options.
Button radius: Configure the radius of the button by dragging the radio button to left or right.
Style settings
The style settings allow you to change the look and feel of your upsell widget to match your brand tone and style.
Style: The widget section will automatically sync with your Shopify store and match its theme.
Widget: Select colors for the background and border of the upsell widget at your convenience.
Under Widget title style settings, you get,
Title font: Select a font style for the widget title that aligns with your brand tone. By default, it will be synced with your Shopify store font style.
Title font size: Select an appropriate font size for the widget titles. We recommend between 25px to 30 px for maximum legibility.
Title font weight: Select how thick or thin characters in text should be displayed—Regular, Medium, or Bold
Title text: Select the color in which the title text will be displayed
Under Product info style settings, you get,
Product info font: Select a font style for product titles and information from the list of font styles on the dropdown menu. By default, it will be synced with your Shopify store font style.
If you wish to return to your Shopify store's original settings, click Reset to store theme style under style settings.
You can also
Configure the font size and weight—regular, medium, or bold.
Select if you want to show or hide the trailing zeros after the product price.
Individually set the color of the product name, product price, compare-at price, and discount value.
Under Variant and quantity selectors style settings, you can
Configure the color for the variantor selector background, border, and text.
Under Action button style settings, you can
Configure the font, font size, and weight of the action button.
Individual set color for the action button text, background, and border.
Click Save to clock in changes.
Customer experience
The products recommendations on the smart upsell widget will be the result of the combination of
The recommendation rules you’ve set up
The products you’ve pinned to appear first
The products you’ve selected to be excluded from being displayed as recommendations
The product type
If you have selected
1. One-time subscription
The products not configured as Subscription only in the subscription management app will show.
Products configured as a one-time purchase and subscription will show
Products configured as pre-paid subscription only will show
2. Subscription only
The products that are configured as Subscription only in the subscription management app will show.
3. Both (one-time and subscription)
The products that are configured as a one-time purchase and subscription, subscription only, and one-time purchase only in the subscription management app will show.
For any further questions or help, please contact our chat support team
Updated on: 14/06/2024
Thank you!