How to display store credit in Shopify storefront using liquid

Shopify released this featured in Shopify Summer Editions 2024 update 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 | money }}</p>
{% endif %}

This code:

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

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 > 0 %}
    <h3>Store Credit</h3>
    <p>Your available store credit: {{ customer.store_credit | 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 > 0 %}
  <div class="cart-store-credit-reminder">
    <p>You have {{ customer.store_credit | money }} in store credit available.</p>
    <p class="small">Your store credit will be available at checkout.</p>
  </div>
{% endif %}

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 object is a new addition to the Liquid object model that 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.

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.

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.