Styling Your Onsite Designs In Clerk.io

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, choose the type of content you’d like to start with for your design. In this example, we are using the Product Slider.

Then, select Next from the bottom-right corner.

In the next section you can name your design. Once you have done this, select Next.

You’ll then have choice of whether you would like to work on your design through the Design Editor or Code.

NOTE: If you have little experience with code, specifically HTML and CSS we advise using the Design Editor.

Once you have chosen, select Create Design. Your out of the box design will show where you can make any changes to the design with a few clicks.

Changing Different Parts of a Design In Code

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 {%raw%} {{ attribute }}.

• 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 {{ product.list_price }} in your Clerk.io Design.{%endraw%}

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 {%raw%} {% for product in products %} before your main slider