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>