Picture this: you're browsing through your favorite online store, and you stumble upon an irresistible offer—a free gift with your purchase. But hold on, what if we told you there's an even better way to delight your customers? Why not take your customer experience to a whole new level by offering them a gift of their choice.
The top three reasons why merchants choose to enhance their customer experience by offering a selectable gift with purchase are:
Personalization and customization:
Customers love feeling special, and giving them the power to choose a gift that resonates with their preferences and needs does just that. It's like giving them the keys to a treasure trove where they can find the perfect reward for themselves.
Increased perceived value:
When customers have options, they perceive greater value. Think about it—they'll be comparing the different gifts, assessing which one brings the most joy or utility to their lives. By providing a selection, you're not just handing out a gift; you're delivering an experience that makes customers feel like they're getting something truly valuable in return.
Enhanced engagement and excitement:
When faced with a range of enticing choices, customers can't help but feel a rush of anticipation. The mere act of browsing through the available options ignites their curiosity and engages them on a deeper level. It's like a mini-adventure within their shopping journey, making them feel more connected to your brand and more likely to come back for more.
Before we begin
If you only have a single product with no variants to offer as a free gift, consider using Rebuy's standard Gift With Purchase widget type or the Smart Cart's Tiered Progress Bar.
If you only have a single product to offer as a free gift that requires the customer to choose a specific variant (size, color etc.), consider using the Smart Cart's Tiered Progress Bar.
If you have multiple products for a customer to choose from as their free gift, continue following the steps outlined in this guide.
Please note that "Selectable Gift with Purchase" is not a standard Rebuy widget type and therefore must be customized. We recommend that only advanced users follow this process.
It is recommended to use the "Shopify Functions" discounting feature that is available in the widget's settings to discount your free gift product(s).
A Selectable Gift With Purchase widget works in combination with Rebuy's Smart Cart. There are two styles of Selectable Gift With Purchase widgets that we'll cover in this guide:
A pop-up Selectable Gift With Purchase
and
A Selectable Gift With Purchase widget embedded in the cart drawer (Smart Cart)
How to create a Pop-up Selectable Gift With Purchase Widget
Step 1) Create a new Cart Cross Sell Widget and install it in the Rebuy Smart Cart. This can be done by Accessing the Smart Cart you want to add the widget to and adding a "Cross-Sell Widget" component:
Once your widget is created, you'll want to access it's settings to make a few adjustments:
Step 2) Expand the options in the Language tab and reconfigure the default copy with relevance to the offer and delivered in your own brand's voice:
Step 3) Enable the Discount in the widget's settings to ensure that the discounted (Free) gift product appears as Free once the customer has selected it and added it to their cart. Using Shopify Functions, the Rebuy widget settings allow you to create an automatic discount to ensure the product is shown as free in the widget and in the customers cart / checkout page.
NOTE: If you only want to show a "visual" discount for any reason (i.e., Rebuy will display the discount in the widget, but will not apply the discount once the products are added to the cart), toggle off the Shopify Functions setting.
Shopify Functions for discounting is available for all Shopify Plan types. For more information on how discounting works with Shopify Functions via Rebuy, please refer to our Rebuy Discounting Overview guide linked below.
Step 4) Expand the options in the Layout tab. Under Display Type, select Popup and choose the best popup trigger for your offer. Most of the time, this will be Add to cart. Reconfigure the default layout from list view to grid view, and adjust the number of columns to accommodate the number of free gifts a customer would have to choose from:
Step 5) Expand the options in the Advanced tab. Copy the following code and paste it into the Ready section of the Advanced tab:
function popupSelectableGWP() {
setTimeout(() => {
//check for free gift items in the cart
const giftItem = Rebuy.SmartCart.items().find(item => item.properties._widget_id === `${widget.id}`);
//if there is no gift item and the widget rules match
if (!giftItem && widget.data.metadata.matched_rules.length) {
widget.show()
//hide the widget if theres already a gift in cart
} else {
widget.hide() }
//if widget rules is no longer match, remove free gift
if (widget.data?.metadata.matched_rules.length === 0) { Rebuy.Cart.removeItem(giftItem)
}
}, 300)
}
popupSelectableGWP() //runs on page load
document.addEventListener('rebuy:cart.change', popupSelectableGWP)
//runs on cart change
The code does three things. First, it checks if a gift item from this widget is already in the cart. Second, if there is no gift present, and the rule in the widget's Data Source is matching, the pop-up is triggered. Third, if a gift from this widget is present in the cart and the Data Source's rule(s) ceases to match, the gift previously added by the widget will be removed.
Step 6) Configure the Data Source rules that will trigger the Selectable Gift With Purchase popup:
Most commonly, this is done with a cart subtotal rule but other conditions can be used as well. For example, offering free samples when a customer adds specific products to their cart.
Step 7) Add the following CSS code snippet to the CSS input found in your Rebuy Theme by navigating to Dashboard > Manage Rebuy Theme:
.property-value-XXXXX .rebuy-cart__flyout-item-quantity-widget {
display: none;
}
.property-value-XXXXX .rebuy-cart__flyout-item-subscription {
display: none;
}
Replace "XXXXX" with the actual widget ID. This above CSS code hides the quantity selector and subscription upgrade option on any line item in Rebuy's Smart Cart that was added from the associated Rebuy widget ID.
Step 8) This step is optional. You'll only need to implement this step if the Gift With Purchase products being surfaced are intended to be hidden from all other areas of the online store. To remove the pointer event on the gift item in the Smart Cart so that customers cannot click on the gift and go to that items product page.
Place this code in the Smart Cart > Custom CSS block:
/* replace XXXXX with the widget's ID */
.rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-product-title, .rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-media {
pointer-events: none;
}
See it in Action
Pop-Up Selectable Gift With Purchase In Action - Watch Video
How to create an embedded Selectable Gift With Purchase Widget
Step 1) Create a new Cart Cross Sell Widget and install it in the Rebuy Smart Cart. This can be done by Accessing the Smart Cart you want to add the widget to and adding a "Cross-Sell Widget" component:
Once your widget is created, you'll want to access it's settings to make a few adjustments:
Step 2) Enable the Discount in the widget's settings to ensure that the discounted (Free) gift product appears as Free once the customer has selected it and added it to their cart. Using Shopify Functions, the Rebuy widget settings allow you to create an automatic discount to ensure the product is shown as free in the widget and in the customers cart / checkout page.
NOTE: If you only want to show a "visual" discount for any reason (i.e., Rebuy will display the discount in the widget, but will not apply the discount once the products are added to the cart), toggle off the Shopify Functions setting.
Shopify Functions for discounting is available for all Shopify Plan types. For more information on how discounting works with Shopify Functions via Rebuy, please refer to our Rebuy Discounting Overview guide linked below.
Step 3) Expand the options in the Advanced tab. Copy the following code and paste it into the Ready section of the Advanced tab:
function embedSelectableGWP () {
setTimeout(() => {
//check for a free gift item in the cart
const giftItem = Rebuy.SmartCart.items().find(item => item.properties?._widget_id === `${widget.id}`);
//hide widget if there is a gift item
if (giftItem) {
document.querySelector(`#rebuy-widget-${widget.id}`).style.display = 'none';
//display the widget if not
} else {
document.querySelector(`#rebuy-widget-${widget.id}`).style.display = 'block';
}
//if widget rules is no longer match, remove free gift
if (widget.data?.metadata.matched_rules.length === 0) {
Rebuy.Cart.removeItem(giftItem)
}
}, 500)
}
//runs on page load
embedSelectableGWP()
//runs on each cart change
document.addEventListener('rebuy:cart.change', embedSelectableGWP)
The code does three things. First, it checks if a gift item from this widget is already in the cart. Second, if there is no gift present, and the rule in the widget's Data Source is matching, the pop-up is triggered. Third, if a gift from this widget is present in the cart and the Data Source's rule(s) ceases to match, the gift previously added by the widget will be removed.
Step 4) Configure the Data Source rules that will trigger the Selectable Gift With Purchase popup:
Most commonly, this is done with a cart subtotal rule but other conditions can be used as well. For example, offering free samples when a customer adds specific products to their cart.
Step 5) Add the following CSS code snippet to the CSS input found in your Rebuy Theme by navigating to Dashboard > Manage Rebuy Theme:
.property-value-XXXXX .rebuy-cart__flyout-item-quantity-widget {
display: none;
}
.property-value-XXXXX .rebuy-cart__flyout-item-subscription {
display: none;
}
Replace "XXXXX" with the actual widget ID. This above CSS code hides the quantity selector and subscription upgrade option on any line item in Rebuy's Smart Cart that was added from the associated Rebuy widget ID.
Step 6) This step is optional. You'll only need to implement this step if the Gift With Purchase products being surfaced are intended to be hidden from all other areas of the online store. To remove the pointer event on the gift item in the Smart Cart so that customers cannot click on the gift and go to that items product page.
Place this code in the Smart Cart > Custom CSS block:
/* replace XXXXX with the widget's ID */
.rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-product-title, .rebuy-cart__flyout-item.property-value-XXXXX .rebuy-cart__flyout-item-media {
pointer-events: none;
}
See it in action
Embedded Selectable Gift With Purchase In Action - Watch Video
