[BUG] Shopify Theme Editor Section Visual Preview is Broken

Online Store and Theme Development
, , ,
1

Hello Shopify Devs,

In Shopify, before adding a section, there’s a visual preview. Recently I noticed that in this preview, my custom built sections are broken, because {{ section.id }} includes invalid characters which break the section.

Example:

{% style %}
.section#section_{{ section.id }} {
  --text-color: red;
}
{% endstyle %}

<div class="section" id="section_{{ section.id }}">
  <h2 style="color: var(--text-color)">Hello there</h2> // text is not red
</div>

everywhere besides the visual preview, {{ section.id }} looks like:

section_template--25013359542583__abcd

This is valid and works fine for the id attribute.

However, In visual preview, {{ section.id }} looks like:

section_template--25013359640887__eyJzZWN0aW9uIjoiYWRldi1pbWFnZS13aXRoLXRleHQtdjIiLCJzaWduYXR1cmUiOiJOZXcgSW1hZ2Ugd2l0aCBUZXh0IFYyIn0=

This contains =, which is not valid in an HTML id

which breaks the section styles and javascript that use the section.id

Hope this can be fixed asap.

2

Hello @arifursdev,

While I’m not sure about what happens with the section ID, I can recommend the following:

{% style %}
  #shopify-section-{{ section.id }} {
    --text-color: red;
  }
{% endstyle %}

<div class="section">
  <h2 style="color: var(--text-color)">Hello there</h2>
</div>

Or you can go even further based on your needs:

{% style %}
  #shopify-section-{{ section.id }} {
    --text-color: red;

    & h2 {
      color: var(--text-color);
    }
  }
{% endstyle %}

<h2>General Kenobi</h2>

{% schema %}
  {
    "class": "section" 
  }
{% endschema %}

In the context of a section, a wrapper element generated by Shopify already has an ID you can reference for your dynamic styles. This one surely is less bound to break as I use this exact pattern daily.

3

Hello,

Although this is about the {{ section.id }} output being invalid for id attribute;

I was wondering if you could share what’s wrong with my code even though this is not what I’m actually doing, but it was just an example.