How to use Ajax to render liquid code and output as HTML?

Store Design
, , , ,

Topic summary

A developer is building a mini cart feature that needs to fetch metafield data for line items via AJAX. They’re using Shopify’s Section Rendering API but encountering an issue where the response returns as JSON instead of rendered HTML.

The Problem:

  • Using ?section_id= endpoint to fetch line-item-list.liquid
  • Receiving JSON string output instead of HTML
  • Need the liquid code to render as HTML for display

The Solution:
Shopify’s Section Rendering API has two endpoints with different behaviors:

  • ?section_id= returns HTML of a single section
  • ?sections= returns JSON bundle of multiple sections

The developer needed to either:

  • Parse the JSON response to extract the HTML
  • Use the alternative endpoint that returns HTML directly

Additional Recommendations:

  • Reference Shopify’s Dawn theme cart implementation for examples
  • Use whitespace control characters ({%- syntax) when rendering sections with minimal data
  • Apply the JSON format filter for proper data handling

Resolution: The issue was resolved after clarifying the endpoint behavior and implementation approach.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I’m working on a mini cart on my Shopify site and using ajax to add items to the cart. For each line item I need to get metafield data, but jquery won’t allow me to do this.

Below is the code for my mini-cart and the line-item-list.liquid. The problem is that this code is returning as a JSON string, but I need it to render as HTML.

Is it possible to use Ajax to render the liquid code and output it as HTML?

Any help would be greatly appreciated!

Thanks!

mini-cart.liquid

<div class="add-line-item">Add Line Item</div>
<div class="line-items"></div>

<script>  $(document).ready(function() {
    $('.add-line-item').on('click', function() {
      $.ajax({
        url: '/?sections=line-item-list',
        type: 'GET',
        dataType: 'html',
        success: function(data) {
          $('.line-items').html(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.error("Error fetching line-item-list content:", errorThrown);
        }
      });
    });
  });</script>

sections/line-item-list.liquid

{% for item in cart.items %}
  {% if item.product.metafields.custom.some-metafield == true %}
    {% assign is_metafield = true %}
  {% endif %}
  ...other code here
{% endfor %}
2

Reread the doc there’s TWO endpoints with two different behaviors.

?section_id= html of a single section or ?sections= JSON of bundle of sections.

The json your getting back just needs to be parsed, or use the other endpoint

See the dawn references cart section for implementation example

https://github.com/Shopify/dawn/blob/main/assets/cart.js#L51

If using section rendering for small data use whitespace control characters {%- if -%}

https://shopify.dev/docs/api/liquid/basics#whitespace-control

and or the JSON format filter https://shopify.dev/docs/api/liquid/filters/json

1 Like
3

Thanks, that did the trick :slightly_smiling_face: I appreciate your help!