Plans: All plans Platforms: Shopify
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 AfterShip Personalization’s admin.
Embed widget code in the Shopify Theme 1.0 (DEBUT)
Home page
Log in to 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-recommendationfor 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-widthis 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.jsonand inserthome-recommendation.liquidinto the specific location 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
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.liquidand 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.liquidand 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>
5. Click Save.
Need help?
For any further questions or help, please contact our chat support team