Section Rendering API: ?sections= ve ?section_id=

// Re-renders one section in the context of the current page (for example a
// product grid after a filter change) without reloading the page.
// A section that fails to render comes back as null with HTTP 200.
async function refreshSection(sectionId, search = window.location.search) {
  const params = new URLSearchParams(search);
  params.set('sections', sectionId);
  const response = await fetch(`${window.location.pathname}?${params}`);
  if (!response.ok) throw new Error(`Section Rendering API: HTTP ${response.status}`);
  const sections = await response.json();
  const html = sections[sectionId];
  if (html == null) throw new Error(`Section ${sectionId} did not render`);
  document.getElementById(`shopify-section-${sectionId}`).outerHTML = html;
}

refreshSection('template--5678__main').catch((error) => console.error(error.message));

# Up to five sections as JSON, rendered in the context of the page you call
https://your-store.com/?sections=header,footer
https://your-store.com/collections/summer?sections=template--5678__main&page=2
https://your-store.com/products/example-product?sections[]=template--5678__main&sections[]=sections--1234__header

# One section as plain HTML (404 if the section ID doesn't exist)
https://your-store.com/products/example-product?section_id=template--5678__main

# Section IDs
static section file sections/social.liquid   ->  social
JSON template section                        ->  template--5678__image_banner
section group section                        ->  sections--1234__header
in Liquid: {{ section.id }}   in HTML: id="shopify-section-<section ID>"