Sections & blocks

Electro is a theme-blocks theme. Blocks can be added, reordered and nested inside sections on every template, including the product page — not just the homepage, which is the limit of older free themes.

Sections

Section Where What it is
hero Any page Full-width banner over an image, with an optional boxed content card.
tabbed-collections Any page The department grid: one tab per collection, rendered server-side.
featured-collection Any page A product grid from one collection.
collection-list Any page Collection cards, for a "shop by department" row.
image-with-text Any page Two-up image and copy, with an optional button.
rich-text Any page A heading and prose, centred or left.
multicolumn Any page Two to four columns of icon, heading and text.
blog-posts Any page The latest articles from a blog.
newsletter Any page An email capture form, wired to Shopify customers.
marquee Any page A scrolling strip of short claims.
page-header Inner pages The banner with the title and breadcrumb trail. Emits BreadcrumbList.
contact-form Any page Shopify's contact form, styled.
apps Any page A slot for an app block.
custom-liquid Any page Raw Liquid, for anything the theme does not product image.
main-* Their own template The page's own content: product, collection, cart, blog, article, search, 404, and the customer account set.

Header and footer are section groups (header-group.json, footer-group.json), so they are edited in the theme editor like any other section and can carry their own blocks.

Theme blocks

These 15 can be placed in any section that accepts @theme, and nested inside group. specs is the one Electro adds:

title · vendor · price · variant-picker · quantity · buy-buttons · inventory · description · specs · accordion · heading · text · button · image · group

On a hardware product page the useful order is usually:

  1. vendor — the brand, above or below the title
  2. title
  3. price
  4. variant-picker — the finish
  5. quantity
  6. buy-buttons
  7. inventory
  8. description
  9. specs — the specification table
  10. accordion — delivery and returns

Every one of those is movable. If you want the specification above the buy button rather than below it, drag it there.

group

group accepts child blocks, so a row of two things side by side is a group with two children rather than a code change. Nesting is how the theme avoids having a section per layout variation.

Colour schemes

Each section picks one of four schemes. A scheme sets background, text, heading, button, accent and border together, so a section cannot end up with an unreadable combination by accident.