Designs

Overview

Manage and find designs for Search, Recommendations, and Email.

What is a Design? #

A design is the visual representation of a Clerk element such as Search, Recommendations, or Email. It defines the HTML and CSS that render the element on your site.

  • A design can be created with the visual Design Editor or as an HTML & CSS based Code Design.
  • Each design has a unique ID and a built‑in preview so you can test before using it in production.
  • Elements on your site use designs through Elements. Multiple Elements can use the same design.

Designs and Components #

Designs are composed of a main design block and/or smaller parts called components.

  • Design: A top‑level item that can be selected in an Element and shown on your site.
  • Component: A design that is created or added inside another design. Components are building blocks and cannot be selected directly in Elements.
  • Sub‑designs: Any design can be used as a component inside another design, letting you reuse whole pieces (for example a shared product card) across multiple designs.

On the Designs page you will find two tabs:

  • Designs: Items that can be used in Elements.
  • Components: Items created from within other designs for reuse. These cannot be used directly in Elements.

When a design is used inside other designs, you will see an indicator such as “Used in other designs”. When it is connected to Elements, you will see “Used in element”.

Creating a Design #

From the Designs page, choose New design. You enter the editor directly and can rename the design at any time. HTML & CSS designs open in the code editor; visual designs open in the Design Editor.

While editing:

  • Use the right‑hand sidebar to add existing designs as components to compose larger layouts.
  • Manage HTML and CSS for code designs in separate panels.
  • Preview the result and note the design ID for use in Elements.

Connecting a Design to an Element #

To show a design on your site:

  1. Create or open an Element under the relevant section.
  2. Select the design.
  3. Configure any variables the design exposes (for example a headline) and publish.

Because multiple Elements can point to the same design, edits to a shared design will affect all Elements that use it once the design is published.

Hosting options #

Designs can be hosted in two ways:

  • In Clerk: The recommended setup for most stores. Designs are stored and managed in my.clerk.io and injected on page load via the selected Element.
  • In your source code: Useful if you maintain shared templates across several sites. See Code Designs for details and examples.

Best practices for composition #

  • Create small, reusable components such as a product card or badge, and include them as sub‑designs in Search and Recommendations.
  • Keep styles scoped to the design or component to avoid side effects.
  • Use variables for copy (e.g. headlines) so the same design can be reused with different text across Elements.

Next steps:

Find designs #

Use the search field on the Designs page to quickly locate a design.

  • Name: Type any part of the design name
  • ID: Paste or type the design ID
  • Element: Search for text or code within a design (HTML, CSS, Liquid)

Steps:

  1. Go to Designs for Search / Recommendations / Email.
  2. Type a name, an ID, or a snippet of text/code in the search field.
  3. The list filters instantly to matching designs.