Static Section showing as dynamic section

Technical Q&A
,

Topic summary

A developer encountered an issue where static sections (main-cart-items.liquid and main-cart-footer.liquid) were unexpectedly rendering as dynamic sections with auto-generated IDs instead of their intended static IDs.

Original behavior:

  • Sections rendered with static IDs like "cart-items" and "cart-footer"

Problem:

  • Same sections suddenly rendered with dynamic IDs (e.g., "template--xxxxx__cart-items")
  • This broke JavaScript functionality that relied on fetching sections by their static IDs

Root cause discussion:

  • One responder clarified the distinction between static sections (included via {% section %} tags) versus dynamic sections (assigned in JSON templates)
  • Possible Shopify-side changes affecting section ID generation were mentioned

Solution implemented:

  • Developer added a Liquid snippet to expose the section ID as a data attribute:
    {% unless section.id == empty %}
  <div data-section-id="{{ section.id }}"></div>
{% endunless %}
  • Modified JavaScript to dynamically retrieve and use this section ID when fetching content
  • Problem resolved successfully
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi im having a problem.

My static section was rendering correctly but now it’s rendering as a dynamic section.

My files are correctly called main-cart-items.liquid & main-cart-footer.liquid

The were previous rendering correct like this:

But now they render as dynamic sections like this.

Why are they now rendering as dynamic sections when they are not dynamic?
I need them to register as static sections like the first example (which they were originally doing).

Any help would be appreciated, i’ve been banging my head against a wall for days.

Bellow is my cart.json

{
  "sections": {
    "cart-items": {
      "type": "main-cart-items",
      "settings": {
      }
    },
    "cart-footer": {
      "type": "main-cart-footer",
      "settings": {

      }
    }
  },
  "order": [
    "cart-items",
    "cart-footer"
  ]
}
2

Hi Thedesignersdev,

This might be confusion over the naming of static vs dynamic sections. Static sections are sections that are included using the {% section ‘section-name’ %} tag in a .liquid file rather than being assigned on a .json file. What’s your usecase for registering sections as static sections, or having no reference to the template in the ID property? It’s possible that something changed on Shopify’s side that has impacted on the value of IDs for sections, which I’ll investigate.

Hope this helps,

1 Like
3

Thanks so much for the reply Liam.

I thought maybe it was a schema, caching issue because i was changing template names so much but couldn’t find any references to it in the schema.

Again, it’s so weird that it was working and then i logged on the next day and the sections were all of a sudden dynamic.

The use case is the section is being identified in JSON with its ‘static’ section id.
I could add the file using (bellow) but the cart page has no actual cart page to pull it into correct?

{% section 'main-cart-items' %}

Here is the JSON that refers to the section, this is why im having an issue with it being ‘dynamic’ now.

async function updateCartPage() {
  const res = await fetch("/?section_id=main-cart-items");
  const text = await res.text();
  const html = document.createElement("div");
  html.innerHTML = text;

  const newBox = html.querySelector(".cart-page-box").innerHTML;
  document.querySelector(".cart-page-box").innerHTML = newBox;

  addCartPageListeners();
}

As mentioned in the original message, it was originally rendering on the page correct like this.

Now it renders incorrectly like this and the dynamic numerical part of the ID changes from my dev environment to the production version.

Thanks Liam.

4

Incase anyone else has this issue i was able to figure out how to add the dynamic section id this way.

Add this to the section page.
In my case main-cart-items.liquid

{% unless section.id == empty %}
  
{% endunless %}

Then in the .js file you can receive the unique section id this way.

// Ensure sectionID is defined before using it.
  if (typeof sectionID === 'undefined') return;
  const res = await fetch(`/?section_id=${sectionID}`);

Problem solved, everything is working perfectly now.

Have a good one.

1 Like