Note: If you do not have a developer, please reach out to the Rebuy team and we can share a list of Rebuy Experts with you!

In order to use a Rebuy custom template (as opposed to the widget's default template), you will need to copy and paste a base template immediately following your Rebuy widget div. A Rebuy widget div looks like this:

<div data-rebuy-id="xxxx"></div>

Given the type of widget you're looking to customize, copy and and paste the appropriate script block as your starting point immediately after your Rebuy div. For example, if you were going to create a custom template for a rebuy-recommended-template type widget, you would copy and paste the following script block (in it's entirety) from the master templates file (included below) and paste it immediately following your Rebuy div. Here's an example script tag:

<script id="rebuy-recommended-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

An abbreviate example of this workflow would look like this:

<div data-rebuy-id="xxxx"></div>
<script id="rebuy-recommended-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

Once you've started with the full script tag based template, you can then begin to customize it for your specific application.

Here is the full list of default template types you can choose from as a starting point for your custom template. The file is long, just simply find the relevant script tag by id=type, and copy and paste that full script block to begin with. Happy coding!

<!-- ABBREVIATED LIST OF AVAILABLE STARTING TEMPLATE TYPES -->
<script id="rebuy-recommended-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

<script id="rebuy-upsell-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

<script id="rebuy-thank-you-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

<script id="rebuy-switchtosub-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

<script id="rebuy-recharge-checkout-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

<script id="rebuy-post-purchase-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

<script id="rebuy-gift-with-purchase-template" type="text/template">
// COPY ALL TEMPLATE CODE
</script>

Wrap the Custom Template in Raw Tags

In order to make the double curly brace syntax of Vue.js work properly within a liquid file you will need to wrap all of the code for the template within a {% raw %} tag.

Example.

{% raw %} 
<script id="rebuy-recommended-template" type="text/template">\
// ALL TEMPLATE CODE
</script>
{% endraw %}

How to Make a Template Apply to One Specific Widget

In order to make the template apply to one specific widget you will need to replace the id in the script tag with "rebuy-widget-XXXX" where XXXX is the ID for that specific widget that you are wanting to manipulate. Then install the div for this widget in the desired location. This can be found within the "Placement" setting of the widget editor. Often times the template will simply be placed at the bottom of the liquid file in which the div has been placed.

Example.

{% raw %} 
<script id="rebuy-widget-12345" type="text/template">
// ALL TEMPLATE CODE
</script>
{% endraw %}

Note: This help doc goes into more detail when using a custom template for the Smart Cart. HERE

All the Templates: Paste this in your favorite code editor and beautify it!

<script id="rebuy-recommended-template" type="text/template">
<div class="rebuy-widget"
v-cloak
v-on:click="stopPropagation($event)"
v-bind:id="'rebuy-widget-' + id"
v-bind:class="['widget-type-' + config.type.replace('_','-'), 'widget-display-' + config.display_type, products.length > 0 ? 'is-visible' : 'is-hidden', 'widget-layout-' + currentLayout()]">

<div
class="rebuy-widget-container"
v-cloak
v-bind:class="['widget-display-' + config.display_type, visible ? 'is-visible' : 'is-hidden' ]"
v-on:click.self="hide()">

<div class="rebuy-widget-content">
<div class="rebuy-modal-close" v-on:click="hide()">
<i class="fas fa-times"></i>
</div>

<div class="rebuy-timer" v-if="hasTimer()">
<h5 class="rebuy-timer-title" v-if="config.language.timer_title">
<span v-html="config.language.timer_title"></span> <span class="rebuy-timer-minutes" v-html="config.timer.duration_minutes"></span>:<span class="rebuy-timer-seconds" v-html="config.timer.duration_seconds"></span>
</h5>
</div>

<h4 class="super-title" v-if="config.language.super_title != ''" v-html="config.language.super_title"></h4>

<h3 class="primary-title" v-if="config.language.title != ''" v-html="config.language.title"></h3>

<div class="description" v-if="config.language.description != ''" v-html="config.language.description"></div>

<div class="rebuy-product-grid" v-bind:class="layoutClasses">

<div class="rebuy-product-block" v-for="(product, product_index) in products" v-bind:class="[product.handle, 'product-id-' + product.id, cartHasProduct(product) ? 'cart-has-item' : '', productTagClasses(product)]">

<div class="rebuy-product-media">
<a class="rebuy-product-image" v-bind:href="learnMoreURL(product)" v-bind:style="imageStyles" v-on:click="learnMore(product);" v-bind:class="[hasLearnMore() ? 'clickable' : '']">
<img v-bind:src="itemImage(product, product.selected_variant, '400x400')" v-bind:alt="'View ' + product.title">
</a>
</div>
<div class="rebuy-product-info">
<a class="rebuy-product-title" v-bind:href="learnMoreURL(product)" v-on:click="learnMore(product);" v-html="product.title" v-bind:class="[hasLearnMore() ? 'clickable' : '']" v-bind:alt="'View ' + product.title"></a>
<div class="rebuy-variant-title" v-if="showVariantTitle(product)" v-html="product.selected_variant.title"></div>
<div class="rebuy-product-review" v-if="hasProductReviews(product)">
<span class="rebuy-star-rating">
<span class="rebuy-star-rating-background"></span>
<span class="rebuy-star-rating-foreground" v-bind:style="{ width: productReviewRatingPercentage(product) }"></span>
</span>
<span class="rebuy-review-count" v-html="productReviewCount(product)"></span>
</div>

<div class="rebuy-product-price">
<div v-if="variantOnSale(product, product.selected_variant)">
<span class="rebuy-money sale" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
<span class="rebuy-money compare-at" v-html="formatMoney(variantCompareAtPrice(product, product.selected_variant))"></span>
</div>
<div v-if="!(variantOnSale(product, product.selected_variant))">
<span class="rebuy-money" v-html="formatMoney(variantPrice(product, product.selected_variant))"></span>
</div>
</div>
<div class="rebuy-product-description" v-if="showProductDescription(product)" v-html="text(product.body_html)"></div>
</div>
<div class="rebuy-product-options" v-if="showVariantSelect(product)">
<select
:id="id + '-' + 'select' + '-' + product_index"
:class="{ hide : settings.view_options.variant_selector == 'buttons' }"
class="rebuy-select"
v-model="product.selected_variant_id"
v-on:change="selectVariant(product)">
<option v-for="variant in product.variants" v-bind:value="variant.id">{{ variant.title }}</option>
</select>

<div v-if="displayColorSwatches(option)" v-for="option in product.options" class="rebuy-color-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-color-swatch">
<input
:name="id + '-color-' + product_index"
:id="id + '-color-' + product_index + '-' + value + '-' + value_index"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-color-input hide"
v-on:change="selectVariantByColor(product, value, product_index)">
<label
:for="id + '-color-' + product_index + '-' + value + '-' + value_index"
:style="{ backgroundColor: value }"
:title="value"
class="rebuy-color-label"></label>
</div>
</div>

<div v-if="displaySizeSwatches(option)" v-for="option in product.options" class="mt-10 rebuy-size-swatches">
<div v-for="(value, value_index) in option.values" class="rebuy-size-swatch">
<input
:name="id + '-size-' + product_index"
:id="id + '-size-' + product_index + '-' + value"
:checked="value_index == 0"
:value="value"
type="radio"
class="rebuy-size-input hide"
v-on:change="selectVariantBySize(product, value, product_index)">
<label
:for="id + '-size-' + product_index + '-' + value"
class="rebuy-size-label">{{ value }}</label>
</div>
</div>
</div>
<div class="rebuy-product-actions">

<div class="subscription-checkbox" v-if="showSubscriptionOptions(product)">
<label class="rebuy-checkbox-label">
<input
class="checkbox-input rebuy-checkbox"
v-model="product.subscription"
v-on:change="toggleSubscription(product)"
type="checkbox" />
<span class="checkbox-label" v-html="upgradeToSubscriptionLabel(product)"></span>
</label>
</div>

<div class="subscription-frequency" v-if="showSubscriptionFrequency(product)">
<select
class="rebuy-select"
v-model="product.subscription_frequency"
v-on:change="updateSubscriptionFrequency(product)">
<option v-for="frequency in product.subscription_frequencies" v-bind:value="frequency">{{ frequencyLabel(frequency, product.subscription_interval) }}</option>
</select>
</div>

<div class="product-quantity" v-if="hasQuantityInputEnabled()">
<div class="rebuy-select-wrapper">
<label class="rebuy-label">Quantity</label>
<select
class="rebuy-select"
v-model="product.quantity">
<option v-for="n in maxQuantityInputValue()" v-bind:value="n">{{ n }}</option>
</select>
</div>
</div>

<button
class="rebuy-button"
v-bind:class="{ working: (product.status != 'ready' && product.status != 'selecting') }"
v-bind:disabled="!(variantAvailable(product.selected_variant)) || (product.status != 'ready' && product.status != 'selecting')"
v-bind:alt="'Add ' + product.title + ' to Cart'"
v-on:click="addToCart(product)"
type="button">
<span v-html="buttonLabel(product)"></span>
</button>
</div>
</div>

</div>

<div class="rebuy-modal-actions" v-if="showContinueButton()">
<button
class="rebuy-button decline"
v-on:click="hide()"
type="button">
<span v-html="continueLabel()"></span>
</button>
</div>

<div class="powered-by-rebuy">
<a v-bind:href="'https://rebuyengine.com/?shop=' + config.shop.myshopify_domain" target="_blank" rel="noopener">
Powered by Rebuy
</a>
</div>

</div>

</div>
</div>
</script>

Let us know if you have any questions and we'll do our best to answer them.

Did this answer your question?