Skip to main content
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

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:
  • 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 and the Compare tray. 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 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.
Adding a section

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

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.

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