LIQUID AND HTML COMPATIBILITY

Code Compatibility: Before adding new snippets, please ensure that the code functions correctly and does not conflict with other elements on your page. Cohesive integration is key to maintaining the seamless performance of your website.

Complete Tags: If you're incorporating code from external sources, do remember to check for both opening and closing tags. This little step goes a long way in preventing any unexpected issues.

Consequences of Errant Code: It's important to note that incompatible or incomplete code can lead to disruptions across your theme. While we pride ourselves on the integrity of our themes, issues may arise when external code is introduced.

Our Commitment: Rest assured, if there are any glitches on our end, we are committed to resolving them with the utmost efficiency and care.

Your Part: We encourage you to thoroughly review and clean any code you plan to add to your website. This preemptive measure helps to keep your digital environment pristine and functioning as intended.

Broken Liquid Code Example:

{% for product in collections.frontpage.products %}
  <h2>{{ product.title
  <p>{{ product.description | without 'em' }}</p>
{% endfor

In this broken code snippet:

  • The opening <h2> tag is not properly closed.

  • The product.description filter syntax is incorrect.

  • The {% endfor %} closing tag is missing the %}.

Corrected Liquid Code Example:

{% for product in collections.frontpage.products %}
  <h2>{{ product.title }}</h2>
  <p>{{ product.description | remove: '<em>' | remove: '</em>' }}</p>
{% endfor %}

In the corrected snippet:

  • The <h2> tag is properly closed with </h2>.

  • The product.description is using the remove filter correctly to exclude <em> tags from the output.

  • The for loop is properly closed with {% endfor %}.

Using well-structured and valid code ensures that your site runs smoothly and other page elements are not affected by syntax errors.

Last updated