Articles on: Upsell widgets

How to Embed Smart Upsell Widgets in Your Shopify Store Theme 2.0

Plans: All plans Platforms: Shopify


Overview


This tutorial will help you insert the smart upsell widget into your Shopify store’s home, cart (page and drawer), product, and thank you page with the help of a code. This tutorial is focused on helping you display smart upsell offers on Shopify Theme Store 2.0.


Checkout this article to learn how you can embed smart upsell widgets in your Shopify Theme Store 1.0


What you’ll learn


In this tutorial, we’ll show you how to:


  1. Embed smart upsell widget in Shopify



  1. Additional resources


Embed smart upsell widget in Shopify


This method applies to Shopify theme 2.0 stores to display smart upsell widgets on the product, home, cart, and thank you pages.


Embed widget ID via theme editor


  1. Navigate to Smart upsell widgets in the AfterShip Personalization admin
  2. Select the pre or post-purchase scenario or Shopify store page where you want the upsell widget to appear


  • For every pre and post-purchase scenario, a widget ID will be automatically created while setting up the product recommendation rules and configuring widget display and style settings


  1. Enable the widget in AfterShip: Ensure your widget is enabled in the AfterShip Personalization admin and customize its settings to your preference. If you're running an A/B test, remember to enable both versions.


  1. Copy the widget ID: Scroll down to the Installation section and click "Copy ID" in the top right corner. Scroll down to Installation and copy the widget ID. Widget code can also be copied from the widget dashboard and widget editor’s main header


  1. Open the Shopify theme editor: Go to Themes under Online store settings in the Shopify admin
  • Migrate to where your store theme is mentioned and click Customize



  • You will land on the theme editor. Select the page—Product, Home page, or Cart page, where you want to embed the widget code from the dropdown menu situated centrally at the top of the editor.


The installation steps for all the scenarios are the same, you just have to copy the widget ID from their respective editors in AfterShip Personalization and add those codes to their respective theme editors.


A. Product page

  • If you choose Product page, select Default product to open the general editor that will automatically apply changes to all the associated product pages



B. Home page



C. Cart page



  1. Add a new section in theme editor: From the three options on the side menu, select Sections settings
  • Click + Add section at the bottom under Theme settings, then select AfterShip Smart Offer
  • Click on AfterShip Smart Offer to open a side panel on the right-hand side



  1. Enter the widget ID: Under Apps, select AfterShip Smart Offer, paste the widget ID copied from AfterShip Personalization in the Step 4 and click **Save **



  1. Adjust the widget's location: Drag-and-drop the widget to your desired location in the left panel. Use the preview in the top right to ensure it looks perfect. For A/B testing, only the first enabled version will appear in the preview.* Drag-and-drop the AfterShip Smart Offer widget to reposition it on the product page



  1. Save your Shopify theme


Duplicate widget IDs will be ignored and show a single smart upsell widget



Thank you page widget installation


  1. Copy the smart upsell widget ID for the Thank you page widget editor from the AfterShip Personalization admin



  1. Go to Settings in the Shopify admin
  2. Navigate to Checkout and scroll down to Order status page
  3. In the Additional scripts dialogue box, insert the widget code


<div data-personalization-id=“00015"></div>




  1. Click Save


Cart drawer widget installation


  1. Copy the widget code from the AfterShip Personalization admin > Smart upsell widgets > Cart drawer




  1. Go to Themes under Online store settings in the Shopify admin
  2. Migrate to where your store theme is mentioned and click Customize
  3. You will land on the theme editor. Select Cart where you want to embed the widget code from the dropdown menu at the top of the editor
  4. From the three options on the side menu, select Theme settings
  5. Move to the Cart section and select Drawer from the dropdown menu as your Cart type



  1. Click Save and exist the online theme editor
  2. If you are using Chrome, right-click on the page and select Inspect from the dropdown menu



  1. Find the code for the section where you want to display the widget



  1. Migrate to where your store theme is mentioned again and click {...} > Edit code
  2. Navigate to Snippets in Shopify’s online theme editor and click cart-drawer.liquid



  1. On the cart-drawer.liquid container, find cart-drawer-items and paste the widget code you copied in step 1 above it


<from>         
<div data-personalization-id="00007"></div>
</cart-drawer-items>



  1. Click Save



Additional Resources


Checkout this article to learn how you can embed smart upsell widgets in your Shopify store theme 1.0.


For any further questions or help, please contact our chat support team.

Updated on: 13/05/2024