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": "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>