You can design your Clerk elements without coding by using our Design Editor. Check this short video for an overview of how to use it.

Basics

To get to the Design Editor, go to my.clerk.io and click on either Search or Recommendations and then Designs

Click New Design:

Next choose one of the top Template options that do not include "HTML" in the title:

Click Create Design.

You can now see the Design Editor:

On the right hand side, you can choose to edit styling specifically for Desktop, Mobile and Tablet - the styling will be used for each type of device.

You will also find the following 3 menus:

Components

From this menu you can drag new elements to your Design. A blue bar will tell you where it will be placed:

Overview

The overview menu provides a full list of all elements and containers in your design. To edit an element, click on one of the elements of the list.

Edit

Clicking on an element in the Component menu or in the Design itself sends you to the Edit menu.

Here you have control of the visual representation of an element, like a text or a button:


In the bottom of the Edit menu, you you can add custom styling through CSS if needed:

The CSS you add will take effect specifically for Desktop, Mobile and Tablet depending in your choice,

To make your changes take effect, press save in top right corner:


If you're not happy with your design you can always gain full control of them by going to Edit Code, to Edit the HTML and CSS code directly.

NOTE: If you enter Code Mode, you can not go back to the design in Editor mode afterwards:

Using Conditionals

Conditionals allows you to show components when a certain criteria is met, like when a product is on sale, or if its not in stock.

To add it, drag a condition block anywhere in your Design:

In Edit you will then be able to choose the condition in which to show this block.

Examples 1: Showing a block when the attribute on_sale is true:

Example 2: Using fixed values, to check if a price is below 30:

Example 3: Comparing two attributes like list_price greater than price:

When you have made your condition, go back to Components and drag an element you want to show when the criteria is met:

Now you can style this element to your liking:

Lastly, go to Overview and find your condition:

In the bottom, set Testing/Always Visible to No.
This will cause the component to only show up when the condition is met:

Did this answer your question?