Save for Later in cart

Add a save for later button to the shopping cart.

This guides explains how to add a Save for Later button to your cart. The Save for Later button will move a product from the cart to the wishlist. In this guide we will use Shopify’s Dawn theme as an example. Other themes will work as well, but might require minor adjustments.

☝

Requires coding This customisation requires some light coding. If you are unfamiliar with code, we will be glad to do this for you.

Code Access

The Save for Later button is a Code Access customisation. Make sure that the Code Access app embed is activated in the theme editor, otherwise the code will not be loaded into your theme.

In Code Access navigate to Save for Later section on the left and uncomment the sample code. (Select All, Command+/) The customisation consists of two functions: inject and define. Use the inject function to add the button to your cart’s line items. The define function will create the web component that renders and controls the button.

Inject web component

Every line item in your cart will have a link to the product page. We use the link url to read the product information (handle, variant) for each line item. The first thing you need to adjust is the product link selector in line 6 of the sample code. The selector varies from theme to theme and must point to an anchor element that links the to line item’s product page.

export function inject({ theme }) {
  theme.watch(
    {
      // Line 6
      selector: '.cart-item .cart-item__name[href*="/products/"]',
    },
    (target) => {
      // ...
    }
  );
}

Next we will adjust the code that inserts the element into your cart. Because the product link is usually nested in the line item markup, we move up the DOM tree with closest and then find the element that we want to inject the Save for Later button into. This is in line 9 of the sample code. Both of these css selectors are theme specific and need to be adjusted to work with your theme.

export function inject({ theme }) {
  theme.watch(
    {
      selector: '.cart-item .cart-item__name[href*="/products/"]',
    },
    (target) => {
      // Line 9
      target.closest(".cart-item").find(".cart-item__quantity").append(
        theme.createComponent("save-for-later", {
          // ...
        })
      );
    }
  );
}

Update the click handler

When the Save for Later button is clicked, it will first add the product to your customer’s wishlist and then trigger the line item’s remove function. The easiest method to integrate with your cart’s remove function is to trigger a click on the cart’s already existing remove button.

Find line 96 in the sample code in Code Access. Again we move up the DOM tree (relative to the Save for later button’s location) with closest and then find the remove button. Both css selectors are theme specific and need to be adjusted to work with your theme.

// Line 96
const cartRemoveButton = this.closest(".cart-item").querySelector(".cart-remove-button");
cartRemoveButton.click();

The web component provided in our sample code will render a button with a heart icon. The markup of this component can be adjusted if needed, but it is not required and not part of this guide.

You should now see the Save for Later button in your line items.

Save for Later button in Dawn theme

On this page