Customization

Filters

Filters are surfaced from indexed product data:

• Standard attributes - price range, availability, vendor, product type, category, Shopify options (color, size, material, etc.).
• Named tags - any tag using the namespace:value convention becomes a candidate facet (see Tags And Named Tags).
• Metafields - when metafield indexing is enabled, both product and variant metafields can be promoted to filters.
• Metaobject references - display names of referenced metaobjects can be used as filter values (see Metaobject References).

For each filter you can configure: display name, ordering, default open/closed state, and whether it appears on collection pages, search results, or both. Filter configuration is per-tenant and managed by PSYKHE AI during onboarding; changes are picked up without redeploying the theme.

Sort Orders

The default sort is Featured, which is where PSYKHE AI personalization runs. Sort options are configurable and can include:

Sort options shown to the shopper, their display names, and their order are all configurable.

Card Layout, Pagination, Counts

Standard block settings exposed in the Shopify theme editor:

• card aspect ratio, image fit, hover behaviour
• price display (range, from, single)
• inventory and sale badges
• pagination size and style
• results count visibility

These are surfaced as block settings on the PSYKHE AI Collection, Search, and Carousels blocks. No code required.

CSS

Three layers, from least to most invasive:

1. Theme CSS tokens - PSYKHE AI blocks honour CSS custom properties for typography, colour, spacing. Setting tokens at the theme level cascades into all PSYKHE AI surfaces.
2. ::part() overrides - PSYKHE AI components are web components with internal elements hidden inside Shadow DOM. Each component tags styleable internals with a part name, and your theme CSS can target them from the outside using the ::part() pseudo-element — for example, psykhe-product-card::part(price) { ... } styles the price element inside the card without touching the component's internals.
3. custom_css block setting - the Collection and Search blocks accept a raw CSS string that is injected as a <style> block scoped to the component instance.

There is no block setting for custom JavaScript by design.

Advanced: UI Library And JavaScript

For storefronts that want to extend the default blocks - custom event handlers, bespoke rendering, integrations with third-party scripts - PSYKHE AI offers a UI component library.

It is the same library that powers the headless integration and gives you:

• web components for every PSYKHE AI surface (PLP, search, carousels, recommendation rails)
• JavaScript runtime hooks for events, identity, and query state
• the ability to compose surfaces against your own UI shell

Available on request as part of the integration package.