How to Embed Smart Upsell Widgets in Your Shopify Store Theme 1.0
Plans: All plans Platforms: Shopify
This tutorial will help you insert the smart upsell widget into your Shopify store’s home, cart, product, and thank you pages with the help of a code. The smart upsell widget's location settings can be configured in the AfterShip Personalization’s admin.
In this tutorial, we’ll show you how to:
Embed widget code in the Shopify Theme 1.0 (DEBUT)
Home page
Cart drawer
Cart
Product page
Thank you page
Log into your AfterShip Personalization admin dashboard
Go to Smart upsell widgets > Home page
Click Create widget
In the editor, go to Installation > Copy code
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Navigate to Sections in Shopify’s online theme editor and click Add a new section
Select the checkbox for liquid and input the File name, say home-recommendation for easy reference, and then click Done
Once the File name is added, a code container will open
Give a name to the section
Add the widget code into the liquid container by adding the code
If you want to give container page margins or control the widget’s width, you can do so by applying styles to the container
In the following example, a class page-width is applied to the container to give the upsell widget margins.
Find the liquid or JSON file for the homepage settings_data.json and insert home-recommendation.liquid into the specific location on the homepage
In the example below, the product recommendation widget is inserted between the feature-columns and collection sections on the homepage
If your Shopify theme supports the cart drawer feature, you can follow the instructions to embed the smart upsell widget into your Shopify store’s cart drawer here.
However, if you are using a third-party cart drawer app from the Shopify app store, you need to find the integration method with the app to embed AfterShip Personalization’s smart upsell widget into your cart drawer app.
Here’s a quick example for one of the cart drawer apps.
Once the app is downloaded and installed for your Shopify store, follow these steps
Open the Cart Drawer app
Navigate to the section where you can add code snippets or custom code
Copy the code below and paste it into the appropriate field
Note: Replace the widget code with your AfterShip Personalization admin widget code.
Save the change
The customer can now view the cart drawer and smart upsell widget on their store
Copy the widget code from the AfterShip Personalization admin > Smart upsell widgets > Cart
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Find the liquid or JSON file for the cart page cart-template.liquid and insert the widget code copied from AfterShip Personalization admin into the specific location on the cart page (see below)
Copy the widget code from the AfterShip Personalization admin > Smart upsell widget > Product page
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Find the liquid or JSON file for the product page product-template.liquid and insert the widget code copied from AfterShip Personalization admin into the specific location on the cart page
Copy the smart upsell widget ID for the thank you page from the AfterShip Personalization admin
Go to Settings in the Shopify admin
Navigate to Checkout and accounts and scroll to the Order status page section
In the Additional scripts dialogue box, insert the widget code
Click Save
For any further questions or help, please contact our chat support team
Overview
This tutorial will help you insert the smart upsell widget into your Shopify store’s home, cart, product, and thank you pages with the help of a code. The smart upsell widget's location settings can be configured in the AfterShip Personalization’s admin.
What you’ll learn
In this tutorial, we’ll show you how to:
Embed widget code in the Shopify Theme 1.0 (DEBUT)
Home page
Cart drawer
Cart
Product page
Thank you page
Embed widget code in the Shopify Theme 1.0 (DEBUT)
Home page
Log into your AfterShip Personalization admin dashboard
Go to Smart upsell widgets > Home page
Click Create widget
In the editor, go to Installation > Copy code
Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Navigate to Sections in Shopify’s online theme editor and click Add a new section
Select the checkbox for liquid and input the File name, say home-recommendation for easy reference, and then click Done
Once the File name is added, a code container will open
Give a name to the section
"name": "Section name"
“name”: “home-recommendation”Add the widget code into the liquid container by adding the code
<div data-personalization-id="widget code"></div>
<div data-personalization-id="00005"></div>If you want to give container page margins or control the widget’s width, you can do so by applying styles to the container
In the following example, a class page-width is applied to the container to give the upsell widget margins.
<div class=”page-width”></div>Find the liquid or JSON file for the homepage settings_data.json and insert home-recommendation.liquid into the specific location on the homepage
In the example below, the product recommendation widget is inserted between the feature-columns and collection sections on the homepage
Cart drawer
If your Shopify theme supports the cart drawer feature, you can follow the instructions to embed the smart upsell widget into your Shopify store’s cart drawer here.
However, if you are using a third-party cart drawer app from the Shopify app store, you need to find the integration method with the app to embed AfterShip Personalization’s smart upsell widget into your cart drawer app.
Here’s a quick example for one of the cart drawer apps.
Once the app is downloaded and installed for your Shopify store, follow these steps
Open the Cart Drawer app
Navigate to the section where you can add code snippets or custom code
Copy the code below and paste it into the appropriate field
Note: Replace the widget code with your AfterShip Personalization admin widget code.
Save the change
The customer can now view the cart drawer and smart upsell widget on their store
Cart
Copy the widget code from the AfterShip Personalization admin > Smart upsell widgets > Cart
<div data-personalization-id="widget code"></div>
<div data-personalization-id="00001"></div>Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Find the liquid or JSON file for the cart page cart-template.liquid and insert the widget code copied from AfterShip Personalization admin into the specific location on the cart page (see below)
Product page
Copy the widget code from the AfterShip Personalization admin > Smart upsell widget > Product page
<div data-personalization-id="widget code"></div>
<div data-personalization-id="00006"></div>Go to Themes under Online store settings in the Shopify admin
Migrate to where your store theme is mentioned and click {...} > Edit code
Find the liquid or JSON file for the product page product-template.liquid and insert the widget code copied from AfterShip Personalization admin into the specific location on the cart page
Thank you page
Copy the smart upsell widget ID for the thank you page from the AfterShip Personalization admin
Go to Settings in the Shopify admin
Navigate to Checkout and accounts and scroll to the Order status page section
In the Additional scripts dialogue box, insert the widget code
<div data-personalization-id="00041"></div>Click Save
For any further questions or help, please contact our chat support team
Updated on: 13/05/2024
Thank you!