Published on

Shopify Sections Rendering API: Dynamic Updates Without Page Reloads

Authors
  • Name
    Twitter

Shopify’s Sections Rendering API allows you to dynamically update parts of a page (like a cart drawer, product grid, or promotional banner) without a full page reload. This improves performance and creates a smoother user experience.

In this post, we’ll cover:

✔ How the Sections Rendering API works

✔ Fetching & re-rendering sections with AJAX

✔ Practical examples (with correct code)

How the Sections Rendering API Works

Shopify provides a way to fetch only specific sections of a page by appending ?sections=section-id to a URL. The response returns JSON with the updated HTML for those sections, which you can inject into the DOM.

Key Use Cases

  • Live cart updates (e.g., when adding/removing items)
  • Dynamic product filtering (without reloading the entire page)
  • Theme editor previews
  • Loading product quick views in a modal

How to Fetch & Re-render Sections

1. Fetching a Section via AJAX

Use fetch() to request a page with the ?sections= parameter:

javascript

Copy

async function reloadSection(sectionId) {
  // Fetch the current page + only the section we need
  const response = await fetch(`${window.location.pathname}?sections=${sectionId}`);
  const data = await response.json();

  // Replace the section's HTML in the DOM
  const sectionElement = document.getElementById(`shopify-section-${sectionId}`);
  if (sectionElement) {
    sectionElement.innerHTML = data[sectionId];
  }
}

2. Example: Updating the Cart Drawer

When a customer adds a product, refresh only the cart section (not the whole page):

javascript

Copy

// After adding to cart, reload the cart-drawer section
async function updateCartDrawer() {
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: 123456, quantity: 1 }] })
  });

  // Now reload the cart section
  await reloadSection('cart-drawer');
}

// Trigger on "Add to Cart" click
document.querySelector('.add-to-cart').addEventListener('click', updateCartDrawer);

3. Example: Dynamic Product Filtering

Update a product grid when filters change:

javascript

Copy

// Reload the "product-grid" section when filters update
async function applyFilter(filterValue) {
  const url = new URL(window.location.href);
  url.searchParams.set('filter', filterValue);

  // Fetch the updated product grid
  const response = await fetch(`${url.pathname}?sections=product-grid`);
  const data = await response.json();

  // Replace the product grid
  document.getElementById('shopify-section-product-grid').innerHTML = data['product-grid'];
}

Best Practices

✅ Debounce rapid updates (e.g., cart quantity adjustments) to avoid excessive AJAX calls.

✅ Use data-section-id attributes to make section targeting more maintainable.

✅ Fall back to full page reload if JavaScript fails (for robustness).

✅ Combine with loading="lazy" for images in dynamic sections.

Official Shopify Resources

Final Thoughts

The Sections Rendering API is a powerful way to make Shopify stores feel faster and more interactive. By selectively updating parts of the page, you reduce load times and improve UX.

#ShopifyDev #AJAX #FrontendOptimization #Ecommerce

Subscribe to the newsletter