How to add cart to Customer Hub

Customer Hub now includes a built-in cart experience. Shoppers can view and manage their cart directly inside the hub — without navigating away from the page. You can configure what appears in the cart, including product recommendations and saved favorites, and optionally replace your storefront's cart links so they open Customer Hub instead.

Before you begin

Before setting up the cart, make sure you have the Customer Hub feature enabled in Klaviyo. Cart is available on Shopify and Shopify Headless storefronts with a paid Customer Hub plan or an active free trial.

Complete the setup for Customer Hub on Shopify or Shopify Headless before adding the cart.

For Shopify Headless, have your developer confirm that your storefront creates a Shopify cart before shoppers open it in Customer Hub. Customer Hub uses the storefront's existing cart.

Setting up the cart

1. Navigate to Website > Customer Hub > Design and select Edit your Hub.
2. Open and enable the cart using the controls in your editor:
   • If you see Add content (+) in the left-hand navigation, select it, then select Cart under Features. This enables the cart and opens its settings. If the cart is already enabled, select Cart from the preview's view menu, then click the cart preview to edit its settings.
   • If you see the Open and Closed controls above the preview, select Open. From the Page menu, select Cart. In the Content tab, set Visibility to All shoppers.

From here you can:

• Enable or disable the cart in Customer Hub
• Specify cart placement as either a Customer Hub tab or its own drawer
• Choose what to show inside the cart (Favorites, Product recommendations)
• Replace cart links so storefront links ending in /cart open the Customer Hub cart instead of the native cart page

The Add to Cart widget is configured separately. It appears on product detail pages after the shopper reaches your configured scroll threshold, subject to your shopper visibility settings. Learn how to set up the Add to Cart widget.

What shoppers see

When a shopper opens the cart with items in it, either in the Customer Hub tab or its own drawer, they see:

• Your cart — items currently in their cart, with the product image, name, variant, and price
• Quantity controls — a stepper with a trash icon to remove an item, and minus/plus buttons to adjust quantity
• Complete your cart — up to 3 product recommendations below cart items, based on the shopper's cart and behavior (when product recommendations are enabled for Customer Hub and the cart, and recommended products are available)
• Shop your favorites — saved items that shoppers can add to their cart if available (when Favorites is enabled for Customer Hub and the cart, visible to the shopper, and saved items are available)
• Subtotal and Checkout button — pinned to the bottom of the panel. Clicking Checkout takes the shopper to Shopify checkout.

If the cart is empty, shoppers see Your cart is empty and a Start shopping button instead of the cart items, recommendations, favorites, and checkout bar.

Cart features

Favorites in the cart

When enabled and visible to the shopper, a Shop your favorites section appears inside a nonempty cart if the shopper has saved products to show. Shoppers can add available saved items directly to their cart from this view. On standard Shopify storefronts, saved products already in the cart are excluded from this section.

To show favorites in the cart, turn on Favorites in the cart settings in the Hub editor, then click Publish.

Product recommendations

When enabled and recommended products are available, a Complete your cart section appears below the shopper's items in a nonempty cart. Recommendations are personalized based on what's in the shopper's cart and their browsing history. The section shows up to 3 products with at least 1 available variant. On standard Shopify storefronts, products already in the cart are excluded.

First enable product recommendations for Customer Hub under Customer Hub > Extensions and save that setting.

To show recommendations in the cart, turn on Product recommendations in the cart settings in the Hub editor, then click Publish.

Replace cart links

When enabled, storefront links whose URLs end in /cart open the Customer Hub cart instead of navigating to your Shopify cart page. A cart icon is replaced when it uses one of these links. Custom cart buttons and links with query strings are not covered by this setting. Shoppers can manage their cart in Customer Hub, then use Checkout to continue to Shopify checkout.

To enable this setting, turn on Replace cart links in the cart settings in the Hub editor, then click Publish. Test your storefront's cart icon to confirm it opens the Customer Hub cart.

Cart placement

Choose how shoppers access the cart using the Placement setting in the cart settings in the Hub editor:

You can also configure the overall hub appearance (shape, dock side, colors, fonts) from the Style tab — the cart inherits these settings.