Custom Liquid

Custom liquid lets you add Liquid/HTML to create custom content or embed app snippets/third-party code directly in your theme.

The section supports the following customization options:

• Make section full width: Enable to stretch the section across the full screen; disable to keep it within the theme’s normal container.

• Color scheme: Select a scheme to match your theme’s background and text styling.

• Liquid code: Paste Liquid/HTML or an app/third-party snippet to render custom content.

• Section padding: Adjust top/bottom spacing for desktop and mobile to keep the layout balanced.

This is the example code that we used to demo section:

{% comment %}
Business hours banner (Open/Closed) + show hours + email when closed
{% endcomment %}

{% assign open_hour = 9 %}
{% assign close_hour = 18 %}
{% assign contact_email = '[email protected]' %}

{% assign current_hour = 'now' | date: '%H' | plus: 0 %}
{% assign is_open = false %}
{% if current_hour >= open_hour and current_hour < close_hour %}
  {% assign is_open = true %}
{% endif %}

<div class="bh-card">
  <div class="bh-top">
    {% if is_open %}
      <div class="bh-badge bh-badge--open">● Open now</div>
    {% else %}
      <div class="bh-badge bh-badge--closed">● Closed</div>
    {% endif %}

    <div class="bh-hours">
      Business hours: <strong>{{ open_hour }}:00 – {{ close_hour }}:00</strong>
    </div>
  </div>

  {% if is_open %}
    <div class="bh-text">Chat support is available. Orders placed now will be processed today.</div>
  {% else %}
    <div class="bh-text">
      We’re currently offline. Please leave us a message via email:
      <a class="bh-email" href="mailto:{{ contact_email }}">{{ contact_email }}</a>
    </div>
  {% endif %}
</div>

<style>
  .bh-card{max-width:900px;margin:0 auto;border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:14px}
  .bh-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:6px}
  .bh-badge{font-weight:700}
  .bh-badge--open{color:#167a2e}
  .bh-badge--closed{color:#b3261e}
  .bh-hours{opacity:.8}
  .bh-text{opacity:.9}
  .bh-email{text-decoration:underline}
</style>