Designs determine how the products should be rendered visually. One Design can be used across multiple Content blocks.

These can be changed to match your webshops design.

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

HTML

The HTML code 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.

All Designs have can add new variables, like {{ title }} which can then be used to add additional text from a Content block.

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 is available in your Design.

Designing can be very easy, by simply copying the HTML of a product, replace any product-specific data with template variables, and copy any container-specific classes to the Design Container.

This should get you a long way.

Check out the below video for an example of how to do this (notice that it uses the old backend as an example, but the process is the same).

Did this answer your question?