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

The Arctos theme is built on a powerful, modular architecture designed around **Blocks**. Instead of being locked into rigid, predefined sections, you have the creative freedom to build your store exactly how you want it, one piece at a time.

Think of blocks as Lego pieces. Each block serves a specific purpose — like displaying a heading, a button, an image, or a countdown timer. By stacking and arranging these pieces within a **Custom Section**, you create fully customized layouts tailored perfectly to your content.

### What is a block?

A block is a single, movable content element that you can add inside any [Custom Section](https://ursus-ecom.gitbook.io/arctos-theme/~/revisions/Oc9eKS5IbPH6vPNhchzN/section-templates/custom-section).

While a section acts as the container holding everything together, the blocks are the actual content your customers see and interact with. Every text paragraph, button, image, and video on your store is an individual block.

### How the block system works

The beauty of the block system lies in its complete flexibility:

* **Mix and match:** Combine different types of blocks in a single section. You can place a video next to an accordion, or a countdown timer above a button.
* **Drag and drop to reorder:** Want your button above your text instead of below it? Simply drag the block up or down in the **Theme Editor**. The layout updates instantly.
* **Independent settings:** Every block has its own dedicated settings. You can tweak the colors, size, typography, and spacing of a single heading block without affecting anything else in the section.
* **Unlimited variations:** Because you control the exact combination and order of blocks, you can create hundreds of unique section designs without needing to hire a developer to write custom code.

### When to use blocks

You will use blocks every time you want to add, remove, or rearrange content on your store. Here are the most common scenarios:

#### 1. Building a custom layout from scratch

When you add a new Custom Section, it typically starts empty. You use blocks to build the section from the ground up, adding only the specific elements you need for your message.

{% hint style="success" icon="lightbulb" %}
**Tip:** Start with the most important element first. If you're building a promotional banner, add your Image block first to establish the visual weight, then add your Heading and Button blocks around it.
{% endhint %}

#### 2. Customizing a page template

When setting up your Product, Collection, or Blog templates, the built-in layouts are also made of blocks. You can rearrange these default blocks to completely reshape the layout.

{% hint style="info" icon="note-sticky" %}
**Note:** For example, on your Product page, you can drag the product price above the title, or place trust badges immediately beneath the "Add to cart" button to boost conversion.
{% endhint %}

#### 3. Creating structured content

Blocks are perfect for organizing complex information so it feels scannable and professional.

{% hint style="success" icon="lightbulb" %}
**Tip:**

* Use **Group blocks** to place multiple elements side-by-side (like an image next to text).

***

* Use **Accordion blocks** to condense long blocks of text into scannable FAQs, preventing endless scrolling on mobile devices
  {% endhint %}