> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/introduction-to-blocks.md).

# Introduction to Blocks

Learn how the Arctos theme's block system gives you the freedom to build flexible, customized sections without writing any code.

Arctos is built around one straightforward idea: blocks are the content inside a section. A heading, a button, an image, a countdown timer. You choose what you need, drop it in, and arrange it however you like. No code required.

Sections are the frame. This page covers what goes inside them. For section-level settings such as width, height, background, and padding, see [Custom Section](/arctos-theme/section-templates/section.md).

### 1. What is a block?

A block is a single content element that lives inside a section. In the Theme Editor these are labelled **Theme blocks**.

Every visual element your customer sees is its own independent piece. You can move it, restyle it, or delete it without disturbing anything else on the page. That independence is what makes editing feel manageable rather than risky.

When you open the block picker in the Theme Editor, you'll find 7 categories:

* **Basic**: Heading, Text, Button, Image, and other everyday content elements. These cover the majority of what you'll actually build.
* **Collections and products**: These blocks are built specifically to surface your catalog and turn browsers into buyers.
* **Contact**: Forms and inquiry elements for capturing customer messages.
* **Media**: Video, image galleries, and other rich media content.
* **Layout**: This category controls how your other blocks are arranged. If something looks off on the page, a Layout block is usually where we'd look first.
* **Links**: Navigation and link-based elements.
* **Storytelling**: The blocks that give customers a reason to trust you before they buy.

{% hint style="success" %}
**Tip:** The categories above appear in every Custom section. When you're editing a specific page template, such as a Product or Collection page, you'll also see additional blocks in the picker that are unique to that template.
{% endhint %}

### 2. How blocks work

We designed the block system so you can mix and match freely inside any section. A countdown timer above a button, a video sitting next to an accordion, a testimonial tucked between two product lists. The combinations are yours to figure out.

Reordering is just dragging. Pick up a block in the Theme Editor, move it where you want it, and the layout updates immediately. Each block also carries its own settings panel for color, typography, spacing, and size, so adjusting one never ripples out to affect its neighbors.

### 3. Editing blocks in a pre-built section

Pre-built sections arrive with blocks already arranged in a sensible default order. They're a faster starting point than building from scratch, but the defaults are built to work generically, not specifically for your store. Here's how to make the blocks yours.

{% stepper %}
{% step %}
**Audit what's inside**

Once you've added a pre-built section, scan the block list in the sidebar before touching anything. Get a clear picture of what's already there and how it's structured before you start moving things around.
{% endstep %}

{% step %}
**Reorder blocks based on what actually matters**

The default order is a reasonable starting point, not a prescription. Drag blocks into an order that reflects your priorities.
{% endstep %}

{% step %}
**Remove what isn't earning its place**

Fewer blocks often means a cleaner, more focused page. If something isn't earning its place, delete it.
{% endstep %}

{% step %}
**Reconfigure each block to fit your content**

Click any block to open its settings panel. Adjust color, font size, padding, and alignment as needed. Changes stay scoped to that block only.

{% hint style="warning" %}
**Note:** Parent block settings can affect how child blocks display. If something isn't rendering the way you expect, check the settings of the containing Group or parent block before assuming the issue is with the block itself. Scan up through the layers in the sidebar first.
{% endhint %}
{% endstep %}
{% endstepper %}

### 4. Building from scratch

A new [Custom Section](/arctos-theme/section-templates/section.md) starts completely empty. You're looking at a blank canvas, which can feel daunting at first. Here's how to fill it with blocks that serve a purpose.

{% stepper %}
{% step %}
**Choose your anchor block first**

Click Add block inside your section. Start with the element that carries the most visual weight, usually a heading or a hero image. Everything else builds around this.

{% hint style="success" %}
**Tip:** Building a promotional section? Start with an Image block. Building something text-heavy like an FAQ or a brand story? A Heading block makes a better anchor.
{% endhint %}
{% endstep %}

{% step %}
**Plan your layout before adding more blocks**

Before you start adding content, think about how the blocks should be arranged. Add these [Layout blocks](/arctos-theme/blocks/layout.md) first, then place your content blocks inside them. If you skip this step and add everything as flat, top-to-bottom blocks, restructuring later means rebuilding from scratch.
{% endstep %}

{% step %}
**Add supporting blocks**

Think about what the section actually needs to do, then add only what serves that purpose. Then you can reorder blocks by dragging them up or down in the sidebar.
{% endstep %}

{% step %}
**Configure each block individually**

Click any block to open its settings panel and adjust color, font size, padding, and alignment. Same process as [reconfiguring blocks in a pre-built section](#id-3.-editing-blocks-in-a-pre-built-section), including the parent block check when something doesn't render as expected.
{% endstep %}
{% endstepper %}