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.

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:

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

Integrating with Rebuy

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

1. Go to 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:

Integrating with Upcart

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: