Design System and Theming

This page explains how you can change the visual look of the search experience without changing what it does.

---

What Is the Design System?

Every building block in the SDK (product cards, filters, sorting menus, buttons, etc.) has a visual look. The design system lets you pick which look each building block uses.

Think of it like choosing a “skin” for each part of the search experience. The behavior stays the same. Only the appearance changes.

---

How It Works (Simple Version)

Each building block has a setting called the design name. This setting tells the SDK: “For this building block, use this visual style.”

By default, every building block uses the “default” style. But you can switch any building block to a different style.

Example: Imagine you have a filter header (the title above each filter group, like “Brand” or “Price”). You could show it using:

• The default style. A plain text header with an arrow icon.
• The bubble style. A rounded, pill-shaped header.

You choose by setting the design name to either default or bubble.

---

Available Designs

The SDK comes with four built-in designs:

Design	Description
default	The standard look. Clean and neutral. Works for most websites. Every building block has a “default” version.
bubble	A rounded, softer look. Currently available for filter headers and filter options.
slider	A design optimized for sliding/carousel content. Available for banners.
contentOut	A design where content appears outside its container. Available for sorting and navigation elements.
ada	A design optimized for the ADA compliance. Available for all building blocks.

Not every design covers every building block. If a design does not have a version for a specific building block, the SDK automatically falls back to the default design for that building block.

---

What Can Be Themed

Here are the parts of the search experience that can have different visual styles:

Category	What can be themed
Filters	Filter headers, checkbox lists, tree views, color swatches, star ratings, switch buttons, range sliders, input boxes, apply buttons, filter modals
Sorting	Sorting dropdown, sorting buttons, sorting list, sorting modal
Product display	Product list (results page), product list (searchbox), loading skeletons, no-results message, product list header
Banners	Banner display style
Search elements	Search input, search button
Navigation	Close button, go-back button, see-all button, logo
Content	Asset list, asset headers, custom assets, suggestions, visual sorting

---

One Building Block, One Design Name

Each building block picks its own design independently. This means you can mix and match.

For example, on the same page:

• The filter headers could use the bubble design.
• The product list could use the default design.
• The banners could use the slider design.

There is no requirement to use the same design everywhere.

---

What Happens When a Design Is Missing

If you set a design name that does not exist, the SDK shows a warning and uses the default design instead. This means you can never break the search experience by choosing a wrong design name. It will always fall back safely.

---

Summary

Concept	What it means
Design name	A setting on each building block that picks which visual style to use.
Default design	The standard look. Always available for every building block.
5 built-in designs	default, bubble, slider, contentOut, ada.
Mix and match	Each building block picks its design independently.
Safe fallback	If a design does not exist, the SDK automatically uses the default one.

---

Configuration Reference (for developers)

The designName property is set on each building block in the layout config (inside componentOptions or at the layout node level). Each building block calls getDesignComponents(designName) to resolve its visual sub-elements. If a design does not export a specific sub-element, the default version is used automatically.

---

Setting a design name

{
  component: 'facet',
  componentOptions: {
    facetHeader: {
      designName: 'bubble'
    }
  }
}