You will learn
Learn how to allow shoppers to save their favorite items to the Customer Hub drawer on your site. Enabling favorites to display in the Customer Hub drawer helps your shoppers quickly find the items that interest them most, or pick up where they left off in a previous shopping journey.
Customer Hub is a part of Klaviyo Service and access to the beta is being rolled out gradually. If you do not have access to the Customer Hub tab in Klaviyo’s main navigation yet, join the Customer Hub beta. Note that you must be on a paid Klaviyo email plan to be approved. Participation in this beta is only currently available in English for those who operate a Shopify Online Store.
While this product remains in beta, functionality is not complete, and will be subject to change frequently throughout the beta period. By enabling Customer Hub through the onboarding workflow, you agree to the beta terms and conditions. While this feature is free during the beta period, it will be sold separately upon launch to general availability.
For feedback about Customer Hub functionality, email customerhub@klaviyo.com.
Before you begin
This guide explains how to activate favorites so they display in the Customer Hub drawer on your site. Before proceeding, ensure that the Customer Hub feature is enabled in Klaviyo.
Learn more about Customer Hub.
About favoritesAbout favorites
When enabled in your Customer Hub settings in Klaviyo, this feature allows all site visitors to add products to their favorites list, regardless of whether they are signed into a customer account.
Enable favorites to display in the Customer Hub drawer
To give shoppers the ability to save their favorite products on your site and display them in the Customer Hub interface, you must:
- Enable the Favorites setting in Klaviyo
- Add favorite icons to your product details pages in your Shopify store
Both of these can be accomplished from your Customer Hub settings in Klaviyo:
Note that if your Customer Hub feature is live, saving this change publishes it on your site. If not, you’ll need to set your Customer Hub to live in the General settings menu to see this change.
- In Klaviyo’s main, left-hand navigation, select Customer Hub.
- Click Settings
- Choose Extensions.
- Under Favorites, check the box to Enable favorites.
- In the Choose icon dropdown, select which type of favorite icon to display under your products (i.e., a heart or a plus sign).
- By default, the preview shows the unselected (i.e., not favorited) version of the icon. Click on the icon in the preview to see it change to the favorited state.
- Click Save.
- Select Add app block. Doing so will launch your Shopify online store in a new window, open to the theme editor and showing a modal indicating that the Klaviyo Wishlist app block has been added.
- Click and drag the app to adjust its positioning on your product details page as needed.
- When ready, click Save to save your changes in Shopify.
Once enabled, the "Favorites" section on the For You tab in the Customer Hub drawer displays a visitor's favorited items. They can expand this section to view the items in a list view, and click on an item to go directly to its product details page.
Manually install the Klaviyo Wishlist app on your Shopify site (vintage themes or custom set up)
If you use a vintage Shopify theme, or a custom setup that doesn’t support app blocks, you may need to manually install the Klaviyo Wishlist app to the pages where you’d like favoriting actions (e.g., product pages).
To do so:
- Open your Shopify store admin.
- Under sales channels, select Online store.
- Click the three dots menu on your current theme, then select Edit code. If you would rather test it on a draft theme, duplicate your current theme first and then edit the code of the duplicate theme.
- Find the file for your product details page. This varies by theme, but typically has the word “product” in its name. For example, in the Dawn theme, this is called “main-product.liquid.”
- Paste the following code snippet wherever you want the favorites button to appear:
<div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div> - Click Save.
- Click Preview store.
- Navigate to a product page within your store preview. The added favorites button should be visible in the designated location.
Test favoriting actions
Make sure that your favorited items display in the Customer Hub drawer. To do so, click the favorites icon on one of your product pages and check that it adds to the “Favorites” section of your Customer Hub.