OVERVIEW
This document will outline some basic information on custom templates. For up to date information on our custom templates, please visit out developer hub. Custom templates are updated from time to time, so if you encounter odd behavior, please check back to see when the latest update to the template was.
Our support services cover all aspects directly linked to Rebuy, providing assistance and guidance for standard features and functionalities. Please note that we do not offer support for third-party plugins or customizations like custom templates as outlined in this document. For a comprehensive list of supported items, please refer to our policy page. Please be mindful of this when proceeding.
CUSTOM TEMPLATES
To use a Rebuy custom template instead of the widget's default template, you must copy and paste a base template immediately after your Rebuy widget div. However, please note that post-purchase offers and checkout extensions cannot be custom templated. A Rebuy widget div looks like this:
<div data-rebuy-id="xxxx"></div>d paste it immediately following your Rebuy div. Here's an example script tag:
Given the type of widget you're looking to customize, copy and paste the appropriate script block as your starting point immediately after your Rebuy div. However, please note that post-purchase experiences cannot be custom templated, nor can checkout extensions.
For example, if you were customizing a rebuy-recommended-template type widget, you would copy and paste the following script block (in its entirety) from the master templates file (included below) and place it immediately after your Rebuy div. Here's an example script tag:
<script id="rebuy-recommended-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
An abbreviate example of this workflow would look like this:
<div data-rebuy-id="xxxx"></div>
<script id="rebuy-recommended-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
Once you've started with the full script tag based template, you can then begin to customize it for your specific application.
Here is the full list of default template types you can choose from as a starting point for your custom template. The file is long, just simply find the relevant script tag by id=type, and copy and paste that full script block to begin with. Happy coding!
<!-- ABBREVIATED LIST OF AVAILABLE STARTING TEMPLATE TYPES -->
<script id="rebuy-recommended-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
<script id="rebuy-upsell-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
<script id="rebuy-thank-you-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
<script id="rebuy-switchtosub-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
<script id="rebuy-recharge-checkout-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
<script id="rebuy-post-purchase-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
<script id="rebuy-gift-with-purchase-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>
Wrap the Custom Template in Raw Tags
In order to make the double curly brace syntax of Vue.js work properly within a liquid file you will need to wrap all of the code for the template within a {% raw %} tag.
Example.
{% raw %}
<script id="rebuy-recommended-template" type="text/template">\
// ALL TEMPLATE CODE
</script>
{% endraw %}
How to Make a Template Apply to One Specific Widget
In order to make the template apply to one specific widget you will need to replace the id in the script tag with "rebuy-widget-XXXX" where XXXX is the ID for that specific widget that you are wanting to manipulate. Then install the div for this widget in the desired location. This can be found within the "Placement" setting of the widget editor. Often times the template will simply be placed at the bottom of the liquid file in which the div has been placed.
Example.
{% raw %}
<script id="rebuy-widget-12345" type="text/template">
// ALL TEMPLATE CODE
</script>
{% endraw %}
Note: This help doc goes into more detail when using a custom template for the Smart Cart. HERE
All the Templates: Paste this in your favorite code editor and beautify it!
<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="hide()">
<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()">
<i class="fas fa-times"></i>
</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-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)]">
<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' : '']">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a class="rebuy-product-title" v-bind:href="learnMoreURL(product)" v-on:click="learnMore(product);" v-html="product.title" v-bind:class="[hasLearnMore() ? 'clickable' : '']" v-bind:alt="'View ' + product.title"></a>
<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)">
<span class="rebuy-star-rating">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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-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 v-if="displayColorSwatches(option)" v-for="option in product.options" class="rebuy-color-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByColor(product, value, product_index)">
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"></label>
</div>
</div>
<div v-if="displaySizeSwatches(option)" v-for="option in product.options" class="mt-10 rebuy-size-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-size-swatch">
<input
:name="id + '-size-' + product_index"
:id="id + '-size-' + product_index + '-' + value"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantBySize(product, value, product_index)">
<label
:for="id + '-size-' + product_index + '-' + value"
class="rebuy-size-label">{{ value }}</label>
</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" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
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"
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>
</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>
<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']">
<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()">
<i class="fas fa-times"></i>
</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-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)]">
<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' : '']">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a class="rebuy-product-title" v-bind:href="learnMoreURL(product)" v-on:click="learnMore(product);" v-html="product.title" v-bind:class="[hasLearnMore() ? 'clickable' : '']" v-bind:alt="'View ' + product.title"></a>
<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)">
<span class="rebuy-star-rating">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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-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 v-if="option.name == 'Color' && displayColorSwatches()" v-for="(option, option_index) in product.options" class="rebuy-color-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + option_index + '-' + value + '-' + value_index"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByColor(product, value, product_index)">
<label
:for="id + '-color-' + option_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"></label>
</div>
</div>
<div v-if="option.name == 'Size' && settings.view_options.variant_selector == 'buttons'" v-for="(option, option_index) in product.options" class="mt-10 rebuy-size-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-size-swatch">
<input
:name="id + '-size-' + product_index"
:id="id + '-size-' + product_index + '-' + value"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantBySize(product, value, product_index)">
<label
:for="id + '-size-' + product_index + '-' + value"
class="rebuy-size-label">{{ value }}</label>
</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" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
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"
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>
<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('_','-'), products.length > 0 ? 'is-visible' : 'is-hidden']">
<div class="rebuy-widget-container">
<div class="rebuy-widget-content">
<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">
<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)]">
<a class="rebuy-bundle__image-item" v-bind:href="learnMoreURL(product)" v-bind:style="imageStyles" v-on:click="learnMore(product);" v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '' ]">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</a>
<div class="rebuy-bundle__image-divider">
<i class="far fa-plus"></i>
</div>
</div>
</div>
<div class="rebuy-bundle__items">
<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), isInputProduct(product) ? 'is-input-product' : '' ,product.selected ? 'is-selected': '']">
<div class="rebuy-product-info">
<div class="rebuy-product-checkbox">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.selected"
type="checkbox" />
</label>
</div>
<strong class="rebuy-product-label" v-if="isInputProduct(product)" v-html="'This item:'"></strong>
<a class="rebuy-product-title" v-bind:href="learnMoreURL(product)" v-on:click="learnMore(product);" v-html="product.title" v-bind:class="[hasLearnMore() && !isInputProduct(product) ? 'clickable' : '']" v-bind:alt="'View ' + product.title"></a>
<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)">
<span class="rebuy-star-rating">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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-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 v-if="option.name == 'Color' && displayColorSwatches()" v-for="(option, option_index) in product.options" class="rebuy-color-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + option_index + '-' + value + '-' + value_index"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByColor(product, value, product_index)">
<label
:for="id + '-color-' + option_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"></label>
</div>
</div>
<div v-if="option.name == 'Size' && settings.view_options.variant_selector == 'buttons'" v-for="(option, option_index) in product.options" class="mt-10 rebuy-size-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-size-swatch">
<input
:name="id + '-size-' + product_index"
:id="id + '-size-' + product_index + '-' + value"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantBySize(product, value, product_index)">
<label
:for="id + '-size-' + product_index + '-' + value"
class="rebuy-size-label">{{ value }}</label>
</div>
</div>
</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">Total Price:</strong>
<div class="rebuy-bundle__actions-price-value" v-if="bundleOnSale()">
<span class="rebuy-money sale" v-html="formatMoney(subtotal())"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(compareAtSubtotal())"></span>
</div>
<div class="rebuy-bundle__actions-price-value" v-if="!(bundleOnSale())">
<span class="rebuy-money" v-html="formatMoney(subtotal())"></span>
</div>
</div>
<div class="rebuy-bundle__actions-buttons">
<button
class="rebuy-button"
v-on:click="addSelectedProductsToCart()"
type="button">
<span v-html="buttonWidgetLabel()"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<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']">
<div class="rebuy-widget-container">
<div class="rebuy-widget-content">
<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-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" />
</label>
</div>
<div class="rebuy-addon__item-image" v-on:click="toggleProductSelect(product)">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="product.title">
</div>
<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-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)">
<span class="rebuy-star-rating">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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-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 v-if="option.name == 'Color' && displayColorSwatches()" v-for="(option, option_index) in product.options" class="rebuy-color-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + option_index + '-' + value + '-' + value_index"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByColor(product, value, product_index)">
<label
:for="id + '-color-' + option_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"></label>
</div>
</div>
<div v-if="option.name == 'Size' && settings.view_options.variant_selector == 'buttons'" v-for="(option, option_index) in product.options" class="mt-10 rebuy-size-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-size-swatch">
<input
:name="id + '-size-' + product_index"
:id="id + '-size-' + product_index + '-' + value"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantBySize(product, value, product_index)">
<label
:for="id + '-size-' + product_index + '-' + value"
class="rebuy-size-label">{{ value }}</label>
</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"></a>
</div>
</div>
</div>
</div>
<div class="rebuy-addon__subtotal" v-if="subtotal() > 0">
<strong class="rebuy-addon__subtotal-label">Total Price:</strong>
<div class="rebuy-addon__subtotal-value" v-if="bundleOnSale()">
<span class="rebuy-money sale" v-html="formatMoney(subtotal())"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(compareAtSubtotal())"></span>
</div>
<div class="rebuy-addon__subtotal-value" v-if="!(bundleOnSale())">
<span class="rebuy-money" v-html="formatMoney(subtotal())"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<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']">
<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()">
<i class="fas fa-times"></i>
</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-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)]">
<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' : '']">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a class="rebuy-product-title" v-bind:href="learnMoreURL(product)" v-on:click="learnMore(product);" v-html="product.title" v-bind:class="[hasLearnMore() ? 'clickable' : '']" v-bind:alt="'View ' + product.title"></a>
<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)">
<span class="rebuy-star-rating">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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-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 v-if="option.name == 'Color' && displayColorSwatches()" v-for="(option, option_index) in product.options" class="rebuy-color-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + option_index + '-' + value + '-' + value_index"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByColor(product, value, product_index)">
<label
:for="id + '-color-' + option_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"></label>
</div>
</div>
<div v-if="option.name == 'Size' && settings.view_options.variant_selector == 'buttons'" v-for="(option, option_index) in product.options" class="mt-10 rebuy-size-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-size-swatch">
<input
:name="id + '-size-' + product_index"
:id="id + '-size-' + product_index + '-' + value"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantBySize(product, value, product_index)">
<label
:for="id + '-size-' + product_index + '-' + value"
class="rebuy-size-label">{{ value }}</label>
</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" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
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"
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>
<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>
<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']">
<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()">
<i class="fas fa-times"></i>
</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-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)]">
<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' : '']">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a class="rebuy-product-title" v-bind:href="learnMoreURL(product)" v-on:click="learnMore(product);" v-html="product.title" v-bind:class="[hasLearnMore() ? 'clickable' : '']" v-bind:alt="'View ' + product.title"></a>
<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)">
<span class="rebuy-star-rating">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
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>
<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']">
<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" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></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"
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-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"
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" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</script>
<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>
FAQs
Can I use a custom template for my Rebuy widget?
Yes! To use a custom template instead of the widget's default template, you need to copy and paste a base template immediately after your Rebuy widget div.
Can I create a custom template for post-purchase offers or checkout extensions?
No, post-purchase experiences cannot be custom templated. These sections follow a fixed structure and do not support custom templates.