Video outline

As a general introduction, comments are a way to make our code tidier and more readable, not only for us but for other programmers or users Even though they are not mandatory, they are good practice, especially when your code gets long and difficult to follow.

There are 3 types of comments: block comment tags, input and non-input and warning text and infotext. The first type is only visible in the liquid text editor to provide information to coders whilst the other 2 types provide information to the external user of our template.

Block comments are used to give guidance to the programmer reading our code or simply to remind ourselves what we were intending to do when we first coded our template.
These comments are used to help the developer understanding our code better and identifying bugs faster. These tags can also be used when a piece of code needs to be disabled temporarily.

Input and non-input tags allow us to show/hide part of code in input or preview/export mode respectively.

Infotext & Warningtext provide us with a way to give instructions or warnings to the user in our template

We normally enclose them within {% ic %} tags since most of the times they are not relevant in export
The attribute ‘hover’ can be used in both of them to create a tooltip, displaying the text only when hovering over the icon. Both tags need to be opened and closed with the desired text written in between

In conclusion, writing comments help others understanding your code and can serve as a tool to show/hide specific pieces of code in input/export with ic and nic tags.

Infotext and Warningtext provide us with a tool to give additional information to our users