Seventh > Understanding your theme's structure

Your theme is built using a simple, powerful system with three main building blocks: Sections, Cards, and Blocks. Understanding how these work together will help you customize your store exactly how you want it.

The three levels

Think of building your store like building a house:

1. Sections - These are like the rooms in your house. They're the big areas on your page (like a hero banner, product grid, or blog section)
2. Cards - These are like the furniture pieces in each room. They're styled containers that hold your content
3. Blocks - These are like the items on each piece of furniture. They're the individual content pieces (text, images, buttons, etc)

Sections: the foundation

How sections work

Every section has three main areas of customization:

1. Layout options - Control how the section is structured
   • Grid settings (columns, rows, spacing)
   • Full width or contained
   • Card height and sizing
   • Responsive layout controls
2. Section header block (optional) - A special block that contains header content
   • Add a "Section header" block to your section
   • Inside the Section Header block, add common blocks like:
     • Heading blocks for titles
     • Text blocks for descriptions
     • Button blocks for call-to-actions
     • Icon blocks for visual elements
     • Group blocks to organize multiple elements
   • Header positioning (top, side, etc.)
   • Sticky header option
   • Text alignment and width controls
3. Section design options - Control the visual appearance
   • Color schemes
   • Top and bottom padding
   • Background (color, image, or video)
   • Background overlay and effects
   • Full height option

Content area - Where you add cards or blocks depending on the section type

You can add multiple sections to any page and arrange them in any order. Each section can be customized independently!

Cards: styled content containers

What do cards provide

Every card gives you control over:

• Styling - Backgrounds, colors, padding, borders
• Layout - Text alignment, spacing, positioning
• Content organization - A place to add and organize blocks

Blocks: Your content elements

Content specific blocks

Some cards have special blocks just for them:

• Product blocks - Show product price, variants, add to cart button, etc.
• Article blocks - Show blog post title, excerpt, author, date, etc.
• Collection blocks - Show collection name, description, product count, etc.

How sections, cards & blocks work together

The complete picture

Here's how everything fits together in the theme customizer:

Page
  └── Section (e.g., "Rich Text")
      ├── Section Header Block (optional)
      │   └── Add block → Blocks inside header:
      │       • Heading block
      │       • Text block
      │       • Button block
      │       • (other common blocks)
      │
      └── Content Area
          ├── Card (e.g., "Rich Text Card") - if section uses cards
          │   └── Add block → Blocks inside card:
          │       • Heading block
          │       • Text block
          │       • Image block
          │       • Button block
          │       • (other blocks)
          │
          └── OR Blocks directly (e.g., "Rich Text" section without cards)
              └── Add block → Blocks at section level:
                  • Heading block
                  • Text block
                  • Image block
                  • Button block

What you'll see in the theme customizer:

When you open a section like "Rich Text", you'll see:

• The section name at the top (e.g., "Rich text")
• An "Add block" button to add blocks directly to the section
• Optionally, a "Section header" block (if added) with its own "Add block" button inside
• Cards like "Rich text card" (if using card-based sections) with their own "Add block" buttons
• Each block can be expanded to see and edit its settings

Key points:

• Sections can have an optional "Section Header" block that contains common blocks
• Some sections like "Rich Text" can use blocks directly OR cards to organize blocks
• Others like "Flexible Cards" primarily use cards to organize blocks
• Each level (Section → Card/Header → Blocks) has its own "Add block" button

Building content step by step

1. Start with a section - Choose the section type that fits your goal
   • Want to add text and media? Use "Rich Text" section
   • Want a grid of products? Use "Flexible Cards" section
   • Want a scrolling display? Use "Scrolling Cards" section
   • Want to showcase one product? Use "Featured Products" section
2. Add cards to the section - Cards organize your content
   • In card-based sections, add the type of card you need
   • Each card becomes one item in your section
3. Add blocks to your cards - Fill cards with actual content
   • Add Heading, Text, Image, Button blocks
   • Or use specialized blocks (Product blocks, Article blocks, etc.)
4. Customize everything - Adjust settings at each level
   • Section settings control the overall layout
   • Card settings control styling and appearance
   • Block settings control individual content elements

Mix and match

The same blocks work in different card types! This means:

• Once you learn how to use a Heading or Image block, you can use it anywhere
• You can create consistent designs across your store
• Building new layouts becomes quick and easy