> 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/blocks/heading.md).

# Heading

Add clear, prominent headings to your sections — with full control over size, alignment, and SEO structure.

The Heading block adds a bold, prominent title to any section on your storefront. Use it to introduce sections, label content areas, or create eye-catching headlines that guide customers through your page.

Unlike the Text block (which is designed for paragraphs and body copy), the Heading block is purpose-built for short, impactful titles. It gives you precise control over text size, font style, color, and the HTML heading tag — so your headings look great *and* support your store's SEO.

### 1. What you can do

* Add a clear, prominent heading to any section
* Choose the HTML heading level (H1–H6) for search engine optimization
* Pick from preset typography styles or create fully custom sizing
* Control width, alignment, and spacing independently for desktop and mobile
* Apply different color presets to match your section's design

***

### 2. Where you can use this block

| Section                | Maximum per section |
| ---------------------- | ------------------- |
| **Any Custom Section** | Unlimited           |

***

### 3. How to add this block

1. In the **Theme Editor (Customize)**, click the section where you want to add a heading.
2. Click **Add block**.
3. Select **Heading** from the block list.
4. Type your heading text and adjust the settings described below.
5. Drag the block to your desired position within the section.
6. Click **Save**.

***

### 4. Block settings

These settings let you control how your heading appears on the storefront — including the text content, visual size, alignment, and SEO tag.

#### Content

**Heading**

The text that appears as your heading on the storefront. Write something clear, concise, and relevant to the content that follows — this is the first thing customers read in your section.

You can use bold or italic formatting within the heading to emphasize specific words, which will follow your theme's global typography styling.

{% hint style="success" icon="lightbulb" %}
**Tip:** Keep headings short and direct — 3 to 8 words works best. Short headings are easier to scan, especially on mobile devices.
{% endhint %}

***

**Heading tag**

Controls the HTML heading level used in your page's code. This is important for SEO — search engines use heading tags to understand the structure and hierarchy of your content.

The heading tag does **not** change how the heading looks on your storefront (that's controlled by the **Preset** setting below). It only affects how search engines read your page structure.

| Option    | Description                                                                                                  |
| --------- | ------------------------------------------------------------------------------------------------------------ |
| **H1**    | The most important heading on a page. Use only once per page (typically for the main page title).            |
| **H2**    | A major section heading. Use for top-level content sections.                                                 |
| **H3–H6** | Sub-section headings, progressing in importance from H3 (most important) to H6.                              |
| **P**     | Renders as a paragraph element. Use when you want the visual appearance of a heading without the SEO weight. |

{% hint style="info" icon="note-sticky" %}
**Note:** Visual size and SEO tag are independent. You can make a heading look large using the *Display* preset while keeping it as an H2 — or make it look small while tagging it as H1. Choose the tag based on your content hierarchy, not appearance.
{% endhint %}

***

#### Layout

**Width**

Controls how much horizontal space the heading occupies within the section.

| Option     | Description                                                                                                                  |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Fit**    | The heading takes up only as much width as the text needs. Best for short headings that you want to align naturally.         |
| **Fill**   | The heading stretches to fill the entire available width. Useful when you want text alignment options (left, center, right). |
| **Custom** | Set an exact width in pixels or percentage. Useful for controlling line breaks on longer headings.                           |

***

**Text alignment**

Controls how the heading text is positioned within its container. This setting appears when **Width** is set to *Fill* or *Custom*.

**Options:** *Left / Center / Right*

{% hint style="success" icon="lightbulb" %}
**Tip:** Centered headings work well for hero sections and standalone announcements. Left-aligned headings are better for content-heavy sections where the heading introduces body text below.
{% endhint %}

***

**Custom on mobile**

When enabled, you can set a different width and alignment specifically for mobile devices. This is especially useful when a large, centered desktop heading needs to switch to left-aligned on smaller screens for better readability.

{% hint style="success" icon="lightbulb" %}
**Tip:** Large, centered headings often look great on desktop but can feel awkward on mobile. Enable this toggle to set a left-aligned, full-width layout for phones — your customers will have a much easier time reading it.
{% endhint %}

***

#### Typography

**Preset**

Applies a predefined typography style to your heading, pulling from your theme's global font settings. This is the fastest way to control how your heading looks.

| Option            | Description                                                                           |
| ----------------- | ------------------------------------------------------------------------------------- |
| **Default**       | Uses the standard heading style from your theme settings.                             |
| **Display**       | Extra-large, attention-grabbing text. Best for hero sections and promotional banners. |
| **Heading 1 → 6** | Matches the visual style of H1 through H6 headings defined in your theme settings.    |
| **Custom**        | Opens detailed typography controls so you can fine-tune every aspect manually.        |

{% hint style="info" icon="note-sticky" %}
**Note:** The *Display* preset creates the largest text size available. It's designed for short, impactful phrases — not full sentences.
{% endhint %}

***

**Custom settings (when Preset is set to *****Custom*****)**

When you select the *Custom* preset, you gain full control over every typography detail:

* **Font style** — Choose between your theme's *Heading* font or *Body* font.
* **Size** — Set the exact font size in pixels.
* **Line height** — Adjust the vertical space between lines of text (as a percentage). Increase this for multi-line headings to improve readability.
* **Letter spacing** — Control the horizontal space between individual characters. A slight increase can give headings a more open, elegant feel.
* **Font weight** — Choose how bold the text appears, from *Light* to *Extrabold*. The available weights depend on the font family you've selected in your theme settings.
* **Case** — Apply automatic text transformations: *Uppercase* makes all letters capital, *Capitalized* capitalizes the first letter of each word.

{% hint style="warning" icon="triangle-exclamation" %}
**Warning:** The available font weights depend on which font you've installed. If you select *Extrabold* but your font doesn't include that weight, the browser will approximate it — which may not look as polished.
{% endhint %}

***

**Color preset**

Controls the color of your heading text by pulling from your theme's global color palette. This lets you differentiate headings visually without manually picking colors.

| Option        | Description                                                                                    |
| ------------- | ---------------------------------------------------------------------------------------------- |
| **Heading**   | Uses your theme's primary heading color. Best for main section titles.                         |
| **Subtitle**  | A slightly muted color, ideal for secondary headings or supporting titles.                     |
| **Label**     | Typically a smaller, lighter color used for category labels or tags.                           |
| **Paragraph** | Uses your body text color. Useful when you want the heading to blend with surrounding content. |

***

**Custom on mobile (Typography)**

When enabled, you can set separate typography settings specifically for mobile devices — including a different font size, weight, and line height. This ensures your headings remain readable and well-proportioned on smaller screens.

{% hint style="success" icon="lightbulb" %}
**Tip:** A heading that looks perfect at 48px on desktop may overwhelm a phone screen. Enable this toggle and reduce the mobile font size to keep your layout clean and readable on all devices.
{% endhint %}

***

#### Spacing

**Custom padding**

Controls the amount of empty space around the heading block, separating it from neighboring blocks above and below. You can set different padding values for each side (top, bottom, left, right) and define separate values for mobile devices.

{% hint style="success" icon="lightbulb" %}
**Tip:** Use padding to create visual breathing room around your heading. A heading with generous top padding and minimal bottom padding creates a natural flow into the content below it.
{% endhint %}

***

### 5. How to use it effectively

#### Creating a section header

The most common use case — adding a clear title at the top of a section:

1. Add a **Heading** block as the first block in your section.
2. Set the **Heading tag** to *H2* (for most sections) or *H3* (for subsections).
3. Choose a **Preset** that matches your desired visual size — *Heading 2* for standard sections, *Display* for hero areas.
4. Set **Width** to *Fill* and **Text alignment** to *Center* if you want a centered section header.

#### Building a hero headline

For a large, attention-grabbing headline in a hero or banner section:

1. Add a **Heading** block and write a short, compelling phrase (3–6 words).
2. Set the **Preset** to *Display* for maximum visual impact.
3. Set the **Heading tag** to *H1* (use this only once per page for the best SEO value).
4. Enable **Custom on mobile** and reduce the font size so the headline doesn't overwhelm small screens.

***

### 6. Tips & best practices

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

* Use only one H1 heading tag per page. Search engines expect a single H1 that describes the page's main topic. All other headings should use H2 or lower.

***

* Visual size and heading tag are two separate concerns. Don't choose an H1 tag just to make text bigger — use the **Preset** or **Custom** typography settings instead.

***

* Very large headings on mobile can push important content below the fold. Always preview your heading on the mobile viewport in the Theme Editor before saving. 
  {% endhint %}

{% hint style="info" icon="note-sticky" %}
**Note:** If you need formatted text with line breaks, bullet points, or links, use the **Text** block instead. The Heading block is designed for clean, single-line titles without paragraph formatting.
{% endhint %}