# [Upcoming Change] DOM structure changes for 7.1 standalone pages

**Date:** July 2026

**What's Changing:** We're changing the HTML structure of standalone pages for 7.1 websites in a way that may affect custom CSS. These changes are scheduled to begin rolling out to websites starting in mid-July.

## What's a "standalone page"?

A standalone page is any page that isn't a collection page (i.e. not Stores, Blogs, Portfolios, or Events).

## What's changing

### Current legacy DOM structure

```html
<article class="sections" id="sections" data-page-sections="{pageSectionsId}">
  <section class="page-section">
    ...
  </section>
  <section class="page-section">
    ...
  </section>
</article>
```

### New DOM structure

The new DOM structure wraps page sections in an additional `<section>` tag. On standalone pages, all user sections are grouped inside a single region:

```html
<article class="page-regions" id="page-regions"
  data-collection-id="{collection.id}"
  data-item-id="{item.id}"
  data-regions-source="collection">
  <section class="region" data-region-id="{regionId}">
    <section class="page-section">
      ...
    </section>
    <section class="page-section">
      ...
    </section>
  </section>
</article>
```

## Custom code impact

The changes will apply to all standalone pages on all 7.1 sites. As shown in the examples above, page sections on standalone pages will be nested one level deeper in the DOM, so you may need to update custom CSS targeting the current page structure to ensure it works as expected.

The most likely selectors that will need updating are those that depend on the current section hierarchy, including:

- **Direct child selectors** like `.sections > .page-section`, `#sections > .page-section`, and `article > section`
- **Pseudo-elements applied broadly to `section`**, like `section::before` and `section::after`
- **Selectors that rely on a section being the first, last, or nth child** in the current structure. More details:
  - `article > *:first-child` will break
  - `section:first-child` won't break but will also apply to the new `section.region` element (likely unintended)
  - `section.page-section:first-child` will work as expected

## What's next

If you manage sites with custom CSS on standalone pages, we recommend that you audit any custom CSS targeting page sections by DOM structure and update it. Keep in mind that only custom code that is written to our [official spec](/custom-code/about) should be considered stable and insulated from changes like the one described here.