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 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 Your 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

Tips for Success

Getting Started

• Start with Sections - Always begin by choosing the right section type for your goal
• Learn One Section Type Well - Master "Rich Text" first, then explore others
• Start Simple - Begin with basic blocks, then experiment with cards and advanced options

Organization

• Use Groups - When you have several blocks that belong together, put them in a Group block for easier management
• Keep It Organized - Use clear headings and organize your content logically
• Name Your Sections - Use section headers to keep your page organized

Design Consistency

• Stay Consistent - Use the same color schemes and styling across similar sections for a professional look
• Match Your Brand - Use consistent fonts, colors, and spacing throughout
• Create Templates - Once you create a section you like, you can duplicate it

Technical Tips

• Optimize Images - Use properly sized images (not too large) so your pages load quickly
• Test on Mobile - Always check how your sections look on phones and tablets
• Preview Before Publishing - Use the preview feature to see changes before saving
• Save Regularly - Don't forget to save your work!

Advanced Techniques

• Combine Section Types - Mix different sections on the same page for variety
• Use Section Headers - Add titles and descriptions to sections for better organization
• Experiment with Layouts - Try different card arrangements and see what works best

Need More Help?

This guide covers the fundamental structure of your theme. Now that you understand how Sections, Cards, and Blocks work together, you can explore:

• Detailed Section Guides - Learn about specific section types and their features
• Block Reference - Complete guide to all available blocks and their settings
• Video demos - A quick collection of how to videos