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 Shopify 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
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 title: Add a title for the upsell 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)
Location: Copy the widget code and paste it into your store code to display the smart upsell widget with the product recommendation type you configured
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 layout 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 info settings, you get,
Text alignment: Select from the dropdown menu whether the product detail will be left, right, or centrally aligned
Image aspect ratio: Select the image’s ratio of its width to its height
Image radius: Select how round the image’s outer edges you want to keep by dragging the radio button on the progress bar
Under Action button settings, you get,
Button text: Input a catchy CTA text to prompt customers to take action
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
Color: Select colors for the different elements of the upsell widget at your convenience
Under Font settings, you get,
Title font size: Select an appropriate font size for the widget titles
We recommend between 25px to 30 px for maximum legibility
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
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
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 Shopify 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
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 title: Add a title for the upsell 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)
Location: Copy the widget code and paste it into your store code to display the smart upsell widget with the product recommendation type you configured
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 layout 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 info settings, you get,
Text alignment: Select from the dropdown menu whether the product detail will be left, right, or centrally aligned
Image aspect ratio: Select the image’s ratio of its width to its height
Image radius: Select how round the image’s outer edges you want to keep by dragging the radio button on the progress bar
Under Action button settings, you get,
Button text: Input a catchy CTA text to prompt customers to take action
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
Color: Select colors for the different elements of the upsell widget at your convenience
Under Font settings, you get,
Title font size: Select an appropriate font size for the widget titles
We recommend between 25px to 30 px for maximum legibility
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
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
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: 15/04/2024
Thank you!