Use the theme editor

You set up all of Maison in Shopify's theme editor. Open it from Online StoreThemes by clicking Customize.

Key concepts

Templates

A template describes a family of pages: every product page shares the Product template, every collection shares the Collection template. Choose the template to edit from the selector at the top of the editor. You can create alternate templates (for example, a product template for gift cards) and assign them to specific products.

Sections

A section is a horizontal band of the page: a hero, a product grid, a newsletter. In the left sidebar, click Add section to insert one, drag sections to reorder them, and click the eye icon to hide one without deleting it.

Some sections belong to a specific template and can't be added anywhere else: Product, Collection, Cart, Search, Blog, Article, Page, Contact, Not found, and Password page.

Blocks

A block is an element inside a section: a hero slide, an announcement bar message, the price on the product page. Click Add block under a section to add one. Maison uses two kinds of blocks:

• section blocks, which belong to one section (a slide, a service, a message);
• reusable theme blocks, which several sections accept and which can be nested inside groups. See Content blocks and Product blocks.

Presets

When a section offers several starting points, Add section lists them separately. For example, Featured collection is also available as Editorial product field and Compact product feature: it's the same section with a different starting layout. Every setting stays editable afterward.

Section groups: header and footer

The header and footer are section groups shared by every page (except the password page). The header group contains the announcement bar, the header, the cart drawer, and the search sheet; the footer group contains the footer. A change made here applies everywhere.

Theme settings

The gear icon opens Theme settings, which apply to the whole store: typography, layout, colors, buttons and fields, search, cart, social media, and favicon. See the Theme settings section.

Color schemes

Most sections have a Color scheme setting. Rather than picking colors one by one, you choose one of the schemes defined in Theme settingsColors. Editing a scheme updates every section that uses it. See Colors.

Apps

Apps built for Online Store 2.0 integrate in two ways:

• App blocks, added like any block in sections that accept them (product page, featured product, page, custom section, footer);
• App embeds, turned on from the editor's App embeds menu.

See Apps.

Best practices

• Save often: your changes aren't applied to the theme until you click Save.
• Preview on mobile with the device selector at the top of the editor: many settings (columns on mobile, logo width on mobile) only show at that size.
• Hide rather than delete a section you might need later.
• Duplicate the theme before a major redesign.