> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme editor basics

> How to edit pages, sections, blocks, section groups and theme settings.

Everything about Gloaming's look is set in the **theme editor**. Your products, collections, pages, menus and discounts are set in the Shopify admin, and the theme displays them.

![The theme editor with the Gloaming home page](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-overview.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=3e01d2b6083ceec178d27f878a5bf6e3)

The theme editor: 1 the sections on this page · 2 the page selector · 3 the preview · 4 Save

## Open the theme editor

Go to **Online Store → Themes** and click **Customize** next to Gloaming.

## The parts of the editor

* **Page selector** (top of the screen): choose which page you are editing, such as Home page, Products, Collections, Pages, Blogs or Cart. Each page type has its own template, and pages and blogs can have several (for example page.about or blog.events).
* **Sidebar** (left): the sections on that page, in order. Three section groups appear on every page:
  * **Header group**: the Announcement bar and the Header;
  * **Footer group**: the Footer;
  * **Overlays**: the Spin wheel and the Age check, both hidden and turned off on install.
* **Preview** (middle): your store as customers see it. Click anything in the preview to jump to its settings.
* **Settings panel**: the settings of whatever you selected. They open in the sidebar, under the list of sections.

## Sections and blocks

* **Add a section:** click **Add section** in the sidebar where you want it, and pick one from the list.
* **Add a block:** many sections hold repeatable items, called blocks, such as films, slides, hotspots or questions. Expand the section and click **Add block**.
* **Reorder:** drag the handle beside a section or block.
* **Hide or remove:** click the eye icon to hide it without losing its settings, or open it and click **Remove section** / **Remove block**.
* **Color scheme:** most sections have a Color scheme setting. Gloaming ships six schemes; see [Colors](https://docs.kwebby.com/gloaming/theme-settings/colors.md).

![Adding a section](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-add-section.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=69f96310f9276a06f3d048d70b6f28af)

1 Add section opens 2 the list of sections you can add, with a preview of each

## Theme settings

Click the **gear** icon (Theme settings) at the top of the left sidebar to change things that apply everywhere: logo and favicon, colors, typography, layout, product cards, cart, search and social media.

![Theme settings in the editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-theme-settings.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=5e12b1e9d9e2e772d0236a58c772d3a0)

1 Theme settings (the gear icon) · 2 the settings groups that apply to the whole store

## Save and preview

Click **Save** in the top-right corner. Use the device switcher at the top to check the phone layout. Changes are not visible to customers until you save, and on an unpublished theme not until you publish.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.