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="displayColorSwatches(option)" v-for="option in product.options" class="rebuy-color-swatches">
                                <div v-for="(value, value_index) in filterOOSOptions(option, product)" 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 filterOOSOptions(option, product)" 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', '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 filterOOSOptions(option, product)" 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 filterOOSOptions(option, product)" 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', 'widget-layout-' + currentLayout()]">
            
            <div
                class="rebuy-widget-container"
                v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]">
                <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-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="displayColorSwatches(option)" v-for="option in product.options" class="rebuy-color-swatches">
                                        <div v-for="(value, value_index) in filterOOSOptions(option, product)" 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 filterOOSOptions(option, product)" 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" v-html="config.language.total_price_label"></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', 'widget-layout-' + currentLayout()]">
        
        <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="displayColorSwatches(option)" v-for="option in product.options" class="rebuy-color-swatches">
                                        <div v-for="(value, value_index) in filterOOSOptions(option, product)" 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 filterOOSOptions(option, product)" 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" v-html="config.language.total_price_label"></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', '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 filterOOSOptions(option, product)" 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 filterOOSOptions(option, product)" 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', '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 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', '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" 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>