Dropdown Template

The dropdown template displays filters in collapsible sections above the product grid, providing a compact interface suitable for all device sizes.

Implementation¶

Create a new snippet (typically named rebuy-smart-collection-template) and paste the template code. Then render the snippet in your collection template:

{% render 'rebuy-smart-collection-template' %}

Add this at the bottom of collection.liquid or the main file that renders on collection pages.

Template Detection

When Rebuy loads, it searches for a custom template in the theme code. If found, it uses the custom template instead of the standard template.

Template¶

The template wraps content with {% raw %} and {% endraw %} so Vue.js double curly brace syntax doesn't get parsed as Liquid.

Last Updated: January 21, 2026

{% raw %}
<script id="rebuy-smart-collection-dropdown-template" type="text/template">
  <div v-if="shouldShowCollectionsPage()" id="rebuy-smart-collection-dropdown" class="rebuy-smart-collections">
    <div class="rebuy-smart-collections__page">

      <!-- Hero Section -->
      <div class="rebuy-smart-collections__hero" v-bind:class="{ 'rebuy-smart-collections__hero-no-image': !shouldShowHeroImage() }">
        <div class="rebuy-smart-collections__hero-text">
          <h1 class="rebuy-smart-collections__hero-title">{{settings.collectionData?.name || ''}}</h1>
          <div v-if="shouldShowHeroDescription()" class="rebuy-smart-collections__hero-description" v-html="settings.collectionData?.description || ''"></div>
        </div>
        <div v-if="shouldShowHeroImage()" class="rebuy-smart-collections__hero-image">
          <img v-bind:src="getCollectionHeroImage()" />
        </div>
      </div>

      <!-- Skeleton Loading State -->
      <div class="rebuy-smart-collections__skeleton" v-if="!products || products.length === 0">
        <div v-for="n in 8" class="rebuy-smart-collections__skeleton-item">
          <div class="rebuy-smart-collections__skeleton-image"></div>
          <div class="rebuy-smart-collections__skeleton-text"></div>
          <div class="rebuy-smart-collections__skeleton-text short"></div>
        </div>
      </div>

      <!-- Main Content -->
      <div v-else class="rebuy-smart-collections__content">

        <!-- Filters Section -->
        <div class="rebuy-smart-collections__filters-section">
          <div class="rebuy-smart-collections__filters-header">
            <button
              class="rebuy-smart-collections__filters-toggle"
              @click="toggleFilters()"
              :aria-expanded="filtersVisible"
            >
              Filters
              <rebuy-icon :name="filtersVisible ? 'chevron-up' : 'chevron-down'"></rebuy-icon>
            </button>

            <div class="rebuy-smart-collections__sort">
              <label for="sort-select" class="sr-only">Sort by</label>
              <select id="sort-select" v-model="sortBy" @change="handleSort()">
                <option v-for="option in sortOptions" :value="option.value">{{option.label}}</option>
              </select>
            </div>
          </div>

          <!-- Filter Dropdowns -->
          <div v-if="filtersVisible" class="rebuy-smart-collections__filters-body">

            <!-- Price Range -->
            <div v-if="shouldShowPriceFilter()" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Price</h4>
              <div class="rebuy-smart-collections__price-inputs">
                <input type="number" v-model="filterPrice.min" :placeholder="'Min'" />
                <span>-</span>
                <input type="number" v-model="filterPrice.max" :placeholder="'Max'" />
                <button @click="applyPriceFilter()">Go</button>
              </div>
            </div>

            <!-- Availability -->
            <div v-if="shouldShowAvailabilityFilter()" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Availability</h4>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="all" @change="applyFilters()" />
                All
              </label>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="in-stock" @change="applyFilters()" />
                In Stock
              </label>
              <label class="rebuy-smart-collections__filter-option">
                <input type="radio" v-model="filterAvailability" value="sold-out" @change="applyFilters()" />
                Sold Out
              </label>
            </div>

            <!-- Tags -->
            <div v-if="aggregatedFilters.tags && aggregatedFilters.tags.length > 0" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Tags</h4>
              <label v-for="tag in aggregatedFilters.tags" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="tag" v-model="selectedTags" @change="applyFilters()" />
                {{tag}}
              </label>
            </div>

            <!-- Vendors -->
            <div v-if="aggregatedFilters.vendors && aggregatedFilters.vendors.length > 0" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Vendors</h4>
              <label v-for="vendor in aggregatedFilters.vendors" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="vendor" v-model="selectedVendors" @change="applyFilters()" />
                {{vendor}}
              </label>
            </div>

            <!-- Product Types -->
            <div v-if="aggregatedFilters.productTypes && aggregatedFilters.productTypes.length > 0" class="rebuy-smart-collections__filter-group">
              <h4 class="rebuy-smart-collections__filter-title">Product Type</h4>
              <label v-for="type in aggregatedFilters.productTypes" class="rebuy-smart-collections__filter-option">
                <input type="checkbox" :value="type" v-model="selectedTypes" @change="applyFilters()" />
                {{type}}
              </label>
            </div>

          </div>
        </div>

        <!-- Selected Filters Display -->
        <div v-if="hasSelectedFilters()" class="rebuy-smart-collections__selected-filters">
          <span v-for="filter in getSelectedFiltersDisplay()" class="rebuy-smart-collections__selected-filter">
            {{filter.label}}
            <button @click="removeFilter(filter)" aria-label="Remove filter">
              <rebuy-icon name="x"></rebuy-icon>
            </button>
          </span>
          <button @click="resetFilters()" class="rebuy-smart-collections__reset-filters">Reset All</button>
        </div>

        <!-- Products Grid -->
        <div class="rebuy-smart-collections__products-grid">
          <div v-for="(product, index) in products" :key="product.id" class="rebuy-smart-collections__product-card">

            <!-- Product Image -->
            <a :href="productUrl(product)" class="rebuy-smart-collections__product-image" @click="handleProductView(product, index)">
              <img
                :src="productImage(product)"
                :alt="product.name"
                loading="lazy"
              />
              <span v-if="product.featured_badge" class="rebuy-smart-collections__badge">{{product.featured_badge}}</span>
            </a>

            <!-- Product Info -->
            <div class="rebuy-smart-collections__product-info">
              <a :href="productUrl(product)" class="rebuy-smart-collections__product-title" @click="handleProductView(product, index)">
                {{product.name}}
              </a>

              <!-- Reviews -->
              <div v-if="shouldShowReviews(product)" class="rebuy-smart-collections__product-reviews">
                <span class="rebuy-star-rating">
                  <span class="rebuy-star-rating-background"></span>
                  <span class="rebuy-star-rating-foreground" :style="{ width: getReviewPercentage(product) }"></span>
                </span>
                <span class="rebuy-review-count">{{product.reviews.count}}</span>
              </div>

              <!-- Price -->
              <div class="rebuy-smart-collections__product-price">
                <span v-if="productOnSale(product)" class="rebuy-money sale" v-html="formatMoney(product.selected_variant.price)"></span>
                <span v-if="productOnSale(product)" class="rebuy-money compare-at" v-html="formatMoney(product.selected_variant.compareAtPrice)"></span>
                <span v-else class="rebuy-money" v-html="formatMoney(product.selected_variant.price)"></span>
              </div>

              <!-- Variant Selector -->
              <div v-if="shouldShowVariantSelector(product)" class="rebuy-smart-collections__variant-selector">
                <select v-model="product.selected_variant_id" @change="selectVariant(product)">
                  <option v-for="variant in product.variants" :value="variant.id">{{variant.name}}</option>
                </select>
              </div>

              <!-- Add to Cart -->
              <button
                v-if="shouldShowAddToCart(product)"
                class="rebuy-button rebuy-smart-collections__add-to-cart"
                :disabled="!variantAvailable(product.selected_variant)"
                @click="addToCart(product)"
              >
                {{buttonLabel(product)}}
              </button>
            </div>

          </div>
        </div>

        <!-- Pagination -->
        <div v-if="shouldShowPagination()" class="rebuy-smart-collections__pagination">
          <button
            v-if="hasPreviousPage()"
            @click="goToPage(currentPage - 1)"
            class="rebuy-smart-collections__pagination-prev"
          >
            Previous
          </button>

          <span class="rebuy-smart-collections__pagination-info">
            Page {{currentPage}} of {{totalPages}}
          </span>

          <button
            v-if="hasNextPage()"
            @click="goToPage(currentPage + 1)"
            class="rebuy-smart-collections__pagination-next"
          >
            Next
          </button>
        </div>

        <!-- Load More Button -->
        <div v-if="shouldShowLoadMore()" class="rebuy-smart-collections__load-more">
          <button @click="loadMore()" :disabled="isLoadingMore">
            {{isLoadingMore ? 'Loading...' : 'Load More'}}
          </button>
        </div>

      </div>

      <!-- Powered by Rebuy -->
      <div v-if="shouldShowPoweredByRebuy()" class="powered-by-rebuy">
        <a :href="'https://rebuyengine.com/?shop=' + shop()" target="_blank" rel="noopener">
          Powered by Rebuy
        </a>
      </div>

    </div>
  </div>
</script>
{% endraw %}

Template Features¶

Feature	Description
Hero section	Collection title, description, and optional image
Skeleton loading	Placeholder UI while products load
Filter dropdowns	Price, availability, tags, vendors, product types
Selected filters	Visual display of active filters with remove buttons
Product grid	Responsive product cards with images, reviews, pricing
Variant selector	Dropdown for multi-variant products
Pagination	Page numbers, load more, or infinite scroll

Customization¶

Accessing Liquid¶

To access Liquid snippets within the template, end the raw block temporarily:

{% raw %}
  <!-- Vue.js template code -->
{% endraw %}

{% render 'your-liquid-snippet' %}

{% raw %}
  <!-- More Vue.js template code -->
{% endraw %}

CSS Classes¶

All elements use BEM-style class names prefixed with rebuy-smart-collections__. Override these in your theme CSS to customize appearance.

See something that needs updating? Suggest an edit