Instead of displaying a generic reminder, the popup automatically brings the shopper’s actual cart items back into view — including product images, titles, prices, and buttons.
Note
Claspo widgets do not appear on Shopify checkout pages. Claspo uses Shopify theme app extensions, which do not work on these pages. This popup can appear on storefront pages, such as product or cart pages, when a shopper has items in their cart and triggers exit intent.
Step 1. Choose a Shopify Products template
In the template library:
1. Open the Features filter.
2. Select Shopify Products.
3. Choose a template that fits your campaign and open it in the editor.
Step 2. Connect the popup to the shopper’s cart
In the widget editor:
Click the Shopify Products component.
Open the Product Source dropdown.
Select Cart Products.
Once the popup is live, Claspo will automatically pull the products from each shopper’s cart and display their images, titles, prices, and purchase buttons.
Step 3. Set the number and layout of products
Use the Max Products setting to define the maximum number of cart items that can appear in the popup.
Choose a number that keeps the widget easy to scan. For example, three products work well for a compact desktop popup, while fewer items may be more comfortable on mobile.
Under Layout Mode, choose how the product cards should appear inside the popup.
Preview the available layouts and select the one that works best with your design and the number of products you want to show. Then check both desktop and mobile versions of the widget.
Step 4. Set exit intent and cart conditions for storefront pages
If you chose an exit-intent template, the Exit intent trigger is enabled by default. Otherwise:
1. Open Triggering.
2. Find the When to display section.
3. Enable Exit intent.
Next, make sure the popup appears only when the shopper has at least one product in their cart.
In Triggering:
1. Open the On pages section.
2. Under Include pages that, click Add condition.
3. Select Number of cart items.
4. Choose greater than as the operator.
5. Enter 0 as the value.
Step 5. Test the popup on your storefront
Test the popup on a storefront page, such as a product or cart page, with both a filled and an empty cart. The popup will not appear on checkout pages.
1. Add one or more products to the Shopify cart.
2. Trigger exit intent on desktop.
3. Check that the popup displays the correct product images, titles, prices, and buttons.
4. Repeat the test on a real mobile device using a rapid upward scroll.
5. Empty the cart and test again — the cart abandonment popup should not appear.