Liquid Customizations & Theme Variables

Angle stores loyalty data inside Shopify's native systems — store credit, customer tags, and customer metafields. This means you can access all of it in your theme's Liquid templates without any custom API calls or third-party scripts.

This guide covers every Liquid variable and pattern available for surfacing Angle loyalty data in your Shopify theme.

---

Store Credit Balance

Shopify exposes the customer's store credit account directly in Liquid through the customer.store_credit_account object.

Available Properties

Displaying the Balance

{% if customer and customer.store_credit_account %}
  <p>Your store credit balance: {{ customer.store_credit_account.balance | money }}</p>
{% endif %}

Important Notes

• The balance property returns the amount in the currency's subunit (cents for USD). Always use the | money filter to format it correctly.
• The account returned matches the customer's current currency context. If a customer is browsing your US market, their USD store credit account is returned. If they don't have a USD account, nil is returned.
• For currencies without subunits (JPY, KRW), the raw value includes tenths and hundredths — the | money filter handles this automatically.
• The customer object is only available when a customer is logged in. Always wrap store credit references in a {% if customer %} check.

Balance in a Banner

{% if customer and customer.store_credit_account and customer.store_credit_account.balance > 0 %}
  <div class="loyalty-banner">
    <p>You have {{ customer.store_credit_account.balance | money }} in store credit — it's applied automatically at checkout.</p>
  </div>
{% endif %}

---

Customer Tags (Tier Identification)

Angle auto-generates a customer tag for each tier in the format MembershipName:TierName. These tags are standard Shopify customer tags and are fully accessible in Liquid via customer.tags.

How Tier Tags Work

When a customer is placed into a tier, Angle adds the corresponding tag to their Shopify profile. Examples:

These tags are immutable once created — the format is set when the tier is first saved.

Checking Tier Membership

{% if customer and customer.tags contains 'Pack Perks:Gold' %}
  <p>Welcome back, Gold member!</p>
{% endif %}

Displaying Tier-Specific Content

{% if customer %}
  {% if customer.tags contains 'Pack Perks:Platinum' %}
    <div class="tier-banner tier-platinum">
      <h3>Platinum Member</h3>
      <p>You earn 10% cashback on every order and enjoy free shipping.</p>
    </div>
  {% elsif customer.tags contains 'Pack Perks:Gold' %}
    <div class="tier-banner tier-gold">
      <h3>Gold Member</h3>
      <p>You earn 7% cashback on every order.</p>
    </div>
  {% elsif customer.tags contains 'Pack Perks:Silver' %}
    <div class="tier-banner tier-silver">
      <h3>Silver Member</h3>
      <p>You earn 5% cashback on every order.</p>
    </div>
  {% else %}
    <div class="tier-banner tier-default">
      <p>Join our loyalty program and start earning store credit on every purchase.</p>
    </div>
  {% endif %}
{% endif %}

Conditional Product Access

Use tier tags to show or hide content based on membership level — exclusive products, early access messaging, or member-only pricing information.

{% if customer and customer.tags contains 'The Oak Society:The Cellar' %}
  <button class="add-to-cart">Add to Cart — Member Exclusive</button>
{% else %}
  <p class="members-only-notice">This product is available exclusively to Cellar Society members.</p>
{% endif %}

Showing Tier-Specific Benefits

{% if customer %}
  <div class="member-benefits">
    <h3>Your Member Benefits</h3>
    <ul>
      {% if customer.tags contains 'Pack Perks:Platinum' %}
        <li>10% cashback on every order</li>
        <li>Free shipping on all orders</li>
        <li>Early access to new releases</li>
        <li>Exclusive member events</li>
      {% elsif customer.tags contains 'Pack Perks:Gold' %}
        <li>7% cashback on every order</li>
        <li>Free shipping on orders over $50</li>
        <li>Early access to new releases</li>
      {% elsif customer.tags contains 'Pack Perks:Silver' %}
        <li>5% cashback on every order</li>
      {% endif %}
    </ul>
  </div>
{% endif %}

---

Customer Metafields

Angle writes several customer metafields that store loyalty data. These metafields are accessible in Liquid using the standard customer.metafields.namespace.key syntax.

Angle Customer Metafields

Accessing Metafields in Liquid

{% if customer %}
  {% assign tier = customer.metafields.angle.tier_name.value %}
  {% assign spend = customer.metafields.angle.qualified_spend_total.value %}

  {% if tier %}
    <p>Your current tier: {{ tier }}</p>
    <p>Total qualifying spend: {{ spend | money }}</p>
  {% endif %}
{% endif %}

Spend-to-Next-Tier Progress Bar

{% if customer %}
  {% assign current_spend = customer.metafields.angle.qualified_spend_total.value | times: 1 %}
  {% assign next_tier_threshold = 1200 %}
  {% assign progress = current_spend | divided_by: next_tier_threshold | times: 100 %}
  {% if progress > 100 %}{% assign progress = 100 %}{% endif %}

  <div class="tier-progress">
    <p>{{ current_spend | money }} / {{ next_tier_threshold | money }} to Gold</p>
    <div class="progress-bar">
      <div class="progress-fill" style="width: {{ progress }}%;"></div>
    </div>
  </div>
{% endif %}

Referral Count Display

{% if customer %}
  {% assign referrals = customer.metafields.angle.referral_count.value | default: 0 %}
  {% if referrals > 0 %}
    <p>You've referred {{ referrals }} friend{{ referrals | pluralize: '', 's' }}!</p>
  {% else %}
    <p>Refer a friend and you both earn store credit.</p>
  {% endif %}
{% endif %}

Important Notes on Metafields

• You cannot create or write metafields in Liquid — they're created by the Angle app and updated automatically as loyalty activity occurs.
• Metafield values may be nil if the customer hasn't been enrolled or hasn't had relevant activity. Always use | default: or {% if %} checks.
• To make metafields available in the theme editor (for dynamic sources), they must be connected in Settings → Custom data → Customers in Shopify admin.

---

Klaviyo Profile Properties in Liquid (Email Templates)

Angle syncs 7 custom profile properties to Klaviyo for use in email and SMS templates. While these aren't Shopify Liquid variables, they follow similar templating syntax in Klaviyo's editor.

These properties enable dynamic email content like "You're only $200 away from Gold status" or "Your $25 credit expires in 7 days."

---

Common Theme Customization Patterns

1. Loyalty Banner on All Pages

Add to theme.liquid or a section that renders site-wide:

{% if customer and customer.store_credit_account and customer.store_credit_account.balance > 0 %}
  <div class="angle-loyalty-banner" style="background: #f5f0eb; padding: 10px; text-align: center;">
    <p style="margin: 0;">
      You have <strong>{{ customer.store_credit_account.balance | money }}</strong> in store credit.
      {% if customer.tags contains 'Pack Perks:Gold' %}
        As a Gold member, you earn 7% back on this order.
      {% endif %}
    </p>
  </div>
{% endif %}

2. Product Page Earn Preview

Show customers how much credit they'll earn on a specific product:

{% if customer %}
  {% if customer.tags contains 'Pack Perks:Platinum' %}
    {% assign cashback_rate = 0.10 %}
  {% elsif customer.tags contains 'Pack Perks:Gold' %}
    {% assign cashback_rate = 0.07 %}
  {% elsif customer.tags contains 'Pack Perks:Silver' %}
    {% assign cashback_rate = 0.05 %}
  {% else %}
    {% assign cashback_rate = 0 %}
  {% endif %}

  {% if cashback_rate > 0 %}
    {% assign earn_amount = product.price | times: cashback_rate %}
    <p class="cashback-preview">
      Earn {{ earn_amount | money }} back in store credit on this purchase.
    </p>
  {% endif %}
{% endif %}

3. Member-Only Collection Banner

{% if customer and customer.tags contains 'The Cellar Society:The Cellar' %}
  <div class="members-collection-banner">
    <h2>Cellar Society Exclusives</h2>
    <p>These wines are available only to Cellar Society members. Thank you for being part of the family.</p>
  </div>
{% else %}
  <div class="members-collection-banner locked">
    <h2>Cellar Society Exclusives</h2>
    <p>These wines are reserved for Cellar Society members. <a href="/pages/loyalty">Learn how to join.</a></p>
  </div>
{% endif %}

4. Cart Page Credit Reminder

{% if customer and customer.store_credit_account and customer.store_credit_account.balance > 0 %}
  <div class="cart-credit-reminder">
    <p>You have {{ customer.store_credit_account.balance | money }} in store credit that can be applied at checkout.</p>
  </div>
{% endif %}

5. Account Page Loyalty Summary

For themes using the legacy customer account templates (not the new Customer Accounts), you can add a loyalty summary section:

{% if customer %}
  <div class="loyalty-summary">
    <h2>Your Membership</h2>

    {% assign tier = customer.metafields.angle.tier_name.value %}
    {% if tier %}
      <p><strong>Tier:</strong> {{ tier }}</p>
    {% endif %}

    {% if customer.store_credit_account %}
      <p><strong>Store Credit:</strong> {{ customer.store_credit_account.balance | money }}</p>
    {% endif %}

    {% assign spend = customer.metafields.angle.qualified_spend_total.value %}
    {% if spend %}
      <p><strong>Qualifying Spend:</strong> {{ spend | money }}</p>
    {% endif %}

    {% assign referrals = customer.metafields.angle.referral_count.value | default: 0 %}
    <p><strong>Referrals:</strong> {{ referrals }}</p>
  </div>
{% endif %}

6. Non-Member Enrollment Prompt

Show a loyalty pitch to customers who aren't yet enrolled:

{% if customer %}
  {% assign is_member = false %}
  {% for tag in customer.tags %}
    {% if tag contains 'Pack Perks:' %}
      {% assign is_member = true %}
      {% break %}
    {% endif %}
  {% endfor %}

  {% unless is_member %}
    <div class="enrollment-prompt">
      <h3>Join Pack Perks</h3>
      <p>Earn up to 10% back in store credit on every purchase. Your first order automatically enrolls you.</p>
      <a href="/pages/loyalty" class="btn">Learn More</a>
    </div>
  {% endunless %}
{% endif %}

---

Liquid Variables Quick Reference

---

Where to Add Liquid Customizations

---

Angle App Blocks vs. Liquid Customizations

Angle provides two built-in app blocks that handle the most common loyalty displays without any Liquid code:

Use the app blocks for standard displays. Use Liquid for anything custom — banners, conditional content, earn previews, progress bars, and tier-gated access.

---

Troubleshooting

Store credit balance shows as nil

The customer either isn't logged in, doesn't have a store credit account, or is browsing in a currency where they don't have an account. Always wrap in {% if customer and customer.store_credit_account %}.

Tier tag not found even though the customer is enrolled

Tags are case-sensitive. Ensure the tag in your Liquid matches the exact format generated by Angle (MembershipName:TierName). Check the customer's profile in Shopify admin to verify the exact tag.

Metafields returning nil

Metafields are only populated after the customer has had loyalty activity (enrollment, earning credit, etc.). New customers who haven't triggered any loyalty events won't have metafield values yet. Use | default: filters for fallback values.

Balance shows raw number instead of formatted currency

Always apply the | money filter when outputting monetary values. Without it, you'll see the subunit amount (e.g., 5825 instead of $58.25).