How to Show Store Credit in Shopify Liquid

Shopify released this feature in May 2025 that allows merchants to display a customer’s store credit balance directly on the storefront using Liquid.

Requirements

1. The store credit feature must be activated on your shop
2. Your store must use the Customer Accounts system
3. You need to edit your theme code

How to add store credit display to your theme

First thing is to access the themes section.

1. Go to your Shopify Admin
2. Navigate to Online Store > Themes
3. Find your active theme and click on Actions > Edit code

The most common places to display store credit are:

1. Customer Account Page: The customers/account.liquid template (for older themes) or the sections/main-account.liquid section (for Dawn and newer themes)
2. Cart Page: The cart.liquid template or related sections
3. Header: For a global display throughout your site when a customer is logged in

Add the following code snippet to display the customer’s store credit balance:

{% if customer %}
  <p class="store-credit-balance">Your store credit balance: {{ customer.store_credit_account.balance | money }}</p>
{% endif %}

This code:

• Checks if a customer is logged in
• Displays their store credit balance using the customer.store_credit_account.balance Liquid object
• Formats the amount using the money filter to display in the store’s currency format

You can also use the money_with_currency filter to include the currency code:

{{ customer.store_credit_account.balance | money_with_currency }}

Example implementation for customer account page

If you’re using a JSON template (newer themes like Dawn):

1. Open the templates/customers/account.json file
2. Find the section that contains the customer account information
3. Add the store credit display by editing the related section file (likely sections/main-account.liquid)

Add the store credit display code to the appropriate section:

<div class="customer-account-balance">
  {% if customer.store_credit_account.balance > 0 %}
    <h3>Store Credit</h3>
    <p>Your available store credit: {{ customer.store_credit_account.balance | money }}</p>
    <p>Use your store credit during checkout when logged into your account.</p>
  {% endif %}
</div>

Example implementation for cart page

Add this to your cart template or cart section to remind customers they have store credit available:

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

Using Store Credit in Email Templates

You can also display customer store credit balances in Shopify Email templates and marketing automation emails. This is useful for:

• Re-engagement campaigns reminding customers about unused credit
• Order confirmation emails showing remaining balance after a purchase
• Loyalty program communications

Adding Store Credit to Notification Emails

In your email notification templates (Settings → Notifications), use:

{{ customer.store_credit_account.balance | money_with_currency }}

Example: Order Confirmation Email

Add this snippet to your order confirmation template to show remaining credit:

{% if customer.store_credit_account.balance > 0 %}
  <p>You still have {{ customer.store_credit_account.balance | money_with_currency }} in store credit available for your next purchase.</p>
{% endif %}

Using in Shopify Email Marketing

If you use Shopify Email for marketing campaigns, the same Liquid syntax works in your email templates. Consider creating a “Use Your Store Credit” campaign targeting customers with unused balances.

Important notes

When doing this set up, keep these in mind:

1. Store credit can only be displayed and used when customers are logged into their accounts.
2. If a customer has store credit in multiple currencies, only the credit that matches the currency of your checkout will be displayed and available for use.
3. The customer.store_credit_account.balance object gives you access to the customer’s current store credit balance.
4. You can add CSS classes to style your store credit display according to your theme.

Styling Your Store Credit Display

Here are some CSS examples to make your store credit display more visually appealing.

Account Page Style (Highlighted Box)

.store-credit-balance {
  background-color: #f0f9f0;
  border: 1px solid #28a745;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  font-weight: 500;
}

Cart Page Style (Attention-Grabbing Banner)

.cart-store-credit-reminder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 20px;
}

.cart-store-credit-reminder p {
  margin: 0;
}

.cart-store-credit-reminder .balance {
  font-size: 1.25em;
  font-weight: bold;
}

Add custom CSS via Online Store → Themes → Customize → Theme settings → Custom CSS, or add it directly to your theme’s stylesheet.

How to test if it works

After adding the code:

1. Log in to your store’s frontend as a customer who has store credit
2. Navigate to the page where you’ve added the store credit display
3. Verify the balance appears correctly and is formatted with your store’s currency

Customers will be able to apply their store credit at checkout. When a customer is checking out, the option to apply store credit to their order will automatically appear after they log into their customer account.

Troubleshooting Common Issues

Store Credit Balance Not Showing

1. Customer not logged in

The customer object only returns data when customers are logged into their account. If the balance isn’t showing:

• Verify you’re testing while logged in as a customer (not just as admin)
• Check that your conditional uses {% if customer %} before accessing store credit

2. Customer has no store credit

The balance will be empty or zero if the customer hasn’t been issued any store credit. To test properly:

• Issue store credit to a test customer account via Shopify admin (Customers → select customer → Store credit)
• Then log in as that customer to verify the display

3. Store credit not enabled

Verify store credit is activated in your Shopify admin:

1. Go to Settings → Customer accounts
2. Look for the Store credit section
3. Ensure it’s toggled on

4. Using outdated syntax

Make sure you’re using the correct current syntax:

• Correct: customer.store_credit_account.balance
• Outdated: customer.store_credit

Currency Display Issues

Multi-currency stores: If a customer has store credit in multiple currencies, only the balance matching their current browsing/checkout currency will display. A customer browsing in USD will only see their USD store credit, not GBP or EUR balances.

Formatting: Always use the money or money_with_currency filter to ensure proper currency formatting:

• | money – Displays as $10.00
• | money_with_currency – Displays as $10.00 USD

Store Credit Not Applying at Checkout

Store credit can only be redeemed through Shopify’s standard checkout flow. If customers use accelerated checkout options like:

• Shop Pay
• PayPal Express
• Apple Pay / Google Pay

The store credit may not be automatically applied. Customers need to use the regular checkout and be logged in to apply their store credit balance.

Conclusion

With this simple implementation, you can now display store credit balances directly on your storefront using Liquid, enhancing the shopping experience for your customers and potentially increasing return purchases.