# Add and style sections

After installing a Studio section, it will be available in your theme editor to add on any page, just like any other theme section.

### Add section to template

***

Your installed sections will appear in the **Add section** list of your theme editor. You can add and re-use sections on any template (except Checkout).

All Studio sections appear in their own category and start with a ✳︎ symbol.

{% columns fullWidth="false" %}
{% column width="66.66666666666666%" %}
{% hint style="info" %}

#### Steps

1. Select the template you want to add the section.
2. Click <i class="fa-circle-plus">:circle-plus:</i> **Add section** in the theme editor's left side panel.
3. Find and select an installed Studio section.
   {% endhint %}

{% hint style="success" %}
**Tip**  You can rename sections in the theme editor to make them easier to manage. Click a section, then click the section name at the top of the settings panel to change it.
{% endhint %}
{% endcolumn %}

{% column width="33.333333333333364%" %}

<figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FPwIiV1qQzokKN3G2vvOD%2Fstudio-sections-select.png?alt=media&#x26;token=cef0463d-abcb-49c8-93b1-b2379567468b" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Customize section

***

Studio sections are customized just like any other theme section. There are **section settings** for content and styles, and **global styles** for all design elements that apply to all Studio sections.

{% columns %}
{% column width="75%" %}
{% hint style="info" %}

#### Steps

1. Click the **Section** to edit section settings.
2. Add **Blocks** (when available) and click them to edit block settings.
3. Clic blocks under the [**Global styles**](https://help.fluorescent.co/section-studio/sections/global-styles) section to customize the design for all Section Studio sections added to your theme.
   {% endhint %}
   {% endcolumn %}

{% column width="25%" %}

{% endcolumn %}
{% endcolumns %}

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Available sections</strong></mark></td><td><a href="../sections/sections-overview">sections-overview</a></td></tr><tr><td><mark style="color:blue;"><strong>Customize global styles</strong></mark></td><td><a href="../sections/global-styles">global-styles</a></td></tr></tbody></table>
