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.
<script id="rebuy-widget-1234" type="text/template"></script>
Recommended Template
<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="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>
</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
<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>
Dynamic Bundle
<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>
Product Add Ons
<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>
Shopify Thank You Page
Please note
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.
<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>
Switch to Subscription
<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>
Recharge Checkout
<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>
Gift With Purchase
<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>