You're looking at the documentation for Liquid Ajax Cart v1. Go to Liquid Ajax Cart v2


The messageBuilder configuration parameter lets you change the HTML layout of the messages that are put in data-ajax-cart-messages containers.

By default the messages are built using the following function:

messages => {
  let result = '';
  messages.forEach( element => {
    result += `<div class="js-ajax-cart-message js-ajax-cart-message--${ element.type }">${ element.text }</div>`;
  return result;

You can pass your own function using the messageBuilder configuration parameter. For example lets use an unordered list for messages and change CSS classes:

<script type="module">
  import { configureCart } from '{{ "liquid-ajax-cart-v1.11.2.js" | asset_url }}';

  configureCart('messageBuilder', messages => {
    let result = '<ul>';
    messages.forEach( element => {
      result += `<li class="my-message my-message--${ element.type }">${ element.text }</li>`;
    result += '</ul>'
    return result;

The function will be called with the only parameter messages — an array with the all the messages that are going to be displayed. Each message is a Javascript object that contains the following properties:

  "type": "error",
  "text": "All 3 T-shirt are in your cart.",
  "code": "shopify_error",
  "requestState": {}
  • type — is always error for now. It is planned to add more message types in future releases.
  • code:
    • shopify_error — if Shopify responded with an error message to a Cart Ajax API request. For example if a user tried to use a product form to add to cart more products than available, Shopify will respond with an error message.
    • request_error — if a Cart Ajax API request is not successful and doesn’t have any error description, or if the request is not performed at all due to internet connection, for example.
  • requestState — the Request State object with information about the request.