Overview

Smart Collections templates enable customization of layout and functionality beyond the admin settings. The component is built with Vue.js, supporting Vue.js attributes for conditional rendering and dynamic behavior.

Overview¶

Custom templates let you:

• Override the default Smart Collections layout
• Add custom filtering UI
• Customize product card display
• Implement unique sorting interfaces
• Integrate with theme-specific styling

Available Templates¶

Vue.js Integration¶

Templates support all Vue.js directives:

<!-- Conditional rendering -->
<div v-if="shouldShowHeroImage()">
  <img :src="getCollectionHeroImage()" />
</div>

<!-- Loops -->
<div v-for="product in products" :key="product.id">
  {{ product.name }}
</div>

<!-- Event handling -->
<button @click="addToCart(product)">Add to Cart</button>

Any globally accessible function can be used to provide alternate user experiences.

Related¶

• Dropdown Template
• Sidebar Template
• Smart Collections Overview
• Event Listeners