Skip to content
Mindful ThemesMindful Themes
Contact

Theme editor basics

The Shopify theme editor is where you customize Roost. Use this page when you need to know what belongs in the page sidebar and what belongs in Theme settings.

Open the editor

Section titled “Open the editor”
  1. In Shopify admin, go to Online Store → Themes.
  2. Find Roost and click Customize.

Editor layout

Section titled “Editor layout”
  • Left sidebar — Sections on the current template. Click a section to expand its settings and blocks.
  • Center preview — Live preview of your store. Changes appear as you adjust settings.
  • Top bar — Switch templates, pick preview products or collections, toggle desktop/mobile, undo/redo.
  • Theme settings (gear icon) — Global defaults for brand, typography, cart, search, and shared UI.

What to edit where

Section titled “What to edit where”
Editor area Use it for Related docs
Theme settings Logo, colors, fonts, cart, search, performance, and other store-wide defaults Theme settings
Template picker Home, product, collection, cart, search, blog, page, and other page types Your store pages group in the sidebar
Section sidebar Visible page areas: header, hero, featured collection, FAQ, cart drawer, and more Sections you can add
Blocks inside sections Smaller items inside a section: text, images, product forms, accordions Section-specific guides under Your store pages

Working with sections

Section titled “Working with sections”

Sections are the configurable areas on a template.

Add a section

Section titled “Add a section”
  1. Click Add section at the bottom of the left sidebar.
  2. Browse or search for the section you want.
  3. Click to add it, then fill in settings and blocks.

Reorder or remove

Section titled “Reorder or remove”
  • Reorder: drag sections in the left sidebar.
  • Remove: select the section → … menu → Remove section.

See Sections you can add for friendly names to search in the editor.

Working with blocks

Section titled “Working with blocks”

Many sections contain blocks: individual content items or commerce controls inside the section. Product sections use blocks for variant pickers, buy buttons, and product information. Content sections use blocks for text, images, and buttons.

  1. Click a section to expand it.
  2. Click Add block and pick the block type.
  3. Fill in required content (image, product, heading, and so on).
  4. Drag blocks to reorder within the section.
Section titled “Recommended setup order”
  1. Theme settings — logo, colors, fonts, cart, search (checklist).
  2. Header and footer — menus, announcement bar (Header, Global chrome).
  3. Homepage — hero, collections, story sections (Homepage).
  4. Product and collection templates — media, subscriptions, filters (Product page, Collections).
  5. Coffee data — metafields, subscriptions, filters (Coffee details, Subscriptions).
  6. Preview and publish — test cart, search, and mobile before going live.

Global vs local controls

Section titled “Global vs local controls”

Set strong global defaults in Theme settings, then override in individual sections when a page needs something different. For example, set default button styles globally, then adjust a single hero section if needed.

Next steps

Section titled “Next steps”