Save for Later
The Save for Later feature lets customers move items from their cart to their wishlist with a single click. This is useful for customers who aren’t ready to buy immediately but don’t want to lose track of items they’re considering.
How It Works
Customer has items in their cart
They click “Save for Later” next to an item
The item is added to their wishlist
The item is automatically removed from their cart
The button shows a success state
Adding Save for Later to Your Cart
Add this button next to each item in your cart template:
```liquid {% for item in cart.items %}
Save for Later
{% endfor %} ```
Required Attributes
Attribute | Description |
| The product’s URL handle |
| The specific variant ID in the cart |
| The cart line item key (required for removal) |
Optional Attributes
Attribute | Description |
| Text to show after saving (e.g., “Saved!”) |
| Icon to display (e.g., “icon_heart”) |
The Line Item Key
The data-line-item-key attribute is crucial. It tells Shopify which specific cart item to remove. In Liquid, this is available as item.key.
Without this attribute, the item will be added to the wishlist but NOT removed from the cart.
Cart Refresh
After removing an item from the cart, the app:
Dispatches a
cart:refreshcustom eventAttempts to call
window.Shopify.theme.cart.update()if available
Most themes will update automatically. If your cart doesn’t refresh, you may need to add custom JavaScript:
javascript document.addEventListener('cart:refresh', function() { // Your cart refresh logic location.reload(); // Simple but effective });
Styling
Add CSS to style the Save for Later button:
```css .wishlist-save-for-later { background: transparent; border: none; color: #666; text-decoration: underline; cursor: pointer; font-size: 14px; }
.wishlist-save-for-later:hover { color: #333; }
.wishlist-save-for-later.success { color: #4caf50; }
.wishlist-save-for-later.busy { opacity: 0.5; pointer-events: none; } ```
AJAX Carts
If your theme uses an AJAX cart (drawer or popup), the implementation is the same. Ensure:
The buttons are rendered with each cart item
Your cart refresh logic works with AJAX updates
Requirements
Save for Later requires:
Customer to be logged in, OR
Guest wishlists to be enabled
If neither condition is met, clicking the button will show a login prompt.
Best Practices
Position clearly - Place the button near the remove button
Use clear text - “Save for Later” is universally understood
Show feedback - Use
data-success-text="Saved!"for confirmationStyle consistently - Match your cart’s design
Test the flow - Verify items move correctly between cart and wishlist
Related Articles
Custom Buttons - All button options and attributes
Guest Wishlists - Enable for non-logged-in users