> For the complete documentation index, see [llms.txt](https://docs.intelligems.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intelligems.io/offer-personalizations/offers-integrating-widgets/cart-gwp-picker.md).

# Cart GWP Picker

## Overview

The Cart GWP Picker lets shoppers choose their own gift with purchase directly from the cart rather than receiving a pre-selected item. When a shopper's cart meets your spend threshold, a picker component appears showing the available gift options. They select the one they want, and it's added to cart at $0.

Giving shoppers agency over their gift meaningfully increases the perceived value of the offer. Instead of receiving a sample they may not want, they get something they actually chose, which drives higher conversion on the GWP threshold, reduces gift-related abandonment, and makes the promotion feel more premium.

<figure><img src="/files/rqQGYaZjDhHSo2zKnYyP" alt=""><figcaption></figcaption></figure>

## Configuration

* **Heading text:** The header displayed in your GWP picker.
* **Product settings:**
  * **Image width:** Define how wide the image is.
  * **Image cropping:** Define whether the image is cropped to it's original dimensions or square.
  * **Strikethrough price:** Define whether the regular or compare at price is used as the strikethrough price.
  * **Custom price text:** Define the custom price text — this defaults to "FREE".
  * **Default variant:** Define which variant is selected by default.
  * **Dropdown style:** Define which style dropdown is used in the picker.
* **Button text:** Define the copy in the add to cart button — this defaults to "Add to cart".
* Color & style:
  * **Appearance:** Control the corner radius, border thickness and text alignment.
  * **Colors:** Control the colors for all fields.
  * **Typography:** Control the font sizes and styles for each text field.

## Integrating the GWP Picker

Paste the following code snippet into your Shopify theme code, in the theme file that renders your cart in order to add a GWP Picker to a Test or Personalization. This file may be called something like `cart.liquid`, `slideout-cart.liquid`, etc. We recommend adding this code snippet above the subtotal in your cart:

```html
<ig-gwp-variant-picker></ig-gwp-variant-picker>
```

<details>

<summary>Integrating with Rebuy</summary>

To integrate this component with your Rebuy cart, follow these steps:

1. Go to [rebuyengine.com/dashboard](https://rebuyengine.com/dashboard)
2. Click **Smart Cart** in the side navigation
3. Select the cart you want to edit
4. Click **Add Component** in the editor
5. Choose **Custom Code Block** from the component list
6. Paste the HTML component for our GWP picker: \<ig-gwp-variant-picker>\</ig-gwp-variant-picker>
7. Drag and drop the block to position it where you want it in the cart - we recommend placing it at the bottom of the body section
8. Click **Save**, then confirm

Please see the video below of these steps:

{% embed url="<https://www.loom.com/share/285cb81f31c045fd986824725e24767a>" %}

</details>

<details>

<summary>Integrating with Upcart</summary>

To integrate this component with your Upcart cart, follow these steps:

1. Go to your **Upcart dashboard**
2. Click **Carts** in the side navigation
3. Select the cart you want to edit
4. Got to **Settings** at the bottom of the left navigation for this cart
5. Choose **Custom HTML**
6. Choose the **location** for the custom HTML in the dropdown - we recommend "Below cart items" or "Above footer/add-ons"
7. Paste the HTML component for our GWP picker: \<ig-gwp-variant-picker>\</ig-gwp-variant-picker>
8. Drag and drop the block to position it where you want it in the cart - we recommend placing it at the bottom of the body section
9. Click **Save**
10. Go back to **Cart settings**, and open **Advanced Settings** - if **"Render cart in shadow DOM"** is enabled, disable it and hit Save - this is **required** for our GWP picker to display

Please see the video below of these steps:

{% embed url="<https://www.loom.com/share/b7915f2d93e94577834f6964e530594a>" %}

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.intelligems.io/offer-personalizations/offers-integrating-widgets/cart-gwp-picker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.