Theme Editor: Sections, Blocks & Brand Settings

Opening the theme editor

From Online Store > Themes > Customize, you enter a visual, drag-and-drop editor where changes preview live before you save and publish.

The left panel lists the current page's sections top to bottom; clicking one reveals its settings and any blocks inside it.

Real-life example: The theme editor is like rearranging furniture in a room using a floor-plan app before actually moving anything — you preview the new layout before committing.

Sections and blocks explained

A section is a large content area, like a hero banner, a featured collection, or a testimonial row. A block is a smaller repeatable item inside a section, like one testimonial card or one image in a slideshow.

You can add, remove, reorder, and duplicate both sections and blocks without touching code, as long as the theme supports them.

Real-life example: A section is a whole shelf in a store, and blocks are individual products placed on that shelf — you can rearrange products on a shelf, or rearrange entire shelves in the room.

• Sections — hero banner, featured products, rich text, image with text
• Blocks — items inside a section (one slide, one FAQ item, one testimonial)
• Reorder via drag-and-drop; some sections allow multiple instances per page

Theme (brand) settings

Global theme settings control colors, typography, buttons, and logo across the whole store, so you keep a consistent brand look without editing every page.

Many modern themes also read from a 'Brand' settings area (name, colors, social links, brand assets) used consistently across the storefront and even some app integrations.

Real-life example: Global theme settings are like a company style guide — pick the brand colors and fonts once, and every new shelf, banner, or brochure automatically matches.

{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "color_primary",
      "label": "Primary color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "color_background",
      "label": "Background color",
      "default": "#ffffff"
    }
  ]
}