How to display favorited items in Customer Hub

Estimated 4 minute read
|
Updated Feb 20, 2025, 9:58 PM EST
You will learn

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.

Before you begin

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 favorites

About 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. 

The Customer Hub drawer open on an example brand's site and showing the Favorites section highlighted with some products featured in it.

Enable favorites to display in the Customer Hub drawer

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.

  1. In Klaviyo’s main, left-hand navigation, select Customer Hub.
  2. Click Settings
    The Settings button in the top right corner of the Customer Hub dashboard in Klaviyo.

  3. Choose Extensions.
  4. Under Favorites, check the box to Enable favorites.
  5. 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.
  6. Click Save.
    The Extensions menu in Customer Hub settings in Klaviyo showing Favorites enabled and the heart icon selected.
  7. 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.
    An example default product page in Shopify theme editor showing a modal informing you that a Klaviyo Favorites app was enabled.
  8. Click and drag the app to adjust its positioning on your product details page as needed. 
  9. 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.

The Favorites section of Customer Hub expanded and displaying a shopper's favorited items in the list view.

Manually install the Klaviyo Wishlist app on your Shopify site (collapsible section)

Manually install the Klaviyo Wishlist app on your Shopify site (collapsible section)

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:

  1. Open your Shopify store admin.
  2. Under sales channels, select Online store.
  3. 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.
    The Additional options 3 dot menu selected on a current theme in the Shopify backend.
  4. 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.”
  5. Paste the following code snippet wherever you want the favorites button to appear:
    <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div>
  6. Click Save.
  7. Click Preview store.
  8. Navigate to a product page within your store preview. The added favorites button should be visible in the designated location.
Test favoriting actions

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.

An example product's details page showing the favorites icon displaying beneath the add to cart button.

Additional resources

Additional resources

Was this article helpful?
Use this form only for article feedback. Learn how to contact support.

Explore more from Klaviyo

Community
Connect with peers, partners, and Klaviyo experts to find inspiration, share insights, and get answers to all of your questions.
Live training
Join a live session with Klaviyo experts to learn about best practices, how to set up key features, and more.
Support

Access support through your account.

Email support (free trial and paid accounts) Available 24/7

Chat/virtual assistance
Availability varies by location and plan type