How can I locate HTML section IDs in my Shopify theme?

[PerTonascia]

Hey there,

I am working on editing my theme and I am having trouble locating some of my <div id="shopify-section-15881400030191485262104753">....</div> id's that allow me to do things like hide content. I have been looking for them using the inspect function and I am wondering if their is some other way to find theme or if some just simply don't have them or need to be referenced a different way?

Thanks alot

[PieterIEDM · Accepted solution]

Hi,

There is no real way to see thee section id in the backend of Shopify as it is created using the {{ section.id }} tag in your liquid files. In the frontend, you should be able to see it using the inspector. If you don't them simply update the div tags you want to be able to hide to the following:

<div id="shopify-section--{{ section.id }}">
</div>

Then you can reference it in your css using:

#shopify-section-eg123 {
display:none;
}

Or whatever you would like to assign to that ID.

Hope this helps you.

[phongdotvn]

You can see it in backend.

You can check file setting_data.json or the data.json (base on theme). That file included all section you design, so you can find ID of each section.

[QuinnAndLane]

...

[PaulNewton]

shopify-section-{{ section.id }}​

Currently there's appears to be two types of resulting attribute values in a BEM format for dynamic section id's.

Format is 'shopify-section-'  gets  'template'  then a --numeric element then an __alphanumeric modifier appended:

i.e. shopify-section-template--1234567__7654392e2345a

?For section presets? as above but with the section name as a modifier instead of an alphanumeric suffix:

i.e. shopify-section-template--14307643162724__image_banner

CSS selectors for different situations

/*
 Matching shopify section elements via that sections HTML id attribute.
Using attribute selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
*/

/*  matching ALL sections - id starts with "shopify-section-template" */
[id*="shopify-section-template"] {
    outline: 1px dashed red;
}

/*  matching specific section.id , requires liquid context for the {{ section.id }} expression otherwise */
[id*="shopify-section-template-{{ section.id }}"] {
    outline: 3px dashed yellow;
}

/* sections whose id attribute contains part of a string or number
so if you know the section id but don't bother with 'shopify-section-template' prefix or the type name suffix */
[id~="1234567"] {
  outline: 4px dashed red;
}

/*  matching all preset sections of a specific type - id ends with "__image_banner" */
[id$="image_banner"] {
    outline: 4px dashed green;
}

Related docs

https://shopify.dev/api/liquid/objects/section#section-id 

https://shopify.dev/themes/architecture/sections/section-schema#tag 

[miguelst]

Since these id's are generated randomly, is there not the change that the id will change? Can we be sure it won't change? Thanks!