Start here
Learn the theme editor
A five-minute tour: templates, sections, blocks, theme settings, device preview and saving.
What you will have
You know where every kind of setting lives, so the rest of these guides read as simple click paths.
Know the three areas of the screen
Online StoreThemesCustomize
The left sidebar lists what is on the current page. The middle is a live preview you can click. The right panel (or the same sidebar on smaller screens) shows the settings of whatever you selected.
Shopify admin1Online Store2Themes3CustomizeShopify admin · click these in orderSwitch pages with the template picker
The dropdown at the top centre says “Home page” by default. Open it to jump to Products, Collections, Cart, Pages, Blogs, Search, 404 and Password. Each one is a separate template with its own sections.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home page- Home page → templates/index.json
- Products → Default product → templates/product.json
- Collections → Default collection → templates/collection.json
- Pages → Default page, and a ready-made Contact page template
Read the sidebar: Header, Template, Footer
The sidebar is split into three groups. Header and Footer are shared across the whole store, so editing them once changes every page. Template holds the sections that belong only to the page you are viewing.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageTipAll Comers sections are prefixed with “CM”, for example CM Hero or CM Footer, so they are easy to spot.
Select a section to see its settings
Click a section name in the sidebar, or click it directly in the preview. Its settings open. Change a value and the preview updates straight away.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageOpen a section to see its blocks
Click the small arrow beside a section name. The items underneath are blocks: slides in a hero, cards in a grid, the title and price on a product page. Click a block to edit it, or drag it to reorder.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by category1Drag the handle to reorderCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageFind the global Theme settings
Theme editorTheme settings (brush / gear icon in the left rail)
These apply to every page: Logo, Colors, Typography, Layout, Social media, Currency format, Comers design system and Floating chat.
Theme settingsLogoColorsTypographyLayoutTheme editor · Theme settings › Theme settingsCheck desktop and mobile
Use the device icons at the top right to switch between desktop and mobile preview. Comers has several mobile-only pieces, such as the bottom tab bar and mobile hero slider, so always check both.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageTipThe preview is a good guide, but open the preview link on a real phone before you publish.
Undo, save and keep going
Undo and redo arrows sit at the top. Nothing is stored until you press Save. On an unpublished theme, saving is always safe: customers cannot see it.
Home pageHeaderCM HeaderTemplateCM HeroCM Shop by categoryCM Featured collectionAdd sectionFooterCM FooterTheme editor · Home pageImportantIf you are editing the live theme, Save publishes the change to customers immediately. Duplicate the theme and edit the copy for anything bigger than a text fix.