Using the Design Editor 1.0

How to use the Design Editor 1.0

This article is for the Design Editor 1.0 which is no longer available for use unless you have already used it to create a design.

We now have our intuitive Design Editor 2.0 click here.

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.


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.


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


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.


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 on 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?