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:
Integrating with Rebuy
To integrate this component with your Rebuy cart, follow these steps:
Click Smart Cart in the side navigation
Select the cart you want to edit
Click Add Component in the editor
Choose Custom Code Block from the component list
Paste the HTML component for our GWP picker: <ig-gwp-variant-picker></ig-gwp-variant-picker>
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
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:
Go to your Upcart dashboard
Click Carts in the side navigation
Select the cart you want to edit
Got to Settings at the bottom of the left navigation for this cart
Choose Custom HTML
Choose the location for the custom HTML in the dropdown - we recommend "Below cart items" or "Above footer/add-ons"
Paste the HTML component for our GWP picker: <ig-gwp-variant-picker></ig-gwp-variant-picker>
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
Click Save
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:
Last updated
Was this helpful?