Designing

Working with Designs in Clerk.js 2

How to create, change, and copy Designs to be used in your Clerk.io products.

Overview

Designs determine how products should be rendered visually in your Clerk.io Recommendations, Search, and Emails. One Design can be used across multiple Content blocks.

The Design language is a modified version of Handlebars. You can read about the Website Design Language here.


Creating a new Design

In the left-side menu in my.clerk.io, select "Design" from under either Search, Recommendations, or Email-- whichever Content you're creating a Design for.

On the next page, select "New Design" from the top-right corner.

Next, name your Design, then choose the Template you'd like to start with for your Content. In this example, we'll start with the HTML version of the Product Slider.

Then, select "Create Design" from the top-right corner:

You'll then have a basic product Design using both HTML and CSS display customizations. Read more about changing your HTML Designs in the next section.

Changing Different Parts of a Design

HTML

The HTML code is used to render the HTML of the Clerk.io block, including the Product data and the container around it.

Attributes can be inserted via our templating language and then used as part of the Design. Be sure that any Custom Attributes you'd like to use in your Designs are synced with Clerk.io.

CSS

You can use this editor to write custom CSS for use in your templates. Any CSS you write will be injected to the top of the page.

Clerk.io's embed codes simply inject everything to your webshop, meaning that all of your existing CSS can be made available in your Design.

To adjust any CSS in your Design, first locate the class or ID value you'd like to modify in the Design's CSS container. You can then adjust existing components of that element's CSS or add elements to the display in that class/ID.

Copying an Existing Design & Converting it to a Clerk.io Design

If you have existing designs in your webshop that you'd like to use with Clerk.io, you have the option to convert and copy them into your Clerk.io Designs. This may be particularly helpful when considering the Design for your webstore's Search Page.

After identifying the design you'd like to replicate, copying and modifying your design to a Clerk.io Design takes 3 main steps:


1. Copy + paste your existing design

First, Identify the design currently used in the theme files for your webshop that you'd like to copy into Clerk.io, then copy and paste into the HTML container in an empty Clerk.io Design.


If you have CSS associated with the design, include this in the CSS container below the HTML.

2. Replace variable values with the Clerk.io attribute value and syntax
To use your store's attributes in your Clerk.io Design, be sure to change the value name to that used in your Clerk.io Data, and update to the syntax .

  • For example, if you reference a list price in your webshop, the attribute may be called list_price in your Clerk.io Data, and would then need to be referenced as in your Clerk.io Design.


3. Wrap the Design in a Product loop

The last step is to add a for loop to your copied and modified Design, to ensure the Design code iterates for the products applicable in your Search or Recommendations content.


To do this, simply add after the closing </div> for the same div element.