# Save for Later Button

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.

{% hint style="info" %}
**Requires coding** .

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

### 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.

```jsx
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.

```jsx
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.

```jsx
// 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](/files/tUEJir1sxjI4vJMlwdLP)

Save for Later button in Dawn theme


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.swish.app/customizations/save-for-later-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.