Liquid

Cryptr's documented liquid guide to understanding and customizing your theme. Discover a set of variables to script your login pages

You can customize login pages with a liquid page template. This page template is used to define the displayed content.

What is Liquid?

Liquid is an open-source template language created by Shopify and written in Ruby that allows you to dynamically insert data. Liquid files have the extension of .liquid

note

To know more about liquid, we advise you to read the documentation:
https://liquidjs.com/tutorials/intro-to-liquid.html

Variables

Liquid variables are used in theme pages. These variables includes text, URLs and images

One can also use filters to display additional content around the widget. Cryptr used it minimally to display an optional description

<div class="content">
  <div>
    <img class="logo" src="{{ site.logo_url | asset_url }}" alt="{{ site.logo_alt_url }}">
    <h1>
      {{ site.title }}
    </h1>
    {% if site.description != nil %}
      <p>
        {{ site.description }}
      </p>
    {% endif %}
  </div>
  <!-- Widget -->
  {{cryptr:widget}}
  <a class="badge" href="https://www.cryptr.co/" target="_blank">
    <img class="cryptr-badge" src="https://res.cloudinary.com/cryptr/image/upload/v1679479961/Glitch/badge_secured_by_cryptr_color_rvx271.svg">
  </a>
</div>

📄️ Widget Variables

Take advantage of widget context variables to change the form rendering of your login page and dependizng on the login step

📄️ Global Variables

Leverage global contextual variables to customize your login pages around the widget according to the login step

Liquid basics

Liquid is used to dynamically display data. To display the content, you add tags around the variable name. You can also customize the logic with filters

• To define the logic, you must use braces percent {% %}
• Data is stored in a variable such as title, it is displayed between double braces {{ }}. They are contained in a related site object

Code

<h1>
  {{ site.title }}
</h1>
{% if site.description != nil %}
  <p>
    {{ site.description }}
  </p>
{% endif %}

Output

<h1>
  Ouvrez votre <span>boîte email</span>
</h1>
<p>
  ... et cliquez sur le lien de connexion
</p>

Scope

Some variables are globally accessible (outside the widget), so they can be modified and positioned as desired. Refer to the template variables guide for the list of available variables.

The variables contained in the widget are editable but cannot be moved.