Widget Custom Templates
Overview¶
This allows developers the ability to add custom functionality that is currently not achievable by the widget settings themselves. These templates can use any globally accessible functions. Developers can add additional Vue.js/HTML to these templates as needed. As these templates are written in Vue.js they accept and Vue.js attributes such as v-if for conditional rendering.
Setting up Custom Templates¶
There are a couple of ways these templates can be used. They can target all widgets of that widget type or, they can target a specific widget if you do not want the custom work to be applied to all widgets of that specific widget type.
Typically developers will create a new snippet named something like "rebuy-templates.liquid" and paste the contents of the code in that file. Then render that snippet in the associated file or in the theme.liquid file if they want the template to be globally accessible.
Widget Specificity¶
Rebuy templates can be specified to work for a specific widget or all widgets of that widget type by either including or excluding the widget ID in the opening script tag of the template. In order to make the template work for that specific widget change the id of the script tog to "rebuy-widget-xxxx" where the x's are the Id of the specific widget you would like to customize such as the example below.
Recommended Template¶
Last Updated: June 28th, 2026
<script id="rebuy-recommended-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="config.display_type == 'popup' && hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses" role="list">
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]"
aria-label="product"
class="rebuy-product-block"
role="listitem"
>
<div class="rebuy-product-media">
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger())"
class="rebuy-product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:loading="product_index > 1 ? 'lazy' : 'eager'" v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="itemImageAlt(product, product.selected_variant)">
</a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger()"
class="rebuy-product-image-trigger"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:loading="product_index > 1 ? 'lazy' : 'eager'" v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="itemImageAlt(product, product.selected_variant)">
</button>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewButtonTrigger()"
class="product-quick-view-button rebuy-button outline"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button">
<span v-html="getQuickViewButtonText()"></span>
</button>
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:aria-label="buttonAriaLabel(product)"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="hide()"
type="button">
<span v-html="continueLabel()"></span>
</button>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
Upsell Template¶
Last Updated: October 21, 2025
<script id="rebuy-upsell-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addUpsellToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
Dynamic Bundle¶
Last Updated: September 3, 2026
<script id="rebuy-dynamic-bundle-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="isPopupDisplay() && hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-if="isPopupDisplay()" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>
<h4 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h4>
<h3 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h3>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-bundle">
<div class="rebuy-bundle__images" v-if="showBundleImages()">
<div class="rebuy-bundle__image" v-for="(product, index) in products" v-if="product.selected" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), variantAvailable(product.selected_variant) ? '' : 'rebuy-bundle__image--out-of-stock']">
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger())"
class="rebuy-bundle__image-item"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger()"
class="rebuy-bundle__image-trigger"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</button>
<div class="rebuy-bundle__image-divider">
<rebuy-icon name="plus"></rebuy-icon>
</div>
</div>
</div>
<div class="rebuy-bundle__actions" v-if="subtotal() > 0">
<div class="rebuy-bundle__actions-price">
<strong class="rebuy-bundle__actions-price-label" v-html="config.language.total_price_label"></strong>
<p class="rebuy-bundle__actions-price-value" v-if="bundleOnSale()">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(compareAtSubtotal())"></span>
</span>
</p>
<p class="rebuy-bundle__actions-price-value" v-if="!(bundleOnSale())">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
</p>
<p class="rebuy-bundle__actions-savings" v-if="showBundleSavings()">
You save <span class="rebuy-money" v-html="formatMoney(bundleSavings())"></span>
</p>
</div>
<div class="rebuy-bundle__actions-buttons">
<button
class="rebuy-button"
v-on:click="addSelectedProductsToCart()"
v-bind:disabled="isBundleIncomplete() || isBundleUnavailable()"
type="button">
<span v-html="bundleButtonLabel()"></span>
</button>
</div>
<div class="rebuy-modal-actions" v-if="showBundleContinueButton()">
<button
class="rebuy-button decline"
v-on:click="hide()"
type="button">
<span v-html="continueLabel()"></span>
</button>
</div>
</div>
<div class="rebuy-bundle__items" v-bind:class="bundleItemsClasses()">
<div
v-for="(product, product_index) in products"
class="rebuy-product-block"
v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), isInputProduct(product) ? 'is-input-product' : '' ,product.selected ? 'is-selected': '', variantAvailable(product.selected_variant) ? '' : 'rebuy-product-block--out-of-stock']"
>
<div class="rebuy-product-media" v-if="showBundleCardMedia()">
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger())"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger()"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</button>
</div>
<div class="rebuy-product-info">
<div class="rebuy-product-checkbox" v-if="!bundleRequiresAllItems()">
<label class="rebuy-checkbox-label">
<span class="sr-only">
Select {{ product.title }} for bundle
</span>
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox"
:id="'checkbox-' + product.id"
/>
</label>
</div>
<strong class="rebuy-product-label" v-if="isInputProduct(product)" v-html="'This item:'"></strong>
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
>
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewTitleTrigger())"
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewTitleTrigger()"
class="rebuy-product-title-trigger clickable"
v-on:click="openQuickViewVariantModal(product)"
v-html="product.title"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
</button>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="powered-by-rebuy" v-if="isPopupDisplay()">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
Product Add Ons¶
Last Updated: March 18, 2026
<script id="rebuy-product-addon-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div class="rebuy-widget-container">
<div class="rebuy-widget-content">
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-addon">
<div class="rebuy-addon__items">
<div class="rebuy-addon__item" v-for="(product, product_index) in products">
<div class="rebuy-addon__item-checkbox">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox"
:aria-label="'Select ' + product.title"
/>
</label>
</div>
<div
v-if="!hasProductQuickViewEnabled()"
class="rebuy-addon__item-image"
v-on:click="toggleProductSelect(product)"
v-bind:style="imageStyles"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</div>
<button
v-if="hasProductQuickViewEnabled()"
class="rebuy-addon__item-image rebuy-product-image-trigger"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</button>
<div class="rebuy-addon__item-info">
<div class="rebuy-addon__item-product-title rebuy-product-title" v-on:click="toggleProductSelect(product)" v-html="product.title" v-bind:alt="'View ' + product.title"></div>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-addon__item-variant-title rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-addon__item-product-review rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-addon__item-product-price rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-addon__item-product-options rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__item-product-description rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
<div class="rebuy-addon__item-learn-more" v-if="hasLearnMore()">
<a
class="rebuy-addon__item-learn-more-link"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product);"
v-html="config.language.learn_more_label"
rel="nofollow"
></a>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__subtotal" v-if="subtotal() > 0">
<strong class="rebuy-addon__subtotal-label" v-html="config.language.total_price_label"></strong>
<div class="rebuy-addon__subtotal-value" v-if="bundleOnSale()">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(compareAtSubtotal())"></span>
</span>
</div>
<div class="rebuy-addon__subtotal-value" v-if="!(bundleOnSale())">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
Shopify Thank You Page¶
Thank You Page Template Only
This is not the Shopify Checkout Page extension. But, this is the Shopify Thank You Page widget. The Shopify Checkout Page extension does not have the ability to use a custom template as Shopify has limited the amount of customization for that feature at the moment.
Last Updated: October 21, 2025
<script id="rebuy-thank-you-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="(product, product_index) in products"
v-bind:class="[
product.handle, 'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<div>
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="shouldShowSavingAmount()">
<span v-if="shouldRenderSavingAmount(product)" class="rebuy-money sale">
<span class="sr-only">Saving Amount</span>
<span v-html="savingAmountLabel(product)"></span>
</span>
</div>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
Switch to Subscription¶
Last Updated: October 21, 2025
<script id="rebuy-switch-to-subscription-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="product in products"
v-bind:class="[
product.handle, 'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
>
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addUpsellToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
Recharge Checkout¶
Last Updated: August 27, 2024
<script id="rebuy-recharge-checkout-template" type="text/template">
<div class="rebuy-widget checkout-promotion"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="[products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="checkout-promotion-wrapper"
v-cloak
v-bind:class="[visible ? 'is-visible' : 'is-hidden']">
<div class="checkout-promotion-header" v-if="config.language.title || config.language.subtitle || config.language.description">
<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>
<h2 v-if="config.language.title" class="promo-title" v-html="config.language.title"></h2>
<h3 v-if="config.language.subtitle" class="promo-subtitle" v-html="config.language.subtitle"></h3>
<div v-if="config.language.description" class="promo-description" v-html="config.language.description"></div>
</div>
<div class="checkout-promotion-body">
<div
class="checkout-promotion-product line-item"
v-for="product in products"
v-bind:class="[product.handle, 'product-id-' + product.id, rechargeCheckoutHasProduct(product) ? 'has-product' : '', productTagClasses(product)]">
<div class="promotion-image">
<img
v-bind:src="itemImage(product, product.selected_variant, '160x160')"
v-bind:alt="product.title">
</div>
<div class="promotion-info">
<h4 class="product-title" v-html="product.title"></h4>
<div class="variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="variant-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="promotion-actions">
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
<div class="promotion-options" v-if="showVariantSelect(product)">
<select
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
</select>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</script>
Pre Purchase¶
Last Updated: October 30, 2025
<script id="rebuy-pre-purchase-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden']"
>
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="declinePrepurchaseOffer()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="declinePrepurchaseOffer()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description" v-html="config.language.description"></div>
<div class="rebuy-product-grid rebuy-pre-purchase-block" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
>
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
:disabled="product.status == 'added'"
v-on:change="selectVariant(product)"
>
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-bind:disabled="product.status == 'added'"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequency }} {{ product.subscription_interval }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-bind:disabled="product.status == 'added'"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<div class="rebuy-button-container">
<button
v-if="product.status != 'added'"
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<div class="rebuy-button--selected" v-if="product.status == 'added'" v-on:click="removeFromCart(product)">
<button class="rebuy-button dark rebuy-button__remove rebuy-button__upsell-add">
<span v-html="buttonLabel(product)"></span>
</button>
<button class="rebuy-button dark rebuy-button__text rebuy-button__upsell-remove" v-bind:aria-label="'Remove ' + product.title">
<span>
<rebuy-icon name="x"></rebuy-icon>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-container">
<div class="rebuy-button-actions rebuy-pre-purchase-actions">
<button
v-if="!hasAddedPrepurchase()"
class="rebuy-button rebuy-button--mlr-10 decline"
v-on:click="declinePrepurchaseOffer()">
<span v-html="config.language.decline"></span>
</button>
<button
class="rebuy-button rebuy-button--mlr-10 outline"
v-on:click="checkout()">
<span v-html="config.language.checkout"></span>
</button>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</div>
</script>
Gift With Purchase¶
Last Updated: August 27, 2024
<script id="rebuy-gift-with-purchase-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id">
</div>
</script>
Selectable Gift With Purchase (Product Page & Global Popup)¶
Last Updated: October 2, 2026
<script id="rebuy-selectable-gift-with-purchase-template" type="text/template">
<div
class="rebuy-widget rebuy-selectable-gift-with-purchase"
v-cloak
v-on:click="stopPropagation($event)"
:id="'rebuy-widget-' + id"
:class="[
'widget-type-' + config.type.replace('_','-'),
isPopupLayout() ? 'widget-display-popup' : '',
isGiftBoxLayout() ? 'widget-display-gift-box' : '',
isPopupSelectLayout() ? 'widget-display-popup-select' : '',
visible && products.length > 0 ? 'is-visible' : 'is-hidden',
'widget-layout-' + currentLayout(),
]"
:role="isPopupLayout() ? 'dialog' : 'region'"
:aria-modal="isPopupLayout() ? 'true' : null"
aria-label="Selectable Gift With Purchase"
>
<div
class="rebuy-widget-container rebuy-selectable-gift-with-purchase__container"
v-cloak
:class="[
isPopupLayout() ? 'widget-display-popup' : '',
isGiftBoxLayout() ? 'widget-display-gift-box' : '',
isPopupSelectLayout() ? 'widget-display-popup-select' : '',
visible ? 'is-visible' : 'is-hidden',
]"
v-on:click="dismissOnBackdropClick($event)"
>
<div class="rebuy-widget-content rebuy-selectable-gift-with-purchase__content">
<!-- Header -->
<div
class="rebuy-selectable-gift-with-purchase__header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<div class="rebuy-selectable-gift-with-purchase__gift-icon-cell">
<div
class="rebuy-selectable-gift-with-purchase__gift-icon"
v-if="config.gift_icon?.enabled === true"
:style="giftIconStyles"
>
<img
v-if="config.gift_icon?.image_url"
:src="config.gift_icon.image_url"
class="rebuy-selectable-gift-with-purchase__gift-icon-custom"
alt=""
aria-hidden="true"
/>
<rebuy-icon
v-else
name="gift"
:size="giftIconInnerSize"
:color="giftIconColor"
/>
</div>
</div>
<div class="rebuy-selectable-gift-with-purchase__header-text">
<h3 class="rebuy-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"></h3>
<h4 class="rebuy-selectable-gift-with-purchase__title"
v-html="isPopupSelectLayout() ? (getConfigLanguage('popup_title') || getConfigLanguage('title')) : getConfigLanguage('title')"></h4>
<p class="rebuy-selectable-gift-with-purchase__description" v-html="getConfigLanguage('description')"></p>
</div>
<div class="rebuy-selectable-gift-with-purchase__header-actions">
<button
v-if="hasAccordionToggle()"
class="rebuy-selectable-gift-with-purchase__header-toggle"
type="button"
v-on:click="toggleExpanded()"
:aria-expanded="sgwp_expanded ? 'true' : 'false'"
:aria-controls="'rebuy-widget-' + id + '-sgwp-panel'"
:aria-label="getConfigLanguage('toggle_gift_selection')"
>
<rebuy-icon :name="sgwp_expanded ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
</button>
<button
v-if="hasCloseButton()"
class="rebuy-selectable-gift-with-purchase__header-close"
type="button"
v-on:click="hide()"
aria-label="Close gift selection"
>
<rebuy-icon name="x"></rebuy-icon>
</button>
</div>
</div>
<!-- /Header -->
<!-- Accordion body: everything beneath the header collapses as one region so the
header toggle's aria-controls names a single always-present container. -->
<div
:id="'rebuy-widget-' + id + '-sgwp-panel'"
class="rebuy-selectable-gift-with-purchase__body"
v-show="!hasAccordionToggle() || sgwp_expanded"
>
<!-- Progress Bar -->
<div
v-if="progressBarEnabled && milestonesList.length > 0"
class="rebuy-selectable-gift-with-purchase__progress"
data-rebuy-component="progress-bar"
data-rebuy-component-id="sgwp_progress_bar"
>
<div
class="rebuy-selectable-gift-with-purchase__progress-step-wrapper"
:class="['count-' + milestonesList.length]"
>
<div
v-for="(milestone, milestone_index) in milestonesList"
:key="milestone_index"
class="rebuy-selectable-gift-with-purchase__progress-step"
:class="{ complete: milestoneReached(milestone) }"
:style="{ width: progressStepMaxWidth }"
>
<div
class="rebuy-selectable-gift-with-purchase__progress-step-icon"
:style="progressStepIconSize"
>
<svg
v-if="milestoneReached(milestone)"
width="9"
height="8"
viewBox="0 0 9 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M2.82415 6.15237L0.726419 4.05464L0.012085 4.76395L2.82415 7.57601L8.86078 1.53938L8.15147 0.830078L2.82415 6.15237Z" fill="currentColor"/>
</svg>
<svg
v-else
width="15"
height="18"
viewBox="0 0 15 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M12.7808 3.71012H10.9961C10.9961 1.73797 9.39873 0.140625 7.42658 0.140625C5.45444 0.140625 3.85709 1.73797 3.85709 3.71012H2.07234C1.09073 3.71012 0.287598 4.51325 0.287598 5.49486V16.2033C0.287598 17.185 1.09073 17.9881 2.07234 17.9881H12.7808C13.7624 17.9881 14.5656 17.185 14.5656 16.2033V5.49486C14.5656 4.51325 13.7624 3.71012 12.7808 3.71012ZM7.42658 1.92537C8.40819 1.92537 9.21133 2.72851 9.21133 3.71012H5.64184C5.64184 2.72851 6.44497 1.92537 7.42658 1.92537ZM12.7808 16.2033H2.07234V5.49486H3.85709V7.27961C3.85709 7.77042 4.25866 8.17198 4.74946 8.17198C5.24027 8.17198 5.64184 7.77042 5.64184 7.27961V5.49486H9.21133V7.27961C9.21133 7.77042 9.6129 8.17198 10.1037 8.17198C10.5945 8.17198 10.9961 7.77042 10.9961 7.27961V5.49486H12.7808V16.2033Z" fill="currentColor"/>
</svg>
</div>
<span
class="rebuy-selectable-gift-with-purchase__progress-step-label"
v-html="getMilestoneLabel(milestone)"
></span>
</div>
</div>
<div class="rebuy-selectable-gift-with-purchase__progress-bar-wrapper">
<div
class="rebuy-selectable-gift-with-purchase__progress-bar-meter"
:class="[hasTierProgress ? 'has-progress' : 'no-progress']"
>
<div
class="rebuy-selectable-gift-with-purchase__progress-bar-meter-fill"
:style="{ width: progressBarPercentage + '%' }"
role="progressbar"
tabindex="0"
aria-valuemin="0"
aria-valuemax="100"
:aria-valuenow="progressBarPercentage"
aria-label="Gift unlock progress"
>
<span class="sr-only" v-text="'Progress: ' + progressBarPercentage + '%'"></span>
</div>
</div>
</div>
</div>
<!-- /Progress Bar -->
<!-- ProductGrid -->
<div
class="rebuy-product-grid rebuy-selectable-gift-with-purchase__product-grid"
v-bind:class="layoutClasses"
tabindex="0"
role="list"
>
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]"
aria-label="product"
class="rebuy-product-block rebuy-selectable-gift-with-purchase__product-block"
role="listitem"
>
<div class="rebuy-product-media rebuy-selectable-gift-with-purchase__product-media">
<a
class="rebuy-product-image rebuy-selectable-gift-with-purchase__product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event)"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img
v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
v-bind:src="itemImage(product, product.selected_variant, '400x400')"
v-bind:alt="itemImageAlt(product, product.selected_variant)"
>
</a>
</div>
<div class="rebuy-product-info rebuy-selectable-gift-with-purchase__product-info">
<h5 class="rebuy-product-title rebuy-selectable-gift-with-purchase__product-title">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link rebuy-selectable-gift-with-purchase__product-title-link"
v-on:click="learnMore(product, $event)"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div class="rebuy-product-review rebuy-selectable-gift-with-purchase__product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
></span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price rebuy-selectable-gift-with-purchase__product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
</div>
<div class="rebuy-product-options rebuy-selectable-gift-with-purchase__product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
:key="variant.id"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions rebuy-selectable-gift-with-purchase__product-actions">
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting') || !canToggleGift(product)"
v-bind:aria-label="selectableGwpButtonAriaLabel(product)"
v-on:click="toggleGift(product)"
type="button"
>
<span v-html="selectableGwpButtonLabel(product)"></span>
</button>
</div>
</div>
</div>
<!-- /ProductGrid -->
</div>
<!-- /Accordion body -->
</div>
</div>
</div>
</script>
Selectable Gift With Purchase (Cart)¶
Last Updated: October 2, 2026
---
title: Widget Custom Templates
excerpt: Build custom Vue.js templates for complete widget control
deprecated: false
hidden: false
metadata:
title: ''
description: ''
robots: index
next:
description: ''
---
## Overview
This allows developers the ability to add custom functionality that is currently not achievable by the widget settings themselves. These templates can use any globally accessible functions. Developers can add additional Vue.js/HTML to these templates as needed. As these templates are written in Vue.js they accept and Vue.js attributes such as v-if for conditional rendering.
## Setting up Custom Templates
There are a couple of ways these templates can be used. They can target all widgets of that widget type or, they can target a specific widget if you do not want the custom work to be applied to all widgets of that specific widget type.
Typically developers will create a new snippet named something like "rebuy-templates.liquid" and paste the contents of the code in that file. Then render that snippet in the associated file or in the theme.liquid file if they want the template to be globally accessible.
## Widget Specificity
Rebuy templates can be specified to work for a specific widget or all widgets of that widget type by either including or excluding the widget ID in the opening script tag of the template. In order to make the template work for that specific widget change the id of the script tog to "rebuy-widget-xxxx" where the x's are the Id of the specific widget you would like to customize such as the example below.
```html
<script id="rebuy-widget-1234" type="text/template"></script>
```
## Recommended Template
```html title="Last Updated: June 28th, 2026"
<script id="rebuy-recommended-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="config.display_type == 'popup' && hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses" role="list">
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]"
aria-label="product"
class="rebuy-product-block"
role="listitem"
>
<div class="rebuy-product-media">
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger())"
class="rebuy-product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:loading="product_index > 1 ? 'lazy' : 'eager'" v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="itemImageAlt(product, product.selected_variant)">
</a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger()"
class="rebuy-product-image-trigger"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:loading="product_index > 1 ? 'lazy' : 'eager'" v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="itemImageAlt(product, product.selected_variant)">
</button>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewButtonTrigger()"
class="product-quick-view-button rebuy-button outline"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button">
<span v-html="getQuickViewButtonText()"></span>
</button>
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:aria-label="buttonAriaLabel(product)"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="hide()"
type="button">
<span v-html="continueLabel()"></span>
</button>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
```
## Upsell Template
```html title="Last Updated: October 21, 2025"
<script id="rebuy-upsell-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addUpsellToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
```
## Dynamic Bundle
```html title="Last Updated: September 3, 2026"
<script id="rebuy-dynamic-bundle-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="isPopupDisplay() && hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-if="isPopupDisplay()" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>
<h4 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h4>
<h3 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h3>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-bundle">
<div class="rebuy-bundle__images" v-if="showBundleImages()">
<div class="rebuy-bundle__image" v-for="(product, index) in products" v-if="product.selected" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), variantAvailable(product.selected_variant) ? '' : 'rebuy-bundle__image--out-of-stock']">
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger())"
class="rebuy-bundle__image-item"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger()"
class="rebuy-bundle__image-trigger"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</button>
<div class="rebuy-bundle__image-divider">
<rebuy-icon name="plus"></rebuy-icon>
</div>
</div>
</div>
<div class="rebuy-bundle__actions" v-if="subtotal() > 0">
<div class="rebuy-bundle__actions-price">
<strong class="rebuy-bundle__actions-price-label" v-html="config.language.total_price_label"></strong>
<p class="rebuy-bundle__actions-price-value" v-if="bundleOnSale()">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(compareAtSubtotal())"></span>
</span>
</p>
<p class="rebuy-bundle__actions-price-value" v-if="!(bundleOnSale())">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
</p>
<p class="rebuy-bundle__actions-savings" v-if="showBundleSavings()">
You save <span class="rebuy-money" v-html="formatMoney(bundleSavings())"></span>
</p>
</div>
<div class="rebuy-bundle__actions-buttons">
<button
class="rebuy-button"
v-on:click="addSelectedProductsToCart()"
v-bind:disabled="isBundleIncomplete() || isBundleUnavailable()"
type="button">
<span v-html="bundleButtonLabel()"></span>
</button>
</div>
<div class="rebuy-modal-actions" v-if="showBundleContinueButton()">
<button
class="rebuy-button decline"
v-on:click="hide()"
type="button">
<span v-html="continueLabel()"></span>
</button>
</div>
</div>
<div class="rebuy-bundle__items" v-bind:class="bundleItemsClasses()">
<div
v-for="(product, product_index) in products"
class="rebuy-product-block"
v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product), isInputProduct(product) ? 'is-input-product' : '' ,product.selected ? 'is-selected': '', variantAvailable(product.selected_variant) ? '' : 'rebuy-product-block--out-of-stock']"
>
<div class="rebuy-product-media" v-if="showBundleCardMedia()">
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger())"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event);"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewPhotoTrigger()"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</button>
</div>
<div class="rebuy-product-info">
<div class="rebuy-product-checkbox" v-if="!bundleRequiresAllItems()">
<label class="rebuy-checkbox-label">
<span class="sr-only">
Select {{ product.title }} for bundle
</span>
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox"
:id="'checkbox-' + product.id"
/>
</label>
</div>
<strong class="rebuy-product-label" v-if="isInputProduct(product)" v-html="'This item:'"></strong>
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
>
<a
v-if="!(hasProductQuickViewEnabled() && hasQuickViewTitleTrigger())"
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
<button
v-if="hasProductQuickViewEnabled() && hasQuickViewTitleTrigger()"
class="rebuy-product-title-trigger clickable"
v-on:click="openQuickViewVariantModal(product)"
v-html="product.title"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
</button>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="powered-by-rebuy" v-if="isPopupDisplay()">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
```
## Product Add Ons
```html title="Last Updated: March 18, 2026"
<script id="rebuy-product-addon-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div class="rebuy-widget-container">
<div class="rebuy-widget-content">
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-addon">
<div class="rebuy-addon__items">
<div class="rebuy-addon__item" v-for="(product, product_index) in products">
<div class="rebuy-addon__item-checkbox">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox"
:aria-label="'Select ' + product.title"
/>
</label>
</div>
<div
v-if="!hasProductQuickViewEnabled()"
class="rebuy-addon__item-image"
v-on:click="toggleProductSelect(product)"
v-bind:style="imageStyles"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</div>
<button
v-if="hasProductQuickViewEnabled()"
class="rebuy-addon__item-image rebuy-product-image-trigger"
v-bind:style="imageStyles"
v-on:click="openQuickViewVariantModal(product)"
v-bind:aria-label="'Quick view ' + product.title"
type="button"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</button>
<div class="rebuy-addon__item-info">
<div class="rebuy-addon__item-product-title rebuy-product-title" v-on:click="toggleProductSelect(product)" v-html="product.title" v-bind:alt="'View ' + product.title"></div>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-addon__item-variant-title rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-addon__item-product-review rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-addon__item-product-price rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-addon__item-product-options rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__item-product-description rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
<div class="rebuy-addon__item-learn-more" v-if="hasLearnMore()">
<a
class="rebuy-addon__item-learn-more-link"
v-bind:href="learnMoreURL(product)"
v-on:click="learnMore(product);"
v-html="config.language.learn_more_label"
rel="nofollow"
></a>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__subtotal" v-if="subtotal() > 0">
<strong class="rebuy-addon__subtotal-label" v-html="config.language.total_price_label"></strong>
<div class="rebuy-addon__subtotal-value" v-if="bundleOnSale()">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(compareAtSubtotal())"></span>
</span>
</div>
<div class="rebuy-addon__subtotal-value" v-if="!(bundleOnSale())">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(subtotal())"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
```
## Shopify Thank You Page
!!! note "Thank You Page Template Only"
This is not the Shopify Checkout Page extension. But, this is the Shopify Thank You Page widget. The Shopify Checkout Page extension does not have the ability to use a custom template as Shopify has limited the amount of customization for that feature at the moment.
```html title="Last Updated: October 21, 2025"
<script id="rebuy-thank-you-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="(product, product_index) in products"
v-bind:class="[
product.handle, 'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<div>
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="shouldShowSavingAmount()">
<span v-if="shouldRenderSavingAmount(product)" class="rebuy-money sale">
<span class="sr-only">Saving Amount</span>
<span v-html="savingAmountLabel(product)"></span>
</span>
</div>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
```
## Switch to Subscription
```html title="Last Updated: October 21, 2025"
<script id="rebuy-switch-to-subscription-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>
<div class="rebuy-product-grid" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="product in products"
v-bind:class="[
product.handle, 'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
>
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addUpsellToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<button
class="rebuy-button decline"
v-on:click="declineOffer(product)"
type="button">
<span v-html="declineLabel(product)"></span>
</button>
</div>
</div>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</script>
```
## Recharge Checkout
```html title="Last Updated: August 27, 2024"
<script id="rebuy-recharge-checkout-template" type="text/template">
<div class="rebuy-widget checkout-promotion"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="[products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">
<div
class="checkout-promotion-wrapper"
v-cloak
v-bind:class="[visible ? 'is-visible' : 'is-hidden']">
<div class="checkout-promotion-header" v-if="config.language.title || config.language.subtitle || config.language.description">
<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>
<h2 v-if="config.language.title" class="promo-title" v-html="config.language.title"></h2>
<h3 v-if="config.language.subtitle" class="promo-subtitle" v-html="config.language.subtitle"></h3>
<div v-if="config.language.description" class="promo-description" v-html="config.language.description"></div>
</div>
<div class="checkout-promotion-body">
<div
class="checkout-promotion-product line-item"
v-for="product in products"
v-bind:class="[product.handle, 'product-id-' + product.id, rechargeCheckoutHasProduct(product) ? 'has-product' : '', productTagClasses(product)]">
<div class="promotion-image">
<img
v-bind:src="itemImage(product, product.selected_variant, '160x160')"
v-bind:alt="product.title">
</div>
<div class="promotion-info">
<h4 class="product-title" v-html="product.title"></h4>
<div class="variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="variant-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="promotion-actions">
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
<div class="promotion-options" v-if="showVariantSelect(product)">
<select
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
</select>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</script>
```
## Pre Purchase
```html title="Last Updated: October 30, 2025"
<script id="rebuy-pre-purchase-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden']"
>
<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="declinePrepurchaseOffer()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="declinePrepurchaseOffer()" aria-label="close modal">
<rebuy-icon name="x"></rebuy-icon>
</div>
<div class="rebuy-timer" v-if="hasTimer()">
<p class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</p>
</div>
<h3 class="super-title" v-if="config.language.super_title" v-html="config.language.super_title"></h3>
<h4 class="primary-title" v-if="config.language.title" v-html="config.language.title"></h4>
<div class="description" v-if="config.language.description" v-html="config.language.description"></div>
<div class="rebuy-product-grid rebuy-pre-purchase-block" v-bind:class="layoutClasses">
<div
class="rebuy-product-block"
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]">
<div class="rebuy-product-media">
<a
class="rebuy-product-image"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product);"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
</div>
<div class="rebuy-product-info">
<h5
class="rebuy-product-title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
>
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link"
v-on:click="learnMore(product, $event);"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div
class="rebuy-product-vendor-container"
v-if="showProductVendor(product.vendor)"
>
<a
class="rebuy-product-vendor"
v-bind:class="[hasEnabledProductVendorLink() ? 'clickable' : '']"
v-html="product.vendor"
v-bind:href="vendorURL(product.vendor)"
v-bind:aria-label="'View ' + product.vendor + ' products'"
rel="nofollow"
></a>
</div>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
>
</span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
:disabled="product.status == 'added'"
v-on:change="selectVariant(product)"
>
<option
v-for="variant in product.variants"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions">
<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox"
:aria-label="upgradeToSubscriptionAriaLabel(product)"
/>
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
aria-label="subscription frequency"
v-model="product.subscription_frequency"
v-bind:disabled="product.status == 'added'"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequency }} {{ product.subscription_interval }}</option>
</select>
</div>
<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
aria-label="product quantity"
v-bind:disabled="product.status == 'added'"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>
<div class="rebuy-button-container">
<button
v-if="product.status != 'added'"
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
<div class="rebuy-button--selected" v-if="product.status == 'added'" v-on:click="removeFromCart(product)">
<button class="rebuy-button dark rebuy-button__remove rebuy-button__upsell-add">
<span v-html="buttonLabel(product)"></span>
</button>
<button class="rebuy-button dark rebuy-button__text rebuy-button__upsell-remove" v-bind:aria-label="'Remove ' + product.title">
<span>
<rebuy-icon name="x"></rebuy-icon>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-container">
<div class="rebuy-button-actions rebuy-pre-purchase-actions">
<button
v-if="!hasAddedPrepurchase()"
class="rebuy-button rebuy-button--mlr-10 decline"
v-on:click="declinePrepurchaseOffer()">
<span v-html="config.language.decline"></span>
</button>
<button
class="rebuy-button rebuy-button--mlr-10 outline"
v-on:click="checkout()">
<span v-html="config.language.checkout"></span>
</button>
</div>
<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>
</div>
</div>
</div>
</div>
</script>
```
## Gift With Purchase
```html title="Last Updated: August 27, 2024"
<script id="rebuy-gift-with-purchase-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id">
</div>
</script>
```
## Selectable Gift With Purchase (Product Page & Global Popup)
```html title="Last Updated: October 2, 2026"
<script id="rebuy-selectable-gift-with-purchase-template" type="text/template">
<div
class="rebuy-widget rebuy-selectable-gift-with-purchase"
v-cloak
v-on:click="stopPropagation($event)"
:id="'rebuy-widget-' + id"
:class="[
'widget-type-' + config.type.replace('_','-'),
isPopupLayout() ? 'widget-display-popup' : '',
isGiftBoxLayout() ? 'widget-display-gift-box' : '',
isPopupSelectLayout() ? 'widget-display-popup-select' : '',
visible && products.length > 0 ? 'is-visible' : 'is-hidden',
'widget-layout-' + currentLayout(),
]"
:role="isPopupLayout() ? 'dialog' : 'region'"
:aria-modal="isPopupLayout() ? 'true' : null"
aria-label="Selectable Gift With Purchase"
>
<div
class="rebuy-widget-container rebuy-selectable-gift-with-purchase__container"
v-cloak
:class="[
isPopupLayout() ? 'widget-display-popup' : '',
isGiftBoxLayout() ? 'widget-display-gift-box' : '',
isPopupSelectLayout() ? 'widget-display-popup-select' : '',
visible ? 'is-visible' : 'is-hidden',
]"
v-on:click="dismissOnBackdropClick($event)"
>
<div class="rebuy-widget-content rebuy-selectable-gift-with-purchase__content">
<!-- Header -->
<div
class="rebuy-selectable-gift-with-purchase__header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<div class="rebuy-selectable-gift-with-purchase__gift-icon-cell">
<div
class="rebuy-selectable-gift-with-purchase__gift-icon"
v-if="config.gift_icon?.enabled === true"
:style="giftIconStyles"
>
<img
v-if="config.gift_icon?.image_url"
:src="config.gift_icon.image_url"
class="rebuy-selectable-gift-with-purchase__gift-icon-custom"
alt=""
aria-hidden="true"
/>
<rebuy-icon
v-else
name="gift"
:size="giftIconInnerSize"
:color="giftIconColor"
/>
</div>
</div>
<div class="rebuy-selectable-gift-with-purchase__header-text">
<h3 class="rebuy-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"></h3>
<h4 class="rebuy-selectable-gift-with-purchase__title"
v-html="isPopupSelectLayout() ? (getConfigLanguage('popup_title') || getConfigLanguage('title')) : getConfigLanguage('title')"></h4>
<p class="rebuy-selectable-gift-with-purchase__description" v-html="getConfigLanguage('description')"></p>
</div>
<div class="rebuy-selectable-gift-with-purchase__header-actions">
<button
v-if="hasAccordionToggle()"
class="rebuy-selectable-gift-with-purchase__header-toggle"
type="button"
v-on:click="toggleExpanded()"
:aria-expanded="sgwp_expanded ? 'true' : 'false'"
:aria-controls="'rebuy-widget-' + id + '-sgwp-panel'"
:aria-label="getConfigLanguage('toggle_gift_selection')"
>
<rebuy-icon :name="sgwp_expanded ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
</button>
<button
v-if="hasCloseButton()"
class="rebuy-selectable-gift-with-purchase__header-close"
type="button"
v-on:click="hide()"
aria-label="Close gift selection"
>
<rebuy-icon name="x"></rebuy-icon>
</button>
</div>
</div>
<!-- /Header -->
<!-- Accordion body: everything beneath the header collapses as one region so the
header toggle's aria-controls names a single always-present container. -->
<div
:id="'rebuy-widget-' + id + '-sgwp-panel'"
class="rebuy-selectable-gift-with-purchase__body"
v-show="!hasAccordionToggle() || sgwp_expanded"
>
<!-- Progress Bar -->
<div
v-if="progressBarEnabled && milestonesList.length > 0"
class="rebuy-selectable-gift-with-purchase__progress"
data-rebuy-component="progress-bar"
data-rebuy-component-id="sgwp_progress_bar"
>
<div
class="rebuy-selectable-gift-with-purchase__progress-step-wrapper"
:class="['count-' + milestonesList.length]"
>
<div
v-for="(milestone, milestone_index) in milestonesList"
:key="milestone_index"
class="rebuy-selectable-gift-with-purchase__progress-step"
:class="{ complete: milestoneReached(milestone) }"
:style="{ width: progressStepMaxWidth }"
>
<div
class="rebuy-selectable-gift-with-purchase__progress-step-icon"
:style="progressStepIconSize"
>
<svg
v-if="milestoneReached(milestone)"
width="9"
height="8"
viewBox="0 0 9 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M2.82415 6.15237L0.726419 4.05464L0.012085 4.76395L2.82415 7.57601L8.86078 1.53938L8.15147 0.830078L2.82415 6.15237Z" fill="currentColor"/>
</svg>
<svg
v-else
width="15"
height="18"
viewBox="0 0 15 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M12.7808 3.71012H10.9961C10.9961 1.73797 9.39873 0.140625 7.42658 0.140625C5.45444 0.140625 3.85709 1.73797 3.85709 3.71012H2.07234C1.09073 3.71012 0.287598 4.51325 0.287598 5.49486V16.2033C0.287598 17.185 1.09073 17.9881 2.07234 17.9881H12.7808C13.7624 17.9881 14.5656 17.185 14.5656 16.2033V5.49486C14.5656 4.51325 13.7624 3.71012 12.7808 3.71012ZM7.42658 1.92537C8.40819 1.92537 9.21133 2.72851 9.21133 3.71012H5.64184C5.64184 2.72851 6.44497 1.92537 7.42658 1.92537ZM12.7808 16.2033H2.07234V5.49486H3.85709V7.27961C3.85709 7.77042 4.25866 8.17198 4.74946 8.17198C5.24027 8.17198 5.64184 7.77042 5.64184 7.27961V5.49486H9.21133V7.27961C9.21133 7.77042 9.6129 8.17198 10.1037 8.17198C10.5945 8.17198 10.9961 7.77042 10.9961 7.27961V5.49486H12.7808V16.2033Z" fill="currentColor"/>
</svg>
</div>
<span
class="rebuy-selectable-gift-with-purchase__progress-step-label"
v-html="getMilestoneLabel(milestone)"
></span>
</div>
</div>
<div class="rebuy-selectable-gift-with-purchase__progress-bar-wrapper">
<div
class="rebuy-selectable-gift-with-purchase__progress-bar-meter"
:class="[hasTierProgress ? 'has-progress' : 'no-progress']"
>
<div
class="rebuy-selectable-gift-with-purchase__progress-bar-meter-fill"
:style="{ width: progressBarPercentage + '%' }"
role="progressbar"
tabindex="0"
aria-valuemin="0"
aria-valuemax="100"
:aria-valuenow="progressBarPercentage"
aria-label="Gift unlock progress"
>
<span class="sr-only" v-text="'Progress: ' + progressBarPercentage + '%'"></span>
</div>
</div>
</div>
</div>
<!-- /Progress Bar -->
<!-- ProductGrid -->
<div
class="rebuy-product-grid rebuy-selectable-gift-with-purchase__product-grid"
v-bind:class="layoutClasses"
tabindex="0"
role="list"
>
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
]"
aria-label="product"
class="rebuy-product-block rebuy-selectable-gift-with-purchase__product-block"
role="listitem"
>
<div class="rebuy-product-media rebuy-selectable-gift-with-purchase__product-media">
<a
class="rebuy-product-image rebuy-selectable-gift-with-purchase__product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event)"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img
v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
v-bind:src="itemImage(product, product.selected_variant, '400x400')"
v-bind:alt="itemImageAlt(product, product.selected_variant)"
>
</a>
</div>
<div class="rebuy-product-info rebuy-selectable-gift-with-purchase__product-info">
<h5 class="rebuy-product-title rebuy-selectable-gift-with-purchase__product-title">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link rebuy-selectable-gift-with-purchase__product-title-link"
v-on:click="learnMore(product, $event)"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div class="rebuy-product-review rebuy-selectable-gift-with-purchase__product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
></span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price rebuy-selectable-gift-with-purchase__product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
</div>
<div class="rebuy-product-options rebuy-selectable-gift-with-purchase__product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
:key="variant.id"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions rebuy-selectable-gift-with-purchase__product-actions">
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting') || !canToggleGift(product)"
v-bind:aria-label="selectableGwpButtonAriaLabel(product)"
v-on:click="toggleGift(product)"
type="button"
>
<span v-html="selectableGwpButtonLabel(product)"></span>
</button>
</div>
</div>
</div>
<!-- /ProductGrid -->
</div>
<!-- /Accordion body -->
</div>
</div>
</div>
</script>
```
## Selectable Gift With Purchase (Cart)
```html title="Last Updated: October 2, 2026"
<script id="rebuy-cart-selectable-gift-with-purchase-template" type="text/template">
<div
class="rebuy-widget rebuy-cart-selectable-gift-with-purchase"
v-cloak
:id="'rebuy-widget-' + id"
:class="[
'widget-type-' + config.type.replace('_','-'),
visible && products.length > 0 ? 'is-visible' : 'is-hidden',
'widget-layout-' + currentLayout(),
'layout-type-' + (config.layout_type || 'addToCart'),
]"
role="region"
aria-label="Selectable Gift With Purchase"
>
<!-- AddToCart -->
<template v-if="config.layout_type !== 'selectGiftTakeover'">
<div
class="rebuy-cart-selectable-gift-with-purchase__header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<div class="rebuy-cart-selectable-gift-with-purchase__gift-icon-cell">
<div
class="rebuy-cart-selectable-gift-with-purchase__gift-icon"
v-if="config.gift_icon?.enabled === true"
:style="giftIconStyles"
>
<img
v-if="config.gift_icon?.image_url"
:src="config.gift_icon.image_url"
class="rebuy-cart-selectable-gift-with-purchase__gift-icon-custom"
alt=""
aria-hidden="true"
/>
<rebuy-icon
v-else
name="gift"
:size="giftIconInnerSize"
:color="giftIconColor"
/>
</div>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-text">
<h3
class="rebuy-cart-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"
></h3>
<h4
class="rebuy-cart-selectable-gift-with-purchase__title"
v-html="getConfigLanguage('title')"
></h4>
<p
class="rebuy-cart-selectable-gift-with-purchase__description"
v-html="getConfigLanguage('description')"
></p>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-actions">
<button
v-if="hasAccordionToggle()"
class="rebuy-cart-selectable-gift-with-purchase__header-toggle"
type="button"
v-on:click="toggleExpanded()"
:aria-expanded="sgwp_expanded ? 'true' : 'false'"
:aria-controls="'rebuy-widget-' + id + '-sgwp-panel'"
:aria-label="getConfigLanguage('toggle_gift_selection')"
>
<rebuy-icon :name="sgwp_expanded ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
</button>
<button
v-if="hasCloseButton()"
class="rebuy-cart-selectable-gift-with-purchase__header-close"
type="button"
v-on:click="hide()"
aria-label="Close gift selection"
>
<rebuy-icon name="x"></rebuy-icon>
</button>
</div>
</div>
<!-- Accordion body: v-show lives here, not on the grid, because Splide wipes the grid's style -->
<div
:id="'rebuy-widget-' + id + '-sgwp-panel'"
class="rebuy-cart-selectable-gift-with-purchase__body"
v-show="!hasAccordionToggle() || sgwp_expanded"
>
<div
class="rebuy-product-grid rebuy-cart-selectable-gift-with-purchase__product-grid"
v-bind:class="layoutClasses"
tabindex="0"
role="list"
>
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
canToggleGift(product) ? '' : 'is-locked',
]"
aria-label="product"
class="rebuy-product-block rebuy-cart-selectable-gift-with-purchase__product-block"
role="listitem"
>
<div class="rebuy-product-media rebuy-cart-selectable-gift-with-purchase__product-media">
<a
class="rebuy-product-image rebuy-cart-selectable-gift-with-purchase__product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event)"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img
v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
v-bind:src="itemImage(product, product.selected_variant, '400x400')"
v-bind:alt="itemImageAlt(product, product.selected_variant)"
>
</a>
</div>
<div class="rebuy-product-info rebuy-cart-selectable-gift-with-purchase__product-info">
<h5 class="rebuy-product-title rebuy-cart-selectable-gift-with-purchase__product-title">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link rebuy-cart-selectable-gift-with-purchase__product-title-link"
v-on:click="learnMore(product, $event)"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div class="rebuy-product-review rebuy-cart-selectable-gift-with-purchase__product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
></span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price rebuy-cart-selectable-gift-with-purchase__product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
</div>
<div class="rebuy-product-options rebuy-cart-selectable-gift-with-purchase__product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
:key="variant.id"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions rebuy-cart-selectable-gift-with-purchase__product-actions">
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting') || !canToggleGift(product)"
v-bind:aria-label="selectableGwpButtonAriaLabel(product)"
v-on:click="toggleGift(product)"
type="button"
>
<span v-html="selectableGwpButtonLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
<!-- /Accordion body -->
</template>
<!-- /AddToCart -->
<!-- SelectGiftTakeover -->
<template v-if="config.layout_type === 'selectGiftTakeover'">
<!-- Collapsed prompt card (default state) -->
<div
v-show="!sgwp_takeover_expanded"
class="rebuy-cart-selectable-gift-with-purchase__takeover-prompt"
>
<div
class="rebuy-cart-selectable-gift-with-purchase__header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<div class="rebuy-cart-selectable-gift-with-purchase__gift-icon-cell">
<div
class="rebuy-cart-selectable-gift-with-purchase__gift-icon"
v-if="config.gift_icon?.enabled === true"
:style="giftIconStyles"
>
<img
v-if="config.gift_icon?.image_url"
:src="config.gift_icon.image_url"
class="rebuy-cart-selectable-gift-with-purchase__gift-icon-custom"
alt=""
aria-hidden="true"
/>
<rebuy-icon
v-else
name="gift"
:size="giftIconInnerSize"
:color="giftIconColor"
/>
</div>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-text">
<h3
class="rebuy-cart-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"
></h3>
<h4
class="rebuy-cart-selectable-gift-with-purchase__title"
v-html="getConfigLanguage('title')"
></h4>
<p
class="rebuy-cart-selectable-gift-with-purchase__description"
v-html="getConfigLanguage('description')"
></p>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-actions">
<button
v-if="hasAccordionToggle()"
class="rebuy-cart-selectable-gift-with-purchase__header-toggle"
type="button"
v-on:click="toggleExpanded()"
:aria-expanded="sgwp_expanded ? 'true' : 'false'"
:aria-controls="'rebuy-widget-' + id + '-sgwp-panel'"
:aria-label="getConfigLanguage('toggle_gift_selection')"
>
<rebuy-icon :name="sgwp_expanded ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
</button>
<button
v-if="hasCloseButton()"
class="rebuy-cart-selectable-gift-with-purchase__header-close"
type="button"
v-on:click="hide()"
aria-label="Close gift selection"
>
<rebuy-icon name="x"></rebuy-icon>
</button>
</div>
</div>
<div
:id="'rebuy-widget-' + id + '-sgwp-panel'"
class="rebuy-cart-selectable-gift-with-purchase__takeover-body"
v-show="!hasAccordionToggle() || sgwp_expanded"
>
<button
class="rebuy-button rebuy-cart-selectable-gift-with-purchase__takeover-open"
type="button"
v-on:click="expandTakeover()"
:aria-expanded="sgwp_takeover_expanded ? 'true' : 'false'"
v-html="getConfigLanguage('select_gift')"
></button>
</div>
</div>
<!-- Expanded takeover panel -->
<div
class="rebuy-cart-selectable-gift-with-purchase__takeover"
v-show="sgwp_takeover_expanded"
>
<div
class="rebuy-cart-selectable-gift-with-purchase__takeover-header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<!-- Back sits in the leading slot: the shopper is one level deep in the cart, so the
control steps back rather than closing. The cart's own X remains in the Smart Cart
header. Always rendered regardless of hasCloseButton() config. -->
<div class="rebuy-cart-selectable-gift-with-purchase__takeover-back-cell">
<button
class="rebuy-cart-selectable-gift-with-purchase__takeover-back"
type="button"
v-on:click="collapseTakeover()"
>
<rebuy-icon name="chevron-left"></rebuy-icon>
<span
class="rebuy-cart-selectable-gift-with-purchase__takeover-back-label"
v-html="getConfigLanguage('back')"
></span>
</button>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-text">
<h3
class="rebuy-cart-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"
></h3>
<h4
class="rebuy-cart-selectable-gift-with-purchase__title"
v-html="getConfigLanguage('takeover_title') || getConfigLanguage('title')"
></h4>
<p
class="rebuy-cart-selectable-gift-with-purchase__description"
v-html="getConfigLanguage('description')"
></p>
</div>
<!-- Trailing slot intentionally empty: balances the 1fr | auto | 1fr grid so the title
stays centered opposite the back button. -->
<div class="rebuy-cart-selectable-gift-with-purchase__header-actions"></div>
</div>
<div
class="rebuy-product-grid rebuy-cart-selectable-gift-with-purchase__product-grid"
v-bind:class="layoutClasses"
tabindex="0"
role="list"
>
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
canToggleGift(product) ? '' : 'is-locked',
]"
aria-label="product"
class="rebuy-product-block rebuy-cart-selectable-gift-with-purchase__product-block splide__slide rebuy-carousel__slide"
role="listitem"
>
<div class="rebuy-product-media rebuy-cart-selectable-gift-with-purchase__product-media">
<a
class="rebuy-product-image rebuy-cart-selectable-gift-with-purchase__product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event)"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img
v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
v-bind:src="itemImage(product, product.selected_variant, '400x400')"
v-bind:alt="itemImageAlt(product, product.selected_variant)"
>
</a>
</div>
<div class="rebuy-product-info rebuy-cart-selectable-gift-with-purchase__product-info">
<h5 class="rebuy-product-title rebuy-cart-selectable-gift-with-purchase__product-title">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link rebuy-cart-selectable-gift-with-purchase__product-title-link"
v-on:click="learnMore(product, $event)"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div class="rebuy-product-review rebuy-cart-selectable-gift-with-purchase__product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
></span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price rebuy-cart-selectable-gift-with-purchase__product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
</div>
<div class="rebuy-product-options rebuy-cart-selectable-gift-with-purchase__product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
:key="variant.id"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions rebuy-cart-selectable-gift-with-purchase__product-actions">
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting') || !canToggleGift(product)"
v-bind:aria-label="selectableGwpButtonAriaLabel(product)"
v-on:click="toggleGift(product)"
type="button"
>
<span v-html="selectableGwpButtonLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
</template>
<!-- /SelectGiftTakeover -->
</div>
</script>
```
<script id="rebuy-cart-selectable-gift-with-purchase-template" type="text/template">
<div
class="rebuy-widget rebuy-cart-selectable-gift-with-purchase"
v-cloak
:id="'rebuy-widget-' + id"
:class="[
'widget-type-' + config.type.replace('_','-'),
visible && products.length > 0 ? 'is-visible' : 'is-hidden',
'widget-layout-' + currentLayout(),
'layout-type-' + (config.layout_type || 'addToCart'),
]"
role="region"
aria-label="Selectable Gift With Purchase"
>
<!-- AddToCart -->
<template v-if="config.layout_type !== 'selectGiftTakeover'">
<div
class="rebuy-cart-selectable-gift-with-purchase__header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<div class="rebuy-cart-selectable-gift-with-purchase__gift-icon-cell">
<div
class="rebuy-cart-selectable-gift-with-purchase__gift-icon"
v-if="config.gift_icon?.enabled === true"
:style="giftIconStyles"
>
<img
v-if="config.gift_icon?.image_url"
:src="config.gift_icon.image_url"
class="rebuy-cart-selectable-gift-with-purchase__gift-icon-custom"
alt=""
aria-hidden="true"
/>
<rebuy-icon
v-else
name="gift"
:size="giftIconInnerSize"
:color="giftIconColor"
/>
</div>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-text">
<h3
class="rebuy-cart-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"
></h3>
<h4
class="rebuy-cart-selectable-gift-with-purchase__title"
v-html="getConfigLanguage('title')"
></h4>
<p
class="rebuy-cart-selectable-gift-with-purchase__description"
v-html="getConfigLanguage('description')"
></p>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-actions">
<button
v-if="hasAccordionToggle()"
class="rebuy-cart-selectable-gift-with-purchase__header-toggle"
type="button"
v-on:click="toggleExpanded()"
:aria-expanded="sgwp_expanded ? 'true' : 'false'"
:aria-controls="'rebuy-widget-' + id + '-sgwp-panel'"
:aria-label="getConfigLanguage('toggle_gift_selection')"
>
<rebuy-icon :name="sgwp_expanded ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
</button>
<button
v-if="hasCloseButton()"
class="rebuy-cart-selectable-gift-with-purchase__header-close"
type="button"
v-on:click="hide()"
aria-label="Close gift selection"
>
<rebuy-icon name="x"></rebuy-icon>
</button>
</div>
</div>
<!-- Accordion body: v-show lives here, not on the grid, because Splide wipes the grid's style -->
<div
:id="'rebuy-widget-' + id + '-sgwp-panel'"
class="rebuy-cart-selectable-gift-with-purchase__body"
v-show="!hasAccordionToggle() || sgwp_expanded"
>
<div
class="rebuy-product-grid rebuy-cart-selectable-gift-with-purchase__product-grid"
v-bind:class="layoutClasses"
tabindex="0"
role="list"
>
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
hasSplideCarousel ? 'splide__slide' : '',
canToggleGift(product) ? '' : 'is-locked',
]"
aria-label="product"
class="rebuy-product-block rebuy-cart-selectable-gift-with-purchase__product-block"
role="listitem"
>
<div class="rebuy-product-media rebuy-cart-selectable-gift-with-purchase__product-media">
<a
class="rebuy-product-image rebuy-cart-selectable-gift-with-purchase__product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event)"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img
v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
v-bind:src="itemImage(product, product.selected_variant, '400x400')"
v-bind:alt="itemImageAlt(product, product.selected_variant)"
>
</a>
</div>
<div class="rebuy-product-info rebuy-cart-selectable-gift-with-purchase__product-info">
<h5 class="rebuy-product-title rebuy-cart-selectable-gift-with-purchase__product-title">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link rebuy-cart-selectable-gift-with-purchase__product-title-link"
v-on:click="learnMore(product, $event)"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div class="rebuy-product-review rebuy-cart-selectable-gift-with-purchase__product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
></span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price rebuy-cart-selectable-gift-with-purchase__product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
</div>
<div class="rebuy-product-options rebuy-cart-selectable-gift-with-purchase__product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
:key="variant.id"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions rebuy-cart-selectable-gift-with-purchase__product-actions">
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting') || !canToggleGift(product)"
v-bind:aria-label="selectableGwpButtonAriaLabel(product)"
v-on:click="toggleGift(product)"
type="button"
>
<span v-html="selectableGwpButtonLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
<!-- /Accordion body -->
</template>
<!-- /AddToCart -->
<!-- SelectGiftTakeover -->
<template v-if="config.layout_type === 'selectGiftTakeover'">
<!-- Collapsed prompt card (default state) -->
<div
v-show="!sgwp_takeover_expanded"
class="rebuy-cart-selectable-gift-with-purchase__takeover-prompt"
>
<div
class="rebuy-cart-selectable-gift-with-purchase__header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<div class="rebuy-cart-selectable-gift-with-purchase__gift-icon-cell">
<div
class="rebuy-cart-selectable-gift-with-purchase__gift-icon"
v-if="config.gift_icon?.enabled === true"
:style="giftIconStyles"
>
<img
v-if="config.gift_icon?.image_url"
:src="config.gift_icon.image_url"
class="rebuy-cart-selectable-gift-with-purchase__gift-icon-custom"
alt=""
aria-hidden="true"
/>
<rebuy-icon
v-else
name="gift"
:size="giftIconInnerSize"
:color="giftIconColor"
/>
</div>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-text">
<h3
class="rebuy-cart-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"
></h3>
<h4
class="rebuy-cart-selectable-gift-with-purchase__title"
v-html="getConfigLanguage('title')"
></h4>
<p
class="rebuy-cart-selectable-gift-with-purchase__description"
v-html="getConfigLanguage('description')"
></p>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-actions">
<button
v-if="hasAccordionToggle()"
class="rebuy-cart-selectable-gift-with-purchase__header-toggle"
type="button"
v-on:click="toggleExpanded()"
:aria-expanded="sgwp_expanded ? 'true' : 'false'"
:aria-controls="'rebuy-widget-' + id + '-sgwp-panel'"
:aria-label="getConfigLanguage('toggle_gift_selection')"
>
<rebuy-icon :name="sgwp_expanded ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
</button>
<button
v-if="hasCloseButton()"
class="rebuy-cart-selectable-gift-with-purchase__header-close"
type="button"
v-on:click="hide()"
aria-label="Close gift selection"
>
<rebuy-icon name="x"></rebuy-icon>
</button>
</div>
</div>
<div
:id="'rebuy-widget-' + id + '-sgwp-panel'"
class="rebuy-cart-selectable-gift-with-purchase__takeover-body"
v-show="!hasAccordionToggle() || sgwp_expanded"
>
<button
class="rebuy-button rebuy-cart-selectable-gift-with-purchase__takeover-open"
type="button"
v-on:click="expandTakeover()"
:aria-expanded="sgwp_takeover_expanded ? 'true' : 'false'"
v-html="getConfigLanguage('select_gift')"
></button>
</div>
</div>
<!-- Expanded takeover panel -->
<div
class="rebuy-cart-selectable-gift-with-purchase__takeover"
v-show="sgwp_takeover_expanded"
>
<div
class="rebuy-cart-selectable-gift-with-purchase__takeover-header"
:data-title-align="config.layout?.theme?.title_alignment || 'left'"
>
<!-- Back sits in the leading slot: the shopper is one level deep in the cart, so the
control steps back rather than closing. The cart's own X remains in the Smart Cart
header. Always rendered regardless of hasCloseButton() config. -->
<div class="rebuy-cart-selectable-gift-with-purchase__takeover-back-cell">
<button
class="rebuy-cart-selectable-gift-with-purchase__takeover-back"
type="button"
v-on:click="collapseTakeover()"
>
<rebuy-icon name="chevron-left"></rebuy-icon>
<span
class="rebuy-cart-selectable-gift-with-purchase__takeover-back-label"
v-html="getConfigLanguage('back')"
></span>
</button>
</div>
<div class="rebuy-cart-selectable-gift-with-purchase__header-text">
<h3
class="rebuy-cart-selectable-gift-with-purchase__super-title"
v-if="getConfigLanguage('super_title')"
v-html="getConfigLanguage('super_title')"
></h3>
<h4
class="rebuy-cart-selectable-gift-with-purchase__title"
v-html="getConfigLanguage('takeover_title') || getConfigLanguage('title')"
></h4>
<p
class="rebuy-cart-selectable-gift-with-purchase__description"
v-html="getConfigLanguage('description')"
></p>
</div>
<!-- Trailing slot intentionally empty: balances the 1fr | auto | 1fr grid so the title
stays centered opposite the back button. -->
<div class="rebuy-cart-selectable-gift-with-purchase__header-actions"></div>
</div>
<div
class="rebuy-product-grid rebuy-cart-selectable-gift-with-purchase__product-grid"
v-bind:class="layoutClasses"
tabindex="0"
role="list"
>
<div
v-for="(product, product_index) in products"
v-bind:class="[
product.handle,
'product-id-' + product.id,
cartHasProduct(product) ? 'cart-has-item' : '',
productTagClasses(product),
canToggleGift(product) ? '' : 'is-locked',
]"
aria-label="product"
class="rebuy-product-block rebuy-cart-selectable-gift-with-purchase__product-block splide__slide rebuy-carousel__slide"
role="listitem"
>
<div class="rebuy-product-media rebuy-cart-selectable-gift-with-purchase__product-media">
<a
class="rebuy-product-image rebuy-cart-selectable-gift-with-purchase__product-image"
tabindex="-1"
v-bind:href="learnMoreURL(product)"
v-bind:style="imageStyles"
v-on:click="learnMore(product, $event)"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
rel="nofollow"
>
<img
v-bind:loading="product_index > 1 ? 'lazy' : 'eager'"
v-bind:src="itemImage(product, product.selected_variant, '400x400')"
v-bind:alt="itemImageAlt(product, product.selected_variant)"
>
</a>
</div>
<div class="rebuy-product-info rebuy-cart-selectable-gift-with-purchase__product-info">
<h5 class="rebuy-product-title rebuy-cart-selectable-gift-with-purchase__product-title">
<a
v-bind:href="learnMoreURL(product)"
class="rebuy-product-title-link rebuy-cart-selectable-gift-with-purchase__product-title-link"
v-on:click="learnMore(product, $event)"
v-html="product.title"
v-bind:class="[hasLearnMore() ? 'clickable' : '']"
v-bind:aria-label="'View ' + product.title"
rel="nofollow"
></a>
</h5>
<div class="rebuy-product-review rebuy-cart-selectable-gift-with-purchase__product-review" v-if="hasProductReviews(product)" aria-label="product star rating">
<span class="rebuy-star-rating">
<span
v-if="product.reviews.star_rating"
class="rebuy-star-rating-value sr-only"
v-html="product.reviews.star_rating + ' stars out of 5 stars'"
></span>
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>
<div class="rebuy-product-price rebuy-cart-selectable-gift-with-purchase__product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale">
<span class="sr-only">Sale price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
<span class="rebuy-money compare-at">
<span class="sr-only">Original price</span>
<span v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money">
<span class="sr-only">Price</span>
<span tabindex="0" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</span>
</div>
</div>
</div>
<div class="rebuy-product-options rebuy-cart-selectable-gift-with-purchase__product-options" v-if="showVariantSelect(product)">
<select
title="Select product variant"
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : config.view_options.variant_selector === 'buttons' }"
class="rebuy-select"
v-bind:aria-label="'variant of ' + product.title"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option
v-for="variant in product.variants"
:key="variant.id"
class="rebuy-product-options__option"
:class="{ 'rebuy-product-options__option--oos' : !variantAvailable(variant) }"
v-bind:value="variant.id"
:disabled="!variantAvailable(variant)"
v-html="formatVariantOptionTitle(variant)">
</option>
</select>
<div
class="rebuy-product-options__button-swatches-container"
:class="{ 'rebuy-style__hidden-block' : config.view_options.variant_selector === 'select' }"
>
<div
v-for="option in product.options"
:key="'option-' + product.id + '-' + option.name"
class="rebuy-product-options__button-swatches rebuy-size-swatches"
>
<div
v-for="(value, value_index) in filterOOSOptions(option, product)"
:key="'value-' + product.id + '-' + option.name + '-' + value + '-' + value_index"
>
<div v-if="displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="hasSwatchOptionSelected(product, value, value_index, 'color')"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="getMerchantThemeColorAssetStyle(value)"
:title="value"
class="rebuy-color-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
</label>
</div>
<div v-if="!displayColorSwatches(option)" class="rebuy-product-options__button-swatch rebuy-size-swatch">
<input
:name="id + '-' + option.name + '-' + product_index"
:id="id + '-' + option.name + '-' + product_index + '-' + value"
:checked="hasSwatchOptionSelected(product, value, value_index, option.name)"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantByOption(product, option.name, value)"
:disabled="isDisabledOptionValue(product, option.name, value)"
/>
<label
:for="id + '-' + option.name + '-' + product_index + '-' + value"
class="rebuy-size-label"
:class="{ 'rebuy-product-options__button-swatch-label--disabled' : isDisabledOptionValue(product, option.name, value) }"
>
{{ value }}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rebuy-product-actions rebuy-cart-selectable-gift-with-purchase__product-actions">
<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting') || !canToggleGift(product)"
v-bind:aria-label="selectableGwpButtonAriaLabel(product)"
v-on:click="toggleGift(product)"
type="button"
>
<span v-html="selectableGwpButtonLabel(product)"></span>
</button>
</div>
</div>
</div>
</div>
</template>
<!-- /SelectGiftTakeover -->
</div>
</script>
See something that needs updating?
Suggest an edit