Liquid Template API Reference

{
  "name": "My Component",
  "version": "1.0.0",
  "description": "A reusable storefront component",
  "fields": {
    "title": {
      "type": "text",
      "label": "Section Title",
      "default": "Welcome"
    },
    "products": {
      "type": "products",
      "label": "Products"
    }
  }
}

<section class="py-12 px-4">
  <h2 class="text-2xl font-bold text-center mb-8">{{ title }}</h2>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-6xl mx-auto">
    {% for product in products %}
      <a href="/products/{{ product.slug }}" class="border rounded-lg overflow-hidden hover:shadow-md transition">
        {% if product.coverImage %}
          <img src="{{ product.coverImage }}" alt="{{ product.name }}" class="w-full aspect-square object-cover">
        {% endif %}
        <div class="p-3">
          <h3 class="text-sm font-medium line-clamp-2">{{ product.name }}</h3>
          <span class="text-sm font-bold mt-1 block">{{ shop.priceUnit }} {{ product.price }}</span>
        </div>
      </a>
    {% endfor %}
  </div>
</section>

{
  "name": "My Component",
  "version": "1.0.0",
  "description": "Your custom component",
  "fields": {
    "text": {
      "type": "string",
      "label": "Your Text",
      "value": "Welcome to our store",
      "placeholder": "Enter the text"
    }
  }
}

<h2>Your code goes here {{ text }}</h2>

<div class="flex items-center gap-4">
  {% for link in shop.socialMediaLinks %}
    <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer"
       class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:opacity-80">
      {{ link.title | capitalize }}
    </a>
  {% endfor %}
</div>

<div class="space-y-2">
  <h4 class="font-semibold text-sm">Quick Links</h4>
  {% for link in shop.footerQuickLinks %}
    <a href="{{ link.url }}" class="block text-sm text-gray-500 hover:text-gray-700">{{ link.title }}</a>
  {% endfor %}
</div>

{% for branch in shop.branches %}
  <div class="p-4 border rounded-lg">
    <div class="flex items-center gap-2">
      <strong>{{ branch.name }}</strong>
      {% if branch.isMainBranch %}<span class="text-[10px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">HQ</span>{% endif %}
    </div>
    <p class="text-sm text-gray-500 mt-1">{{ branch.location }}</p>
    {% if branch.googleMapLink %}
      <a href="{{ branch.googleMapLink }}" target="_blank" class="text-sm text-blue-500 mt-2 inline-block">Open in Maps &rarr;</a>
    {% endif %}
  </div>
{% endfor %}

{% if policyDesc %}
  <div class="prose max-w-3xl mx-auto py-12">
    {{ policyDesc }}
  </div>
{% else %}
  <p class="text-center text-gray-400 py-16">No policy has been set.</p>
{% endif %}

{%- comment -%}
  policyDesc matches the current policy route.
  Individual shop fields remain available:
  Available policy fields:
  - shop.privacyPolicy
  - shop.termsAndConditions
  - shop.returnPolicy
  - shop.refundPolicy
  - shop.about
{%- endcomment -%}

<div class="flex flex-wrap gap-2">
  {% for method in shop.paymentMethods %}
    <span class="px-3 py-1 bg-gray-100 text-xs rounded-full">{{ method }}</span>
  {% endfor %}
</div>

{
  "name": "Simple Header",
  "version": "1.0.0",
  "description": "Basic header with logo, search, and brand colors",
  "fields": {
    "showSearch": { "type": "boolean", "label": "Show Search Bar", "default": true },
    "announcementText": { "type": "text", "label": "Announcement Bar Text", "default": "" }
  }
}

{% if announcementText != blank %}
  <div class="text-center py-1.5 text-xs font-medium"
       style="background-color: {{ shop.brandColor }}; color: {{ shop.textOverBrandColor }};">
    {{ announcementText }}
  </div>
{% endif %}

<header class="border-b">
  <div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
    {% if shop.shopLogo %}
      <a href="/"><img src="{{ shop.shopLogo }}" alt="{{ shop.shopName }}" class="h-10 object-contain"></a>
    {% else %}
      <a href="/" class="text-xl font-bold" style="font-family: {{ shop.brandFont }};">{{ shop.shopName }}</a>
    {% endif %}

    {% if showSearch %}
      <div class="hidden md:block flex-1 max-w-md mx-8">
        <input type="text" placeholder="Search products..."
               class="w-full px-4 py-2 rounded-full bg-gray-100 text-sm outline-none">
      </div>
    {% endif %}

    <div class="flex items-center gap-3 text-sm">
      <a href="mailto:{{ shop.publicEmail }}" class="hidden md:block text-gray-600 hover:text-gray-900">Contact</a>
      <button onclick="window.openCart && window.openCart()"
              class="px-4 py-2 rounded-full text-sm font-medium"
              style="background: {{ shop.brandColor }}; color: {{ shop.textOverBrandColor }};">
        Cart
      </button>
    </div>
  </div>
</header>

{% if product.specifications.size > 0 %}
  <div class="mt-8">
    <h2 class="text-xl font-bold mb-4">{{ product.featuresSectionTitle | default: "Specifications" }}</h2>
    {% for spec in product.specifications %}
      <div class="mb-6">
        <h3 class="font-semibold text-sm mb-2 flex items-center gap-2">
          {% if spec.image %}<img src="{{ spec.image }}" class="w-5 h-5">{% endif %}
          {{ spec.specification }}
        </h3>
        <table class="w-full text-sm border-collapse">
          {% for row in spec.data %}
            <tr class="border-b">
              <td class="py-2 pr-4 font-medium text-gray-600 w-1/3">{{ row.title }}</td>
              <td class="py-2 text-gray-800">{{ row.value }}</td>
            </tr>
          {% endfor %}
        </table>
      </div>
    {% endfor %}
  </div>
{% endif %}

{% if product.extraFields.size > 0 %}
  <div class="space-y-3 mt-4">
    {% for field in product.extraFields %}
      <div>
        <label class="text-sm font-medium">
          {{ field.label }}{% if field.isRequired %}<span class="text-red-500"> *</span>{% endif %}
        </label>
        {% if field.fieldType == "textarea" %}
          <textarea placeholder="{{ field.placeholder }}" class="w-full mt-1 border rounded p-2 text-sm"></textarea>
        {% elsif field.fieldType == "imageUpload" %}
          <input type="file" accept="image/*" class="mt-1 text-sm">
        {% else %}
          <input type="text" placeholder="{{ field.placeholder }}" class="w-full mt-1 border rounded px-3 py-2 text-sm">
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}

{% if product.addOnProducts and product.addOnProducts.size > 0 %}
  <section data-zalient-product-add-ons class="mt-10">
    <h2 class="text-xl font-bold mb-4">Add-ons</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      {% for addOn in product.addOnProducts %}
        <a href="/products/{{ addOn.slug }}" class="block rounded-lg border overflow-hidden hover:shadow-md transition">
          {% if addOn.coverImage %}
            <img src="{{ addOn.coverImage }}" alt="{{ addOn.name }}" class="w-full aspect-square object-cover" loading="lazy">
          {% endif %}
          <div class="p-3">
            <h3 class="text-sm font-medium line-clamp-2">{{ addOn.name }}</h3>
            <div class="flex items-baseline gap-2 mt-1">
              <span class="font-semibold">{{ shop.priceUnit }} {{ addOn.price }}</span>
              {% if addOn.compareAtPrice and addOn.compareAtPrice > addOn.price %}
                <span class="text-xs text-gray-400 line-through">{{ shop.priceUnit }} {{ addOn.compareAtPrice }}</span>
              {% endif %}
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
  </section>
{% endif %}

{% if product.features.size > 0 %}
  <div class="flex flex-wrap gap-4 mt-4">
    {% for feature in product.features %}
      <div class="flex items-center gap-2 text-sm text-gray-600">
        {% if feature.image %}<img src="{{ feature.image }}" class="w-5 h-5">{% endif %}
        <span>{{ feature.title }}</span>
      </div>
    {% endfor %}
  </div>
{% endif %}

{
  "name": "Flexible Section",
  "version": "1.0.0",
  "fields": {
    "showBrands": { "type": "boolean", "label": "Show Brands", "default": false },
    "brands": {
      "type": "api",
      "apiType": "brands",
      "label": "Brands",
      "condition": { "field": "showBrands", "value": true }
    },
    "showFaqs": { "type": "boolean", "label": "Show FAQs", "default": false },
    "faqs": {
      "type": "api",
      "apiType": "faqs",
      "condition": { "field": "showFaqs", "value": true }
    }
  }
}

{% if showBrands and brands %}
  <h2>Our Brands</h2>
  <div class="flex flex-wrap gap-4">
    {% for brand in brands.brands %}<span class="px-3 py-1 border rounded">{{ brand.name }}</span>{% endfor %}
  </div>
{% endif %}

{% if showFaqs and faqs %}
  <h2 class="mt-8">FAQs</h2>
  {% for faq in faqs %}<details class="border-b py-3"><summary class="cursor-pointer font-medium">{{ faq.question }}</summary><p class="mt-2 text-sm text-gray-600">{{ faq.answer }}</p></details>{% endfor %}
{% endif %}

{
  "name": "Testimonials",
  "version": "1.0.0",
  "fields": {
    "testimonials": {
      "type": "array_object",
      "label": "Testimonials",
      "fields": {
        "name": { "type": "string", "label": "Name", "placeholder": "Customer name" },
        "quote": { "type": "textarea", "label": "Quote" },
        "avatar": { "type": "image", "label": "Photo" },
        "rating": { "type": "number", "label": "Stars (1-5)", "default": 5 }
      },
      "value": [
        { "name": "John Doe", "quote": "Amazing product!", "avatar": "", "rating": 5 }
      ]
    }
  }
}

<div class="grid md:grid-cols-3 gap-6">
  {% for t in testimonials %}
    <div class="border rounded-lg p-6 text-center">
      {% if t.avatar %}<img src="{{ t.avatar }}" class="w-16 h-16 rounded-full mx-auto mb-3 object-cover">{% endif %}
      <p class="text-sm italic text-gray-600">&ldquo;{{ t.quote }}&rdquo;</p>
      <p class="font-semibold text-sm mt-3">{{ t.name }}</p>
      <div class="text-yellow-500 text-sm mt-1">{% for i in (1..5) %}{% if i <= t.rating %}&#9733;{% else %}&#9734;{% endif %}{% endfor %}</div>
    </div>
  {% endfor %}
</div>

{
  "fields": {
    "layout": {
      "type": "option",
      "label": "Layout Style",
      "default": "grid",
      "options": [
        { "label": "Grid", "value": "grid" },
        { "label": "List", "value": "list" },
        { "label": "Carousel", "value": "carousel" }
      ]
    },
    "theme": {
      "type": "tabs",
      "label": "Theme",
      "default": "light",
      "options": [
        { "label": "Light", "value": "light" },
        { "label": "Dark", "value": "dark" }
      ]
    }
  }
}

{% if layout == "grid" %}
  <div class="grid grid-cols-4 gap-4">...</div>
{% elsif layout == "list" %}
  <div class="space-y-4">...</div>
{% elsif layout == "carousel" %}
  <div class="flex overflow-x-auto gap-4">...</div>
{% endif %}

<section class="{% if theme == 'dark' %}bg-gray-900 text-white{% else %}bg-white text-gray-900{% endif %} py-8">
  ...
</section>

{%- comment -%} Output {%- endcomment -%}
{{ shop.shopName }}
{{ product.price }}
{{ title | default: "Untitled" }}

{%- comment -%} String filters {%- endcomment -%}
{{ "hello" | upcase }}                       => HELLO
{{ "HELLO" | downcase }}                     => hello
{{ "hello world" | capitalize }}             => Hello world
{{ "Hello World" | truncate: 10 }}           => Hello W...
{{ "Hello World" | truncatewords: 1 }}       => Hello...
{{ product.name | slice: 0, 1 | upcase }}    => first letter uppercase
{{ product.description | strip_html }}       => plain text
{{ "  hello  " | strip }}                    => "hello"
{{ "hello-world" | split: "-" }}             => ["hello", "world"]
{{ "hello" | prepend: "say " }}              => "say hello"
{{ "hello" | append: " world" }}             => "hello world"
{{ "hello" | replace: "hello", "hi" }}       => "hi"

{%- comment -%} Number filters {%- endcomment -%}
{{ 4.56 | round }}                           => 5
{{ 4.56 | round: 1 }}                        => 4.6
{{ 100 | plus: 13 }}                         => 113
{{ 100 | minus: 13 }}                        => 87
{{ 10 | times: 1.13 }}                       => 11.3
{{ 100 | divided_by: 3 }}                    => 33
{{ 100 | modulo: 3 }}                        => 1

{%- comment -%} Array filters {%- endcomment -%}
{{ products | size }}                        => count
{{ products | first }}                       => first item
{{ products | last }}                        => last item
{{ tags | join: ", " }}                      => "tag1, tag2"
{{ tags | sort }}                            => alphabetical
{{ tags | uniq }}                            => deduplicated
{{ tags | reverse }}                         => reversed
{{ products | where: "freeDelivery", true }} => filter array

{%- comment -%} Date filters {%- endcomment -%}
{{ product.createdAt | date: "%B %d, %Y" }}  => "January 15, 2026"
{{ "now" | date: "%Y" }}                     => current year

{%- comment -%} if / elsif / else {%- endcomment -%}
{% if product.compareAtPrice and product.compareAtPrice > product.price %}
  <span class="badge-sale">On Sale!</span>
{% elsif product.freeDelivery %}
  <span class="badge-free">Free Delivery</span>
{% else %}
  <span>{{ shop.priceUnit }} {{ product.price }}</span>
{% endif %}

{%- comment -%} unless (negation of if) {%- endcomment -%}
{% unless product.quantity == 0 %}
  <button>Add to Cart</button>
{% endunless %}

{%- comment -%} case / when {%- endcomment -%}
{% case order.status %}
  {% when "delivered" %}<span class="text-green-600">Delivered</span>
  {% when "canceled" %}<span class="text-red-600">Canceled</span>
  {% else %}<span class="text-blue-600">{{ order.status | capitalize }}</span>
{% endcase %}

{%- comment -%} Operators: ==  !=  >  <  >=  <=  or  and  contains {%- endcomment -%}
{% if product.tags contains "new" %}
  <span class="badge">New Arrival</span>
{% endif %}

{%- comment -%} Blank check (nil, empty string, empty array) {%- endcomment -%}
{% if shop.shopLogo != blank %}
  <img src="{{ shop.shopLogo }}" alt="{{ shop.shopName }}">
{% endif %}

{% unless description == blank %}
  <div class="prose">{{ description }}</div>
{% endunless %}

{%- comment -%} Basic {%- endcomment -%}
{% for product in products %}
  <div>{{ product.name }}</div>
{% endfor %}

{%- comment -%} With limit and offset {%- endcomment -%}
{% for product in products limit: 4 %}...{% endfor %}
{% for product in products limit: 4 offset: 4 %}...{% endfor %}

{%- comment -%} Loop variables {%- endcomment -%}
{% for product in products %}
  {{ forloop.index }}      => 1, 2, 3, ...
  {{ forloop.index0 }}     => 0, 1, 2, ...
  {{ forloop.first }}      => true on first
  {{ forloop.last }}       => true on last
  {{ forloop.length }}     => total count
  {{ forloop.rindex }}     => reverse: 3, 2, 1
{% endfor %}

{%- comment -%} Empty fallback (else) {%- endcomment -%}
{% for product in products %}
  <div>{{ product.name }}</div>
{% else %}
  <p>No products found.</p>
{% endfor %}

{%- comment -%} Range loop {%- endcomment -%}
{% for i in (1..5) %}
  <span>Star {{ i }}</span>
{% endfor %}

{%- comment -%} break and continue {%- endcomment -%}
{% for product in products %}
  {% if product.quantity == 0 %}{% continue %}{% endif %}
  {% if forloop.index > 10 %}{% break %}{% endif %}
  <div>{{ product.name }}</div>
{% endfor %}

{%- comment -%} Render product card, passing product variable {%- endcomment -%}
{% render 'product-card', product: product %}

{%- comment -%} Inside a loop {%- endcomment -%}
{% for product in products %}
  {% render 'product-card', product: product %}
{% endfor %}

{%- comment -%} Render layout partials {%- endcomment -%}
{% render 'header' %}
{% render 'footer' %}

{%- comment -%} Pass multiple variables {%- endcomment -%}
{% render 'promo-badge', text: "SALE", color: "#ff0000" %}

{%- comment -%} Assign a variable {%- endcomment -%}
{% assign discountPercent = product.compareAtPrice | minus: product.price | times: 100 | divided_by: product.compareAtPrice %}
<span>{{ discountPercent }}% off</span>

{%- comment -%} Assign with default {%- endcomment -%}
{% assign heroTitle = title | default: "Welcome to " | append: shop.shopName %}

{%- comment -%} Capture multi-line content into a variable {%- endcomment -%}
{% capture priceHtml %}
  <span class="font-bold">{{ shop.priceUnit }} {{ product.price }}</span>
  {% if product.compareAtPrice > product.price %}
    <span class="line-through text-gray-400 text-sm">{{ shop.priceUnit }} {{ product.compareAtPrice }}</span>
  {% endif %}
{% endcapture %}

{%- comment -%} Use it later {%- endcomment -%}
<div class="price-display">{{ priceHtml }}</div>

{%- comment -%} Increment / Decrement (independent counters) {%- endcomment -%}
{% increment myCounter %} => 0
{% increment myCounter %} => 1
{% increment myCounter %} => 2

{%- comment -%} Without whitespace control: adds blank lines {%- endcomment -%}
{% if product.freeDelivery %}
  Free Delivery
{% endif %}

{%- comment -%} With whitespace control: clean output {%- endcomment -%}
{%- if product.freeDelivery -%}
  Free Delivery
{%- endif -%}

{%- comment -%} Raw: escape all Liquid syntax {%- endcomment -%}
{% raw %}
  This {{ will not }} be parsed. Useful for showing Liquid code examples.
{% endraw %}

{%- comment -%} Comments are invisible in output {%- endcomment -%}
{% comment %}
  This entire block is hidden from the rendered HTML.
  Use it for notes, TODOs, or documentation.
{% endcomment %}

{
  "name": "Custom Login",
  "version": "1.0.0",
  "description": "Sign-in form for the /login page",
  "fields": {
    "title": {
      "type": "text",
      "label": "Heading",
      "default": "Sign in"
    }
  }
}

<section data-login class="max-w-sm mx-auto px-4 py-16">
  <h1 class="text-2xl font-bold">{{ title | default: "Sign in" }}</h1>
  <p data-login-error class="hidden mt-3 text-sm text-red-600"></p>

  <!-- Step 1: how to sign in -->
  <form data-login-step="start" class="mt-6 space-y-3">
    {% if shop.emailLoginEnabled %}
      <input name="email" type="email" required autocomplete="email"
        placeholder="[email protected]" class="w-full border rounded-lg px-3 py-2.5" />
      <button type="submit" class="w-full rounded-lg py-2.5 font-medium"
        style="background: {{ shop.brandColor }}; color: {{ shop.textOverBrandColor }};">
        Email me a code
      </button>
    {% endif %}
    {% if shop.googleLoginEnabled %}
      <button type="button" data-login-google class="w-full border rounded-lg py-2.5 font-medium">
        Continue with Google
      </button>
    {% endif %}
    {% if shop.guestCheckoutAllowed %}
      <button type="button" data-login-guest class="hidden w-full text-sm underline">
        Continue as guest
      </button>
    {% endif %}
  </form>

  <!-- Step 2: the code from the email -->
  <form data-login-step="code" class="hidden mt-6 space-y-3">
    <p class="text-sm">Enter the 6-digit code we sent to <strong data-login-sent-to></strong>.</p>
    <input name="code" required inputmode="numeric" autocomplete="one-time-code"
      maxlength="6" placeholder="123456" class="w-full border rounded-lg px-3 py-2.5 tracking-widest" />
    <button type="submit" class="w-full rounded-lg py-2.5 font-medium"
      style="background: {{ shop.brandColor }}; color: {{ shop.textOverBrandColor }};">
      Verify
    </button>
    <button type="button" data-login-back class="w-full text-sm underline">Use a different email</button>
  </form>

  <!-- Step 3: first visit only - the customer's name -->
  <form data-login-step="name" class="hidden mt-6 space-y-3">
    <p class="text-sm">Welcome! What should we call you?</p>
    <input name="fullName" required maxlength="255" autocomplete="name"
      placeholder="Your name" class="w-full border rounded-lg px-3 py-2.5" />
    <button type="submit" class="w-full rounded-lg py-2.5 font-medium"
      style="background: {{ shop.brandColor }}; color: {{ shop.textOverBrandColor }};">
      Create account
    </button>
  </form>

  <!-- Signed in: the storefront takes over from here -->
  <p data-login-step="done" class="hidden mt-6 text-sm">Signing you in...</p>
</section>

<script>
(function () {
  var root = document.querySelector("[data-login]");
  // A component's script can run more than once: wire each page once.
  if (!root || root.getAttribute("data-login-wired")) return;
  root.setAttribute("data-login-wired", "1");

  var errorEl = root.querySelector("[data-login-error]");
  var startForm = root.querySelector('[data-login-step="start"]');
  var codeForm = root.querySelector('[data-login-step="code"]');
  var nameForm = root.querySelector('[data-login-step="name"]');
  var tempToken = "";

  function fail(message) {
    errorEl.textContent = message || "";
    errorEl.classList.toggle("hidden", !message);
  }

  function show(step) {
    var steps = root.querySelectorAll("[data-login-step]");
    for (var i = 0; i < steps.length; i++) {
      steps[i].classList.toggle("hidden", steps[i].getAttribute("data-login-step") !== step);
    }
    fail("");
  }

  // Make one sign-in call: lock the button, show the error if it fails.
  function run(form, name, args) {
    var button = form.querySelector('[type="submit"]');
    if (typeof window[name] !== "function") {
      fail("Sign-in is not available on this page.");
      return Promise.resolve({ ok: false });
    }
    if (button) button.disabled = true;
    fail("");
    return window[name]
      .apply(window, args)
      .catch(function () {
        return { ok: false, message: "Could not reach the shop. Check your connection and try again." };
      })
      .then(function (result) {
        if (button) button.disabled = false;
        if (!result.ok) fail(result.message);
        return result;
      });
  }

  // 1. Send the code.
  startForm.addEventListener("submit", function (event) {
    event.preventDefault();
    var email = startForm.elements.email.value.trim();
    run(startForm, "loginWithEmail", [email]).then(function (result) {
      if (!result.ok) return;
      root.querySelector("[data-login-sent-to]").textContent = email;
      show("code");
      codeForm.elements.code.focus();
    });
  });

  // 2. Check the code. It belongs to the email passed to loginWithEmail above.
  codeForm.addEventListener("submit", function (event) {
    event.preventDefault();
    var code = codeForm.elements.code.value.trim();
    run(codeForm, "verifyOtp", [code]).then(function (result) {
      if (!result.ok) return;
      if (result.data.needsRegistration) {
        tempToken = result.data.tempToken; // first visit: ask for a name next
        show("name");
        nameForm.elements.fullName.focus();
      } else {
        show("done"); // signed in - nothing else to do
      }
    });
  });

  // 3. First visit only: create the account.
  nameForm.addEventListener("submit", function (event) {
    event.preventDefault();
    var fullName = nameForm.elements.fullName.value.trim();
    run(nameForm, "registerShopUser", [tempToken, fullName]).then(function (result) {
      if (result.ok) show("done");
    });
  });

  root.querySelector("[data-login-back]").addEventListener("click", function () {
    codeForm.reset();
    show("start");
  });

  // Google: leaves the page and comes back signed in.
  var google = root.querySelector("[data-login-google]");
  if (google) {
    google.addEventListener("click", function () {
      run(startForm, "LoginWithGoogle", []);
    });
  }

  // Guest checkout exists only inside the checkout.
  var guest = root.querySelector("[data-login-guest]");
  if (guest && window.location.pathname.indexOf("/checkout") === 0) {
    guest.classList.remove("hidden");
    guest.addEventListener("click", function () {
      if (typeof window.continueCheckoutAsGuest === "function") window.continueCheckoutAsGuest();
    });
  }
})();
</script>

<a data-account-link href="/login">Sign in</a>

<script>
(function () {
  var link = document.querySelector("[data-account-link]");
  if (!link || typeof window.getMyProfile !== "function") return;
  window.getMyProfile().then(function (profile) {
    if (!profile) return;                    // signed out: keep "Sign in"
    link.href = "/account";
    link.textContent = "Hi, " + profile.fullName;
  }).catch(function () {});                  // could not load: keep "Sign in"
})();
</script>

<button data-add
  data-id="{{ product._id }}" data-name="{{ product.name | escape }}"
  data-price="{{ product.price }}" data-image="{{ product.coverImage }}">
  Add to cart
</button>

<script>
(function () {
  var buttons = document.querySelectorAll("[data-add]:not([data-add-wired])");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].setAttribute("data-add-wired", "1");
    buttons[i].addEventListener("click", function () {
      if (typeof window.addToCart !== "function") return;
      window.addToCart(this.dataset.id, this.dataset.name, Number(this.dataset.price), this.dataset.image, 1);
    });
  }
})();
</script>

<span data-cart-badge>0</span>

<script>
(function () {
  var badge = document.querySelector("[data-cart-badge]");
  if (!badge || badge.getAttribute("data-wired")) return;
  badge.setAttribute("data-wired", "1");
  if (typeof window.getCartCount === "function") badge.textContent = window.getCartCount();
  window.addEventListener("cart:updated", function (event) {
    badge.textContent = event.detail.totalItems;
  });
})();
</script>

{
  "name": "Awesome Mega Menu",
  "version": "v1.0.5",
  "description": "Full mega menu header with search, cart, categories",
  "fields": {
    "topNotice": {
      "type": "string",
      "label": "Top Notice Bar Text",
      "value": "Welcome to our store",
      "placeholder": "Enter announcement text (leave empty to hide)"
    },
    "categoryMenu": {
      "type": "categories-expanded",
      "label": "Category Navigation",
      "value": []
    },
    "slidingTexts": {
      "type": "array_object",
      "label": "Feature Slides",
      "fields": {
        "text": { "type": "string", "label": "Title", "placeholder": "Enter the title" },
        "icon": { "type": "icon", "label": "Icon", "placeholder": "Select an icon" }
      },
      "value": [
        { "text": "Genuine Products", "icon": "/assets/icons/iconsax/bold/24-support.svg" },
        { "text": "Free Delivery", "icon": "/assets/icons/iconsax/bold/24-support.svg" },
        { "text": "24/7 Live Chat", "icon": "/assets/icons/iconsax/bold/24-support.svg" }
      ]
    }
  }
}

<style>
  .mega-cat-btn.active-cat {
    background: var(--brand-color, #2563eb) !important;
    color: var(--brand-text-color, #fff) !important;
  }
</style>

<!-- Inject brand color as CSS variable -->
<div style="display:none;" id="headerBrandVars"
  data-brand-color="{{ shop.brandColor | default: '#2563eb' }}"
  data-brand-text="{{ shop.textOverBrandColor | default: '#ffffff' }}">
</div>
<script>
(function(){
  var v = document.getElementById('headerBrandVars');
  if (!v) return;
  document.documentElement.style.setProperty('--brand-color', v.dataset.brandColor);
  document.documentElement.style.setProperty('--brand-text-color', v.dataset.brandText);
})();
</script>

{% if topNotice != blank %}
<div class="text-xs font-medium py-1.5 text-center"
     style="background:var(--brand-color);color:var(--brand-text-color);">
  {{ topNotice }}
</div>
{% endif %}

<nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b">
  <div class="max-w-7xl mx-auto flex items-center justify-between px-4">
    <!-- Logo -->
    <a href="/">
      {% if shop.shopLogo %}
        <img src="{{ shop.shopLogo }}" alt="{{ shop.shopName }}" class="py-4 max-h-[84px] object-contain">
      {% endif %}
    </a>

    <!-- Feature slides -->
    {% if slidingTexts.size > 0 %}
    <div class="hidden lg:block w-[250px] overflow-hidden rounded-lg py-3"
         style="background:color-mix(in srgb,var(--brand-color) 5%,transparent);">
      <div id="featureSlider" class="flex transition-transform duration-500">
        {% for slide in slidingTexts %}
        <div class="w-full shrink-0 flex items-center justify-center gap-2 text-sm">
          {% if slide.icon %}
            <span class="w-6 h-6 inline-block"
                  style="background:var(--brand-color);
                         -webkit-mask-image:url({{ slide.icon }});mask-image:url({{ slide.icon }});
                         -webkit-mask-size:contain;mask-size:contain;"></span>
          {% endif %}
          <span>{{ slide.text }}</span>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- Cart button -->
    <button onclick="window.openCart && window.openCart()"
            class="px-4 py-2 rounded-full text-sm font-semibold"
            style="background:var(--brand-color);color:var(--brand-text-color);">
      Cart <span id="cartBadge">0</span>
    </button>
  </div>

  <!-- Category bar with mega menu -->
  <div class="border-t">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex items-center gap-6 h-11 text-[13px]">
        <a href="/">Home</a>
        {% for cat in categoryMenu %}
          <a href="/categories/{{ cat.slug }}"
             onmouseenter="handleCategoryHover('{{ cat.slug }}')">{{ cat.name }}</a>
        {% endfor %}
      </div>

      <!-- Mega menu dropdown (hidden by default) -->
      <div id="megaMenuDropdown" style="display:none;" class="absolute bg-white shadow-2xl rounded-xl">
        {% for cat in categoryMenu %}
          <div class="mega-subcontent" data-cat="{{ cat.slug }}" style="display:none;">
            {% if cat.subcategories.size > 0 %}
              {% for sub in cat.subcategories %}
                {% if sub.products.size > 0 %}
                  <h3>{{ sub.name }}</h3>
                  {% for product in sub.products limit:5 %}
                    <a href="/products/{{ product.slug }}">
                      <img src="{{ product.coverImage }}" alt="{{ product.name }}" loading="lazy">
                      <p>{{ product.name }}</p>
                    </a>
                  {% endfor %}
                {% endif %}
              {% endfor %}
            {% elsif cat.products.size > 0 %}
              {% for product in cat.products limit:5 %}
                <a href="/products/{{ product.slug }}">
                  <img src="{{ product.coverImage }}" alt="{{ product.name }}" loading="lazy">
                  <p>{{ product.name }}</p>
                </a>
              {% endfor %}
            {% else %}
              <p>No products found</p>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</nav>

{
  "name": "Store Footer",
  "version": "1.0.0",
  "fields": {
    "copyrightText": { "type": "text", "label": "Copyright Text", "default": "All rights reserved." },
    "showNewsletter": { "type": "boolean", "label": "Show Newsletter", "default": true }
  }
}

<footer class="bg-gray-900 text-white py-12 px-4">
  <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-8">
    <!-- Brand -->
    <div>
      {% if shop.footerLogo %}<img src="{{ shop.footerLogo }}" alt="{{ shop.shopName }}" class="h-10 mb-4">
      {% else %}<h3 class="text-lg font-bold mb-4">{{ shop.shopName }}</h3>{% endif %}
      <p class="text-sm text-gray-400">{{ shop.shopDescription | truncate: 120 }}</p>
    </div>

    <!-- Quick Links -->
    {% if shop.footerQuickLinks.size > 0 %}
    <div>
      <h4 class="font-semibold mb-4">Quick Links</h4>
      {% for link in shop.footerQuickLinks %}
        <a href="{{ link.url }}" class="block text-sm text-gray-400 hover:text-white py-1">{{ link.title }}</a>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Contact -->
    <div>
      <h4 class="font-semibold mb-4">Contact</h4>
      {% if shop.publicEmail != blank %}<p class="text-sm text-gray-400">{{ shop.publicEmail }}</p>{% endif %}
      {% if shop.publicContactNumber != blank %}<p class="text-sm text-gray-400">{{ shop.publicContactNumber }}</p>{% endif %}
      {% if shop.location != blank %}<p class="text-sm text-gray-400 mt-2">{{ shop.location }}</p>{% endif %}
    </div>

    <!-- Social + Newsletter -->
    <div>
      {% if shop.socialMediaLinks.size > 0 %}
        <h4 class="font-semibold mb-4">Follow Us</h4>
        <div class="flex gap-3">
          {% for link in shop.socialMediaLinks %}
            <a href="{{ link.url }}" target="_blank" class="w-9 h-9 rounded-full bg-gray-800 flex items-center justify-center text-xs hover:bg-gray-700">
              {{ link.title | slice: 0, 2 | upcase }}
            </a>
          {% endfor %}
        </div>
      {% endif %}
      {% if showNewsletter %}
        <div class="mt-6">
          <p class="text-sm text-gray-400 mb-2">Subscribe to our newsletter</p>
          <div class="flex"><input type="email" placeholder="Email" class="flex-1 px-3 py-2 rounded-l bg-gray-800 text-sm outline-none"><button class="px-4 py-2 rounded-r text-sm font-medium" style="background:{{ shop.brandColor }};color:{{ shop.textOverBrandColor }};">Subscribe</button></div>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Bottom bar -->
  <div class="max-w-6xl mx-auto border-t border-gray-800 mt-8 pt-6 flex flex-wrap items-center justify-between gap-4">
    <p class="text-xs text-gray-500">&copy; {{ "now" | date: "%Y" }} {{ shop.shopName }}. {{ copyrightText }}</p>
    <div class="flex gap-2">
      {% for method in shop.paymentMethods %}<span class="text-xs bg-gray-800 px-2 py-1 rounded text-gray-400">{{ method }}</span>{% endfor %}
    </div>
    {% if shop.panVatNumber %}<p class="text-xs text-gray-600">PAN/VAT: {{ shop.panVatNumber }}</p>{% endif %}
  </div>
</footer>

{
  "name": "Product Card",
  "version": "1.0.0",
  "description": "Reusable product card block",
  "fields": {}
}

<a href="/products/{{ product.slug }}" class="group block border rounded-lg overflow-hidden hover:shadow-md transition"
   style="border-radius: {{ borderRadius | default: '8px' }};">
  <div class="aspect-square bg-gray-50 overflow-hidden" style="border-radius: {{ imageRounding | default: '0' }};">
    {% if product.coverImage %}
      <img src="{{ product.coverImage }}" alt="{{ product.name }}"
           class="w-full h-full object-cover {% if hoverEffect == 'scale' %}group-hover:scale-105{% endif %} transition-transform duration-300"
           loading="lazy">
    {% else %}
      <div class="w-full h-full flex items-center justify-center text-gray-300 text-2xl font-bold">
        {{ product.name | slice: 0, 1 | upcase }}
      </div>
    {% endif %}
  </div>

  <div style="padding: {{ cardPadding | default: '12px' }};">
    <h3 style="font-size: {{ titleSize | default: '14px' }};" class="font-medium line-clamp-2 text-gray-800 group-hover:text-gray-900">
      {{ product.name }}
    </h3>

    <div class="flex items-center gap-2 mt-1.5">
      {% if product.compareAtPrice and product.compareAtPrice > product.price %}
        <span class="text-xs line-through text-gray-400">{{ shop.priceUnit }} {{ product.compareAtPrice }}</span>
      {% endif %}
      <span class="font-bold text-sm" style="color: {{ shop.brandColor }};">{{ shop.priceUnit }} {{ product.price }}</span>
    </div>

    {% if product.avgReviews > 0 %}
      <div class="text-xs text-yellow-500 mt-1">
        {% for i in (1..5) %}{% if i <= product.avgReviews %}&#9733;{% else %}&#9734;{% endif %}{% endfor %}
        <span class="text-gray-400 ml-1">({{ product.reviewsCount }})</span>
      </div>
    {% endif %}

    {% if product.quantity == 0 and product.unlimitedStock == false %}
      <span class="text-[10px] text-red-500 mt-1 block">Out of Stock</span>
    {% elsif product.freeDelivery %}
      <span class="text-[10px] text-green-600 mt-1 block">Free Delivery</span>
    {% endif %}

    {% if showAddToCart %}
      <button class="{{ buttonStyle | default: '' }} mt-3 w-full py-2 rounded text-sm font-medium transition-colors"
              style="background: {{ shop.brandColor }}; color: {{ shop.textOverBrandColor }};">
        Add to Cart
      </button>
    {% endif %}
  </div>
</a>