Extensions

Kimonix Collection Extension — Cluse Setup Guide

Last updated April 1, 2026

Prerequisites

Kimonix app installed on your Shopify store
A plan that includes Shopify Markets (if using marketization)

Step 1: Enable Kimonix Utils

In your Shopify admin, go to Online Store → Themes → Customize
Click App embeds (the puzzle icon in the left sidebar)
Find Kimonix Utils and toggle it on
Click Save

Step 2: Add the Collection Block

You have two options depending on whether you want the Kimonix collection on all collections or only specific ones.

Option A: All Collections

In the theme customizer, navigate to any collection page using the page selector at the top
In the left sidebar under Template, find the native product grid section
Remove or hide the native product grid section
Click Add block or Add section and select KX Collection
Configure the block settings (see below for Cluse-specific settings)
Click Save

Option B: Specific Collections Only

In the theme customizer, navigate to a collection page
At the top, click the page selector and choose Create template — name it something like kimonix-collection
In this new template, remove the native product grid section
Click Add block or Add section and select KX Collection
Configure the block settings and click Save
Go to Shopify Admin → Products → Collections
Open each collection you want to use Kimonix for
In the right sidebar under Theme template, select kimonix-collection
Save the collection

Step 3: Configure Block Settings

After adding the block, configure these recommended settings:

Products per page: 24
Max items per row (desktop): 5
Items per row (tablet): Auto
Min items per row (mobile): 2
Desktop filter style: Drawer
Mobile filter style: Drawer
Show secondary image on hover: On

Enable "Show active filters inside drawer" to display active filter pills inside the filter sidebar instead of above the product grid.

Step 4: Paste Custom CSS

In the block settings, find the Custom CSS field and paste the following:

/* Cluse Custom CSS — paste into block setting "Custom CSS" */

/* Grid: 5 columns desktop, 2 mobile */
#kmnx-merch-collection { --kmnx-grid-gap: 1.25rem; }
.kmnx-product-grid {
  /* columns handled by JS responsive logic */
  gap: var(--kmnx-grid-gap);
  margin: 0;
}

/* Reset theme grid classes used for wishlist compatibility */
.kmnx-product-grid .grid__item {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.kmnx-product-grid .grid-product__content {
  z-index: 0;
  position: relative;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Card styling */
.kmnx-card {
  font-family: 'Jost', sans-serif;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.kmnx-card:hover {
  box-shadow: none;
  transform: none;
}
.kmnx-card__image-container {
  border-radius: 0;
}
.kmnx-card__title {
  font-family: 'Jost', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
}
.kmnx-card:hover .kmnx-card__title { text-decoration: none; }
.kmnx-product-count { display: none; }

/* Drawer */
.kmnx-drawer { font-family: 'Jost', sans-serif; letter-spacing: normal; }
.kmnx-drawer-section__toggle { font-weight: 400; }
.kmnx-drawer-option { text-transform: none !important; letter-spacing: normal !important; font-weight: 400 !important; }
.kmnx-drawer-count { text-transform: none !important; letter-spacing: normal !important; }
.kmnx-card__price {
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
}
.kmnx-card__swatches { display: none; }

/* Secondary image hover (hide on mobile) */
.kmnx-card__img-secondary { display: block; }
@media (max-width: 769px) {
  .kmnx-card__img-secondary { display: none; }
}

/* Toolbar */
.kmnx-toolbar {
  justify-content: space-between;
  padding: 1rem 0;
  margin: 0;
}
.kmnx-filter-btn {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.75rem 1.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0;
}
.kmnx-sort__label {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  color: #000;
}
.kmnx-sort__label::after { display: none; }
.kmnx-sort__current::after {
  content: '';
  border: solid #000;
  border-width: 0 1.5px 1.5px 0;
  padding: 3px;
  transform: rotate(45deg);
  display: inline-block;
  margin-left: 0.75rem;
  margin-bottom: 2px;
}
.kmnx-sort__dropdown[open] .kmnx-sort__current::after {
  transform: rotate(-135deg);
  margin-bottom: -2px;
}
.kmnx-sort__options {
  border-radius: 0;
  min-width: 220px;
}
.kmnx-sort__option { font-family: 'Jost', sans-serif; }

Step 5: Paste Custom Card Renderer (JS)

In the block settings, find the Custom card renderer (JS) field and paste the following. This custom card renderer wraps each product in the HTML structure required by the Cluse wishlist app, ensuring the heart icons appear correctly on each product card.

/* Cluse Custom Card Renderer — paste into block setting "Custom card renderer (JS)" */
/* Wraps cards in grid__item > grid-product__content for wishlist app compatibility */
/* Uses array.join to avoid + concatenation which Shopify textarea encodes */

window.kimonixRenderCard = function(product, productId) {
  if (!product) return '';

  var href = product.handle ? ['/products/',product.handle].join('') : '#';
  var img = product.featuredImage;
  var altText = (img && img.altText || product.title || '').replace(/"/g, '&quot;');
  var imgHtml = '';

  if (img) {
    imgHtml = ['<img class="kmnx-card__img-primary" src="',img.url,'&width=600" alt="',altText,'" loading="lazy">'].join('');
    if (product.images && product.images.edges && product.images.edges.length > 1) {
      var sec = product.images.edges[1].node;
      imgHtml = [imgHtml,'<img class="kmnx-card__img-secondary" src="',sec.url,'&width=600" alt="',(sec.altText || altText),'" loading="lazy">'].join('');
    }
  } else {
    imgHtml = '<div class="kmnx-card__no-image"></div>';
  }

  var price = product.priceRange && product.priceRange.minVariantPrice;
  var compareAt = product.compareAtPriceRange && product.compareAtPriceRange.minVariantPrice;
  var priceHtml = price ? new Intl.NumberFormat(undefined, { style: 'currency', currency: price.currencyCode }).format(parseFloat(price.amount)) : '';
  var compareHtml = '';
  if (compareAt && price && parseFloat(compareAt.amount) > parseFloat(price.amount)) {
    compareHtml = ['<span class="kmnx-card__compare-price">',new Intl.NumberFormat(undefined, { style: 'currency', currency: compareAt.currencyCode }).format(parseFloat(compareAt.amount)),'</span>'].join('');
  }

  var h = product.handle || '';
  return [
    '<div class="grid__item grid-product" data-product-handle="',h,'" data-product-id="',productId,'" product-id="',productId,'" product-handle="',h,'" style="position:relative;">',
    '<div class="grid-product__content" style="position:relative;">',
    '<a href="',href,'" class="kmnx-card grid-product__link product-card" data-product-id="',productId,'" data-product-handle="',h,'" product-id="',productId,'" product-handle="',h,'">',
    '<div class="kmnx-card__image-container">',imgHtml,'</div>',
    '<div class="kmnx-card__details">',
    '<h3 class="kmnx-card__title">',(product.title || ''),'</h3>',
    '<div class="kmnx-card__price">',priceHtml,compareHtml,'</div>',
    '</div>',
    '</a>',
    '</div>',
    '</div>'
  ].join('');
};