Extensions

Kimonix Native Collection Block — General Setup Guide

Last updated May 22, 2026

The Native Collection block is the version of the Kimonix collection block that reuses your own theme's product card design. Cards keep the storefront's existing look — fonts, badges, hover states, quick-buy — and Kimonix only takes over the ordering, filtering, and merchandising.

Step 1: Install the theme files (one-time)

Because the block uses your theme's product card, two small files need to be added to your theme first:

A card section (sections/kx-product-card.liquid) — renders one product card by re-using your theme's existing card markup. The block calls this once per product it shows. The contents depend on which theme you use, because different themes render their cards from different snippet names.
A product template (templates/product.kx.json) — a tiny template that hosts the card section. The block fetches each card's HTML through it. This file is identical across all themes.

This is a one-time setup per theme. If you switch themes you'll need it done again.

If you're not comfortable editing theme code, contact Kimonix support — we'll install the files for you and verify they work on your specific theme.

The product template (same for every theme)

Path: templates/product.kx.json

{
  "sections": { "main": { "type": "kx-product-card" } },
  "order": ["main"]
}

The card section — Dawn and Dawn-family themes

Use this for Dawn, Sense, Studio, Crave, Origin, Spotlight, Refresh, Ride, or any other theme forked from Dawn (they all use Shopify's card-product snippet).

Path: sections/kx-product-card.liquid

{% comment %}
  Kimonix Native Collection — single product card section.
  Fetched by the native block via: /products/<handle>?view=kx&section_id=kx-product-card
  Reuses the theme's own card-product snippet so cards match the rest of the storefront.
{% endcomment %}
<div class="kmnx-card-wrap grid__item">
  {% render 'card-product',
       card_product: product,
       media_aspect_ratio: section.settings.image_ratio,
       show_secondary_image: section.settings.show_secondary_image,
       show_vendor: section.settings.show_vendor,
       show_rating: section.settings.show_rating,
       show_quick_add: section.settings.enable_quick_add %}
</div>

{% schema %}
{
  "name": "KX Product Card",
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image aspect ratio",
      "options": [
        { "value": "adapt",    "label": "Adapt to first image" },
        { "value": "portrait", "label": "Portrait (5:4)" },
        { "value": "square",   "label": "Square (1:1)" }
      ],
      "default": "portrait"
    },
    { "type": "checkbox", "id": "show_secondary_image", "label": "Show second image on hover", "default": true },
    { "type": "checkbox", "id": "show_vendor",         "label": "Show vendor",                "default": false },
    { "type": "checkbox", "id": "show_rating",         "label": "Show rating",                "default": false },
    { "type": "checkbox", "id": "enable_quick_add",    "label": "Enable quick add",           "default": false }
  ]
}
{% endschema %}

Block settings for Dawn-family (in the theme editor on the KX Native Collection block):

Theme preset → leave at None
Grid container tag → leave at div (default)
Grid container class → leave at product-grid (default) — the block's built-in CSS Grid layout drives the columns. If you want Dawn's native flex-grid spacing instead, use grid product-grid grid--4-col-desktop grid--4-col-tablet grid--2-col-tablet-down.

The card section — Impact (Maestrooo) and Impact-derived themes

Use this for Impact and any custom theme derived from Impact (theme name often contains the customer's brand prefix, e.g. sans-complexe/main). Impact uses the product-card snippet (not Dawn's card-product) and a <product-list> custom element for the grid wrapper.

Path: sections/kx-product-card.liquid

{%- if product -%}
  {% render 'product-card',
    product: product,
    show_badges: true,
    stacked: true,
    from_collection: true
  %}
{%- endif -%}

{% schema %}
{ "name": "KX Product Card" }
{% endschema %}

Required block settings for Impact (set these in the theme editor on the KX Native Collection block):

Theme preset → Impact (Maestrooo) — applies Impact-specific mobile hover/quick-buy fixes.
Grid container tag → product-list — Impact's CSS targets this custom element for layout.

Without these two settings, the block still renders but cards lose their native Impact styling (badges positioning, hover states, mobile layout).

The card section — other themes (Symmetry, Empire, Cluse, etc.)

For themes outside Dawn-family and Impact families, the card section has to wrap the right snippet for your specific theme.

Contact Kimonix support with your theme name and we'll provide the correct file. For Cluse there's a dedicated setup guide; more theme-specific guides are added as we onboard new themes.

Step 2: Add the Native Collection Block

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

Option A: All Collections

Use this if you want Kimonix to power every collection page.

In your Shopify admin, go to Online Store → Themes → Customize
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 Native Collection
Configure the block settings (see reference below)
Click Save

All collections using the default template will now use the Kimonix native grid.

Option B: Specific Collections Only

Use this if you only want Kimonix on certain collections while keeping the native grid on others.

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 Native 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

Only the assigned collections will use the Kimonix native grid. All others keep your theme's native grid.

Block Settings Reference

Rendering

Theme card section ID — name of the card section installed in Step 1 (default: kx-product-card)
Template view — template suffix that hosts the card section (default: kx)
Grid container class — CSS classes for the product grid; default works on Dawn-family themes
Wrapper class — CSS classes the theme uses on the outer collection section
Theme preset — set to Impact (Maestrooo) if your store uses Impact; otherwise leave at None

Grid layout

Items per row (desktop / tablet / mobile) — column count at each breakpoint (defaults: 4 / 3 / 2)
Row gap / Column gap — spacing between cards (defaults: 18px / 16px)

Filters

Desktop filter style — Dropdown / Drawer / Hide (default: Dropdown)
Mobile filter style — Dropdown / Drawer / Hide (default: Drawer)
Show active filters inside drawer — render filter pills inside the drawer instead of above the grid (default: Off)

Pagination

Products per page — number of products before "Load More" (default: 24)

Promotional slots

Promo aspect ratio — match to your product card image ratio so promos line up with cards (default: Portrait 4:5)
Slots 1–6 — each has Image, Link URL, Position (1 = first cell), Alt text. Leave a slot blank to skip it.

Advanced

Custom CSS — override default styles (for developers)
Custom init JS — runs after each batch of cards is injected, useful for re-initializing wishlist or review widgets that need to bind to dynamically loaded products

Customization

Custom CSS

Paste CSS into the Custom CSS block setting to override default styles. Useful for matching your theme's typography, colors, and spacing.

Custom init JS

Some apps (wishlists, review widgets) bind to product cards at page load and miss the Kimonix cards because those are injected later. Paste a re-init snippet into the Custom init JS field — it runs every time a new batch of cards is rendered.

// Example: HulkApps Wishlist
if (window.HulkappWishlist) HulkappWishlist.init();