> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/getting-started/theme-editor.md).

# Using the theme editor

How the Shopify theme editor works with Stratum, from sections and blocks to theme settings, templates and groups.

Everything in Stratum is set up in Shopify's theme editor. You never need to touch code. This page explains how the editor is organized, so the rest of the manual makes sense.

To open it, go to **Online Store › Themes** and click **Customize** on Stratum.

## The three parts of the editor

| Part               | Where                                      | What it does                                                                                 |
| ------------------ | ------------------------------------------ | -------------------------------------------------------------------------------------------- |
| **Sidebar**        | Left                                       | Lists the sections and blocks on the page you are editing. Click one to change its settings. |
| **Preview**        | Middle                                     | Your store as shoppers will see it. Click anything in the preview to jump to its settings.   |
| **Settings panel** | Right (or in the sidebar on small screens) | The settings of whatever you selected.                                                       |

At the top you find the **page picker** (which page you are editing), the device switch (desktop or mobile preview), **Undo** and **Redo**, and **Save**.

## Sections and blocks

Pages are built from **sections**: full-width parts such as a hero, a product grid or a testimonial carousel. Most sections contain **blocks**: smaller pieces such as a heading, a button or a single testimonial.

* **Add a section**: click **Add section** in the sidebar, at the place where you want it, then pick one. Stratum's sections are grouped by category, such as Text, Media, Products, Collections, Promotions and Reviews.
* **Add a block**: expand a section in the sidebar and click **Add block**.
* **Reorder**: drag a section or block by the handle that appears when you hover it.
* **Hide without deleting**: hover a section or block and click the eye icon. Hidden items keep their settings.
* **Remove**: select it and click **Remove section** or **Remove block** at the bottom of its settings.
* **Duplicate**: hover a section or block and use the duplicate icon (or right-click it).

Some blocks can hold other blocks. For example, the **Group** block can contain headings, text and buttons, and a **Product card** contains its image, title, price and swatches. Expand a block in the sidebar to see what is inside it.

See [Sections and blocks explained](/building-pages/sections-and-blocks.md) for the full picture.

{% hint style="info" %}
A template can hold up to 25 sections. Stratum's home page preset already uses all 25; remove one before adding another.
{% endhint %}

## Theme settings: the gear icon

The **gear icon (Theme settings)** at the bottom of the left sidebar opens settings that apply to the whole store:

| Group                | Controls                                                                  |
| -------------------- | ------------------------------------------------------------------------- |
| **Logo and favicon** | Logo, logo widths, favicon                                                |
| **Colors**           | The six color schemes and the status colors                               |
| **Typography**       | Fonts, heading weight, size, case and letter spacing, body text size      |
| **Layout**           | Page width, space between sections, corner roundness                      |
| **Buttons**          | Button shape, hover effect, text case                                     |
| **Animations**       | Reveal on scroll, hover zoom, fade between pages, page loader             |
| **Product cards**    | Image shape and fit, second image on hover, badges, the card's add button |
| **Filters**          | Which filters show as color swatches, and how other option filters look   |
| **Swatches**         | Which options show swatches, their shape and colors                       |
| **Cart**             | Cart type, cart note, free delivery bar, terms checkbox                   |
| **Navigation**       | Back to top button, mobile bottom bar                                     |
| **Product compare**  | Turning compare on, the compare page and extra comparison rows            |
| **Social media**     | Links to your social profiles                                             |
| **Currency format**  | Whether prices show currency codes                                        |

Every setting is listed in the [Theme settings reference](/reference/theme-settings.md).

## Header, footer and overlays: section groups

Some sections appear on every page. They live in **groups**, which you can edit from any page:

* **Header group** (top of the sidebar): the **Announcement bar** and the **Header**.
* **Footer group** (bottom of the sidebar): the **Footer**.
* **Overlays** group: the **Cart drawer**, **Cookie consent** and **Newsletter popup**. These sit over the page instead of in it.

A change made to a group appears on every page of the store.

## Templates and the page picker

Each type of page has a **template**: one layout used by every page of that type. Changing the product template changes the layout of every product.

Use the page picker at the top of the editor to switch templates:

| Picker entry                                                    | What it controls                                |
| --------------------------------------------------------------- | ----------------------------------------------- |
| **Home page**                                                   | Your home page                                  |
| **Products › Default product**                                  | Every product page                              |
| **Collections › Default collection**                            | Every collection page                           |
| **Collections list**                                            | The all collections page (`/collections`)       |
| **Search**                                                      | Search results                                  |
| **Cart**                                                        | The cart page                                   |
| **Blogs › Default blog** and **Blog posts › Default blog post** | Blog listing and blog posts                     |
| **Pages › Default page**                                        | Standard pages                                  |
| **Password**, **404 page**                                      | The password page and the "page not found" page |

### Alternate templates

Stratum includes extra page templates with ready-made layouts. To use one:

1. Create the page in **Online Store › Pages** (for example "About us").
2. In the page's **Theme template** box (right side), choose the template.
3. Save, then open it in the editor via **Pages ›** and the template name.

| Template        | Use it for                              |
| --------------- | --------------------------------------- |
| **about**       | Your story, values and team             |
| **contact**     | A contact form with your details        |
| **lookbook**    | Shoppable lifestyle scenes              |
| **stores**      | Store locator with a map and store list |
| **wholesale**   | Trade program and application form      |
| **compare**     | The product compare page                |
| **quick-order** | Ordering many products by SKU at once   |

You can also create your own template: in the page picker choose **Create template**, give it a name, and base it on an existing one. See [About, Lookbook, Stores, Wholesale and Contact](/building-pages/content-pages.md).

{% hint style="warning" %}
**Templates are stored in your store, not only in the theme.** Once you save a template in the editor, Shopify keeps your saved version. If you later replace the theme files (for example by uploading a newer ZIP over the same theme), templates you have edited keep your saved layout. That is usually what you want, but it is why a fresh theme file can look different from your live store.
{% endhint %}

## App blocks

Apps such as review apps or loyalty programs can add **app blocks**. Where a section accepts them, **Add block** shows an **Apps** list. The product information section, the Content section and the Footer accept app blocks, among others.

Some apps instead add **app embeds**: open the **App embeds** icon in the left bar and switch them on.

## Undo, redo and saving

* **Undo** and **Redo** buttons sit at the top of the editor, or press Ctrl/Cmd + Z.
* Nothing is visible to shoppers until you click **Save**, and on an unpublished theme not until you publish.
* Shopify keeps a version history of theme files; for settings, duplicate the theme before large changes.

## Previewing on mobile

Click the device switch at the top of the editor to see the mobile layout. Stratum is designed for phones first: some things only show on small screens, such as the [mobile bottom bar](/header-and-footer/mobile-navigation.md), and the filters become a sheet that slides up.

Always check the real thing on a phone too: open **⋯ › Share preview** in the editor and open the link on your phone.

## What behaves differently in the editor

So that you can edit comfortably, a few things are switched off while you are in the theme editor:

* **Animations**: scroll reveals, the page loader and fades between pages are off, so content is always visible where you click.
* **Autoplay**: slideshows, tabbed features and the announcement bar don't rotate on their own.
* **Recently viewed** shows a note instead of products, because the editor has no browsing history.
* **Selecting a block** jumps to it: for example, selecting a slide shows that slide, and selecting a feature row opens it.

Shoppers see the full experience on the live store or in preview.