Khaime Storefront

Intro

The [khaime_storefront] shortcode renders a server-side product grid — pulled live from your Khaime catalog — on any WordPress page, with filtering, sorting, and multicurrency built in.

Context

This is the entry point of the WordPress Storefront plugin: the grid links out to product detail pages and into the cart, which is either a slide-out drawer or the dedicated Cart Page depending on how cart_display is set. Everything here reads from the same Partner API key configured once in Settings → Khaime.

Download Plugin

khaime-storefront.zip

The storefront is server-rendered. Your Partner API key is configured once in Settings → Khaime — you don’t pass it on the shortcode. The JS SDK only loads when a shopper clicks Proceed to checkout.

Hows

Basic usage

[khaime_storefront]

Filter by category

Show only products from a specific category. You can filter by category ID or by slug/name — whichever is more convenient. By ID (numeric, from your Khaime dashboard):

[khaime_storefront category_id="5"]

By slug (URL-friendly, lowercase-with-dashes):

[khaime_storefront category_slug="online-courses"]

By name (case-insensitive, matches even if no slug is set):

[khaime_storefront category_slug="Online Courses"]

Multiple categories (comma-separated):

[khaime_storefront category_slug="online-courses,workshops"]

Combine with other filters to narrow results further:

[khaime_storefront category_slug="online-courses" type="digital" sort="newest"]

If category_slug matches no categories, the result is empty — the filter is not silently dropped. This guards against typos returning the full catalog.

Full example

[khaime_storefront
    product_url="/product/{slug}"
    category_slug="online-courses"
    type="digital"
    sort="newest"
    product_ids="123,456,789"
    columns="3"
    limit="12"
    show_currency="true"
    show_pagination="true"
]

Attributes

Attribute	Description	Default
`limit`	Products per page (1–48)	`12`
`columns`	Grid columns	`4`
`category_id`	Filter by product category ID	—
`category_slug`	Filter by category slug or name (case-insensitive). Comma-separated for multiple. Unioned with `category_id`.	—
`product_ids`	Filter to specific product IDs (comma-separated)	—
`category`	Free-text category filter passed to the API	—
`type`	Filter by product type: `digital`, `live_event`, `physical`, etc.	—
`sort`	Sort: `price_asc`, `price_desc`, `newest`, `oldest`, `title_asc`, `title_desc`	—
`title`	Inline heading rendered above the grid. Leave empty to avoid duplicating your WordPress page title.	`""`
`show_currency`	Show the inline currency switcher (only renders when more than one currency is enabled)	`true`
`show_pagination`	Show pagination controls below the grid	`true`
`empty_message`	Text shown when the result set is empty	`No products found.`
`product_url`	URL pattern for product links. Use `{slug}` placeholder.	(from settings)
`store_url`	”Continue shopping” target used by cart/empty states	(from settings)
`cart_url`	Destination for the cart icon when `cart_display` is `page`	(from settings, default `/cart`)
`cart_display`	`drawer` or `page` — see Cart Page	`drawer`

Legacy attributes from the v1 JS plugin (theme, spacing, card_style, primary_color, sandbox, merchant_id, hover_effect, etc.) are accepted and silently ignored so existing shortcodes don’t error after the upgrade. They no longer have any effect — remove them when you next touch the page.

Admin settings

Most setup happens once at Settings → Khaime:

Setting	Purpose
Environment	`Sandbox` or `Live` — selects which Khaime backend to talk to.
Partner Key	Your `pk_live_…` / `pk_sandbox_…` key from your Khaime dashboard’s Settings → API. Required — the storefront can’t make a single API call without it.
Product URL prefix	Slug used for auto-routed product pages (default `product`, so URLs look like `/product/{slug}`).
Store Page URL	”Continue shopping” target for the cart and empty states.
Primary color	Overrides the storefront’s accent color (buttons, currency switcher, selected states). Leave empty to use the default.
Cart display	Global default for `cart_display` — `drawer` or `page`.
Cart Page URL	Destination when `Cart display` is `page` (default `/cart`). Must point to a page containing `[khaime_cart]`.
Floating cart button	Off by default. Shows a persistent cart icon in the bottom corner on every page, so customers can reopen the drawer after closing it.
Enabled currencies	Which of your merchant’s supported currencies appear in the switcher. The floating switcher auto-renders when more than one is enabled.

KHAIME_API_URL / KHAIME_SDK_URL — overriding the API/SDK host — are wp-config.php constants for local development or staging, not settings-page fields. They show up read-only under Developer overrides on the settings page when defined.

Cart display

The storefront includes a cart icon. By default it opens a slide-out drawer. To send shoppers to a dedicated cart page instead, set cart_display to page (either globally in Settings → Khaime → Cart display or per-instance on the shortcode). See the Cart Page guide for setup. Separately, the optional floating cart button (off by default) adds a persistent cart icon to every page, independent of which cart display mode is active.

Theming

The storefront ships with a fixed, light color palette (surfaces, text, hairlines) so it renders consistently regardless of your theme. The one themeable piece is the accent color used for buttons, the currency switcher, and selected states — set it once in Settings → Khaime → Primary color; leave it empty to use the built-in default. There’s no per-shortcode theme override — styling stays consistent with the storefront’s own admin setting, not the shortcode instance.

CSS customization

Override styles using the khaime- prefix:

.khaime-storefront { /* Main container */ }
.khaime-storefront__grid { /* Product grid */ }
.khaime-card { /* Product card */ }
.khaime-card__title { /* Product title */ }
.khaime-card__price { /* Product price */ }

Whys

The grid is server-rendered rather than a client-side app because product data, pricing, and category filters can then be produced in one pass on the server — no loading spinner, no layout shift while a script fetches and renders products after the page has already painted. Deferring the JS SDK until the customer actually clicks “Proceed to checkout” follows the same logic in reverse: checkout genuinely needs a script-driven modal (payment element, redirect handling), but the browsing experience doesn’t, so nothing pays that cost until it’s needed. Authenticating with a partner key instead of a numeric merchant ID means the same field also tells the plugin which environment to use — a pk_sandbox_ key can’t accidentally be paired with a “Live” setting for a different merchant, because the two are the same credential.

Why nots

Not a full storefront theme. It’s a shortcode-rendered grid meant to sit inside your existing WordPress pages and theme — it doesn’t provide its own site chrome, homepage, or navigation.
No per-shortcode currency configuration beyond show_currency. Which currencies are offered is controlled once, account-wide, in Settings → Khaime → Enabled currencies — you can’t offer a different currency set per shortcode instance.
Legacy v1 shortcode attributes are ignored, not migrated. If your shortcodes still carry theme, merchant_id, or similar v1 attributes, they’re silently dropped rather than translated to current settings — update them by hand.
category_slug typos return an empty grid, not the full catalog. This is intentional (see the note above), but it means a stale or misspelled slug will look like “no products” rather than falling back to showing everything.

Plugins

WooCommerce

WordPress

Storefront

Khaime Storefront

Intro

Context

Download Plugin

Hows

Basic usage

Filter by category

Full example

Attributes

Admin settings

Cart display

Theming

CSS customization

Whys

Why nots

​Khaime Storefront

​Intro

​Context

Download Plugin

​Hows

​Basic usage

​Filter by category

​Full example

​Attributes

​Admin settings

​Cart display

​Theming

​CSS customization

​Whys

​Why nots

Khaime Storefront

Intro

Context

Hows

Basic usage

Filter by category

Full example

Attributes

Admin settings

Cart display

Theming

CSS customization

Whys

Why nots