How to set up the Add to Cart Widget in Customer Hub
You will learn
Learn how to display an interactive Add to Cart Widget on your product detail pages. The customizable widget lets shoppers add a product to their cart or save it for later as they scroll down the page.
Customer Hub for Shopify currently supports standard storefronts and Shopify Headless. For WooCommerce, navigate to https://help.klaviyo.com/hc/en-us/articles/47792369863451
Before you begin
This guide covers how to enable the Add to Cart Widget on your site. Before proceeding, make sure you have the Customer Hub feature enabled in Klaviyo. To let shoppers save products from the widget, enable Favorites.
The Add to Cart Widget is a paid Customer Hub feature and is also available during a Customer Hub free trial. Make sure the main Customer Hub widget is visible to the shoppers you want to reach.
Learn more about Customer Hub.
Overview
The Add to Cart Widget keeps a purchase option within reach as shoppers scroll through a product detail page. It animates from a minimal widget icon into an expanded view of the current product with an Add to Cart button. The widget displays only on product detail pages, at the scroll depth you select. You can also choose which shoppers see it.
When Favorites is enabled, shoppers can also save items to their favorites list directly from the widget.
When the widget is enabled, Web Chat notifications will still be accessible in a minimal notification bar, ensuring the shopper only sees the most important information at any given time.
How to set up the Add to Cart Widget
- Navigate to Customer Hub in Klaviyo's left-hand navigation.
- Select Design.
- Select Edit your Hub.
- Select Closed, then choose Add to cart from the view dropdown above the preview.
- On the Content tab, turn on Show Add to Cart popover. Under Timing, enter a value from 1 to 100 for Show popover after shopper has scrolled. This is the percentage of the distance a shopper can scroll from the top to the bottom of the page.
- Under Visibility, choose a Login status to control which shoppers see the Add to Cart Widget:
- All shoppers (recognized, logged in, and logged out) – show the widget to everyone who visits a product detail page.
- Logged in or recognized shoppers – show the widget to shoppers recognized by Klaviyo (via a _kx token) or those logged into their account. This is the recommended setting for a personalized experience that excludes anonymous visitors. This option is available when Recognized shopper personalization is enabled in Customer Hub’s Settings.
- Logged in shoppers only – restrict the widget strictly to users who have completed a full account login.
- Logged out shoppers – show the widget to shoppers who are not logged in, including anonymous visitors. If Favorites is visible to them, anonymous shoppers can save products on their device without logging in. Their saved favorites sync to their profile when they log in.
- Optional: Use Show to groups or Hide from groups to include or exclude lists or segments, such as VIP customers or newsletter subscribers.
- Group filters do not restrict anonymous shoppers when Login status is set to All shoppers or Logged out shoppers. To target known groups, select Logged in or recognized shoppers or Logged in shoppers only.
- Click Publish to save your widget settings.
If you have kept Customer Hub hidden while configuring it, return to Customer Hub and select Settings. Under General settings, set Customer Hub visibility to Live, and click Save to make it live on your site.
How to disable the Add to Cart Widget
- Navigate to Customer Hub in Klaviyo's left-hand navigation.
- Select Design.
- Select Edit your Hub.
- Select Closed, then choose Add to cart from the view dropdown above the preview.
- Select the Content tab.
- Turn off Show Add to Cart popover.
- Click Publish to apply your changes.