# Adding sections

**Sections** are the basic components of templates. You can add, rearrange, and customize sections to create the layout and content of your pages.

## Add sections

***

Sections are listed in the theme editor **sidebar** in the order they appear on the page.

* Click the **(+) Add section** button in the theme editor sidebar.
* Use the **drag handles** (**⋮⋮**) to change the order of your sections and blocks
* Use the **Remove section** button to delete them or click the **eye icon** to hide them.

![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FOc7CZ3cBXgofje5SAvRh%2Feditor-section-setup.jpeg?alt=media\&token=36fcfd87-2655-4421-be1e-d853f6511ddc)

### Add blocks

***

Most sections are made up of individual **Blocks** for text, media, buttons, or other content, which are nested under sections in the editor panel.

* Click **(+) Add block** button to add or select the type of block you wish to add.
* Click the **block** to open the block settings.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Femw8OhcwYBCnvkqEiGDq%2Fshopify-content-drag-handles.png?alt=media&#x26;token=227e3475-9cac-49b9-9e28-d6c1f1c50843" alt="" width="302"><figcaption></figcaption></figure>

### **Edit sections and blocks**

***

Click directly on a **Section** or **Block** to open the settings in the side panel. For step-by-step instructions, see the individual section articles.

## **Available theme sections**

***

For all templates (except Checkout), Cornerstone includes 25+ sections with different content blocks, layouts, and features. Go to our theme sections guide for a full overview:

{% content-ref url="../../pages/theme-sections" %}
[theme-sections](https://help.fluorescent.co/cornerstone/pages/theme-sections)
{% endcontent-ref %}

&#x20;

***

> **Related links**\
> [Theme sections](https://help.fluorescent.co/cornerstone/pages/theme-sections)\
> [Header](https://help.fluorescent.co/cornerstone/header/header)\
> [Footer](https://help.fluorescent.co/cornerstone/footer/footer)\
> [Product blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)
