Customization
Filters, sort orders, card layout, CSS, and supported storefront customization for Shopify.
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:valueconvention 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 | What it does |
|---|---|
| Featured | Default. PSYKHE AI personalization ranks results per shopper. |
| Featured by attribute | Personalization scored, then re-ordered by a chosen product attribute (price, inventory, custom field). |
| Best Sellers | Configurable window: last 7, 14, 30, 45, or 60 days. |
| Most Popular | Configurable window: last 7, 14, 30, 45, or 60 days. |
| Newest | By creation date OR publication date - configurable per tenant. |
| Price (asc / desc) | Variant price. |
| Custom | Composite sort defined across multiple attributes (e.g., in-stock first, then price, then tag presence). Defined per tenant. |
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:
- 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.
::part()overrides - PSYKHE AI components are web components with internal elements hidden inside Shadow DOM. Each component tags styleable internals with apartname, 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.custom_cssblock 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 Storefront Customization
For storefronts that need to match existing theme markup or behaviour, the installed PSYKHE AI components expose supported styling and rendering hooks.
See Custom Storefront UI for scoped CSS custom
properties, ::part() selectors, theme-owned product cards, collection quick
links in search, and Shopify section lifecycle handling.
These examples customize an existing integration without exposing or replacing its API configuration, search state, or analytics setup.