> ## 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 Kelvin's look is set in the **theme editor**. Your products, collections, pages, menus, metafields and discounts are set in the Shopify admin, and the theme displays them.

![The theme editor with the Kelvin home page](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-overview.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=fce0939d51e4d9a12ea98043f51dc22f)

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 Kelvin.

## 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 can have several (for example `page.pc-builder` or `page.care`, shown as Pages → pc-builder and Pages → care).
* **Sidebar** (left): the sections on that page, in order. Three section groups appear on every page:
  * **Header group**: the [Utility bar](https://docs.kwebby.com/kelvin/sections/utility-bar.md), with the monitor switch, and the [Header](https://docs.kwebby.com/kelvin/sections/header.md);
  * **Footer group**: the [Footer](https://docs.kwebby.com/kelvin/sections/footer.md);
  * **Overlays**: the [Age verifier](https://docs.kwebby.com/kelvin/sections/age-verifier.md) and the [Promo popup](https://docs.kwebby.com/kelvin/sections/promo-popup.md), 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.

Two parts of Kelvin sit in the layout rather than a template: the [Cart drawer](https://docs.kwebby.com/kelvin/sections/cart-drawer.md) and the [Compare tray](https://docs.kwebby.com/kelvin/sections/compare-tray.md). They are listed at the bottom of the sidebar, below the Overlays, and cannot be moved or removed. The Cart drawer has a color scheme and a link for the empty cart (it is not listed while you edit the Cart page); the Compare tray has no settings of its own. [Quick view](https://docs.kwebby.com/kelvin/sections/quick-view.md) is not in the sidebar at all. The rest of their settings are in **Theme settings** (Cart, Compare and Product cards).

## 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, departments 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. Kelvin ships four schemes, each with a light and a dark palette; see [Colors](https://docs.kwebby.com/kelvin/theme-settings/colors.md).

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

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: colors and the default mode, typography, layout, logo, product cards and spec rows, badges, deals, compare, PC Builder, cart, search and social media.

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

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

## Check light and dark mode

The editor preview follows your **Theme settings → Colors → Default color mode**. To see the other mode, click the monitor in the utility bar of the preview, or change the default for a moment. A choice made with the monitor is remembered in your browser like a visitor's: click it again to go back to the default. See [Light and dark mode](https://docs.kwebby.com/kelvin/guides/light-and-dark-mode.md).

## 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.