How to add a Kitenzo custom component to your theme

The Bundle Embed covers most bundle page designs out of the box. If your store needs a fully custom layout — matching a specific brand mockup, for example — you can add the Kitenzo component directly into your theme's code instead. This guide walks a developer through installing it on a dedicated page or on a product page, so it only appears where you want it.

Prefer not to do this yourself? Our team can install the component and set up the page for you — just get in touch.

Before you start

1. You'll need a developer with access to Edit code on your theme, and the Kitenzo component files (a CSS file, a JS file, and a Liquid section file).
2. Sections added in the theme editor are saved to the template, not the page. If the component is added to your default page or product template, it will show up on every page or product that uses that template. Building a dedicated template — covered below — keeps it scoped to only the page or products you choose.

Step 1: Add the component files to your theme

1. Go to Online Store > Themes, click the ⋯ menu next to your theme, and choose Edit code.
2. Add the CSS file to the assets folder.
3. Add the JS file to the assets folder.
4. Add the Liquid section file to the sections folder.

Once these three files are in place, the component is available as a section in the theme editor, and you can follow either option below.

Option A: Add the component as its own page

Step 1: Create the template

1. In Edit code, open the Templates folder.
2. Click Add a new file.
3. Name it page.yourfilename.json — for example, page.kitenzo-component.json.

This creates templates/page.yourfilename.json, which Shopify will offer as a template option when you create a page.

Step 2: Strip the template back to just the component

Replace the contents of the new file so it holds only the Kitenzo component section — remove the default page-title and rich-text sections so the component gets the full-width canvas:

{
  "sections": {
    "kitenzo-component": {
      "type": "your-section-type",
      "settings": {}
    }
  },
  "order": [
    "kitenzo-component"
  ]
}

Replace "type": "your-section-type" with the actual section type name from the Liquid file you added in Step 1.

Step 3: Create the page

1. Go to Online Store > Pages > Add page.
2. Give it a name — for example, "Build Your Bundle".
3. Leave the body content empty.
4. Under Theme template, select the template you created above.

Note: if you create the page while working on a theme copy rather than your published (live) theme, the new template won't appear in this list yet — it only becomes available once the theme it lives on is published.

Step 4: Configure the section

Open the page in the theme editor and fill in the section settings:

• API key — your kit_live_ key. In Kitenzo, go to Settings > Headless API > Create API Key, give it a name, and copy it.
• API base URL — leave this empty.

One page, or one per bundle?

Start with a single page. Leave the tab link URL pattern empty and shoppers will switch between bundles in place, with no page reload — one page and one template, nothing else to maintain.

If you need unique URLs later on, for example for ads or SEO, the same template supports that too:

• Create one page per bundle, all using the same template.
• Give each page a custom.kitenzo_bundle_id page metafield holding that bundle's ID.
• The template keeps the API key, tab list, and copy in one place — each page only carries its own bundle ID.

Get in touch with our team when you're ready to set this up, and we'll walk you through it.

Option B: Add the component to a product page

Instead of a standalone page, you can attach the component to real products. Because it behaves like a genuine product, it appears in collections, filters, and search — a standalone page won't.

Step 1: Create the template

1. In Edit code, open the Templates folder.
2. Click Add a new file.
3. Name it product.yourfilename.json — for example, product.kitenzo-component.json.

This creates templates/product.yourfilename.json.

Step 2: Decide how much of the product page to keep

A standard product template usually includes the title, price, image gallery, and an Add to cart button. You have two options:

• Keep the standard sections and add the component alongside them, for example below the buy box. The page still looks and behaves like a normal product page, with the component as an addition.
• Strip it back, the same way as the page version in Option A, so the component becomes the main focus.

Here's an example that keeps the core product sections and adds the component below them:

{
  "sections": {
    "main": {
      "type": "main-product",
      "blocks": {
        "title": {
          "type": "title",
          "settings": {}
        },
        "vendor": {
          "type": "text",
          "settings": {
            "text": "{{ product.vendor }}",
            "text_style": "body"
          }
        },
        "price": {
          "type": "price",
          "settings": {}
        },
        "description": {
          "type": "description",
          "settings": {}
        }
      },
      "block_order": [
        "title",
        "vendor",
        "price",
        "description"
      ],
      "settings": {}
    },
    "kitenzo-component": {
      "type": "your-section-type",
      "settings": {}
    }
  },
  "order": [
    "main",
    "kitenzo-component"
  ]
}

Adjust the blocks, block order, and settings to match whichever standard sections you want to keep, and replace "type": "your-section-type" with the actual section type from your Liquid file.

Step 3: Assign the template to your products

1. Open each product you want the component on.
2. Under Theme template, select the new product template.

Only the products you choose will use it — and because each one is a genuine product rather than a standalone page, it will still show up naturally in collections, filters, and search.

Step 4: Configure the section

Open the page in the theme editor and fill in the section settings:

• API key — your kit_live_ key. In Kitenzo, go to Settings > Headless API > Create API Key, give it a name, and copy it.
• API base URL — leave this empty.

Redirecting existing bundle links

If you already have links pointing to /apps/bundles/bundle/..., set up the redirect to your new page directly in Kitenzo, not in your theme. Get in touch with our team if you'd like a hand with this.