Since Clerk.js 2 uses the more flexible template language Liquid, you need to convert the Designs into this language.

1. Start by going to -> Recommendations / Search -> Designs and click New Design:

2. On the following screen, give your Design a Name (we recommend adding "V2" so its obvious that your are using Clerk.js2).

3. Choose Type: Website, Version: Clerk v2 and select a Prepared Design depending on whether you are creating a Search or Recommendations Design.

4. When you are done, click Create Design

5. Click Edit Code:

6. This will give you the HTML and CSS code that you can manually overwrite:

7. . Go back to Recommendations / Search -> Designs and click Edit Design for your old Clerk.js 1 Design.

8. Now you need to copy over the old Clerk.js 1 Design to your new Clerk.js 2 Design. You will notice that there is no Container Code in your new one. This is because Liquid uses for loops to render all the products. Copy your old Product HTML inside the for-loop, and you old Container Code around it:

9. Lastly, copy over your CSS as well:

10. Now you need to convert the Design into Liquids syntax. The main difference is that the old Designs used the syntax {{ formatter attribute }}  while v2's syntax is {% product.attribute | formatter %}. 

11. Go through all of your attributes and change them to the new format:

12. If you are using {{#if}} or {{#is} statements, these need to be converted as well, to the syntax  {% if product.attribute %} Do something {%else%} Do something else {% endif %}:

13. Now click Update Design to save the changes.

14. Lastly, go to Recommendations / Search -> Content and change your Content to use your new Design.

15. Click Update Content. This will temporarily cause them to not show up on your webshop, until you are done with Step 2. Choose the new Design for all Content that should be updated. 

Did this answer your question?