Kimonix Collection Extension — Setup Guide

Prerequisites

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

Step 1: Enable Kimonix Utils

1. In your Shopify admin, go to Online Store → Themes → Customize
2. Click App embeds (the puzzle icon in the left sidebar)
3. Find Kimonix Utils and toggle it on
4. 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

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

1. In the theme customizer, navigate to any collection page using the page selector at the top
2. In the left sidebar under Template, find the native product grid section
3. Remove or hide the native product grid section
4. Click Add block or Add section and select KX Collection
5. Configure the block settings (page size, filter style, columns, etc.)
6. Click Save

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

Option B: Specific Collections Only

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

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

Only the assigned collections will use the Kimonix grid. All others keep the native Shopify grid.

Block Settings Reference

• Products per page — Number of products before "Load More" (default: 24)
• Max items per row (desktop) — Columns on large screens (default: 4)
• Items per row (tablet) — Auto interpolates between min/max, or set a fixed value (default: Auto)
• Min items per row (mobile) — Columns on small screens (default: 2)
• Desktop filter style — Dropdown or Drawer (default: Dropdown)
• Mobile filter style — Dropdown or Drawer (default: Drawer)
• Show secondary image on hover — Swap to second product image on mouse hover (default: Off)
• Custom CSS — Override default styles (for developers)
• Custom card renderer (JS) — Replace the default product card with custom HTML (for developers)

Customization

Custom CSS

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

Custom Card Renderer

For advanced customizations beyond CSS, paste a JavaScript function into the Custom card renderer block setting:

window.kimonixRenderCard = function(product, productId) {
  // product contains: id, handle, title, featuredImage, priceRange, variants, options, etc.
  return '<div class="my-card">...</div>';
}

This gives full control over the product card HTML, useful for integrating with third-party apps (wishlists, reviews) that require specific markup.