# Text Block Section

### **What You’ll Learn**

* How to add and format subtitle and body text
* How to control alignment, font size, and colors
* How to enable animation effects
* How to upload and apply custom fonts

***

### 🧩 Section Overview

The Text Block section is perfect for storytelling, mission statements, or brand descriptions. You can add a **subtitle**, a **main text block**, and customize layout, typography, and spacing for both desktop and mobile.

***

### How to Add the Section

1. In the **Shopify Theme Editor**, click **Add section**
2. Choose **Text Block**
3. Position it in your layout as needed

***

### Content & Data

* **Subtitle**: A small label or intro line (e.g., “ABOUT US”)
* **Main Text**: The primary paragraph text
* Both fields support plain text only (no HTML or rich formatting)

***

### Layout & Display

* **Subtitle Alignment**: Choose left, center, or right
* **Text Alignment**: Choose left, center, or right

> 💡 Tip: Center alignment works well for short mission statements or quotes

***

### Typography Settings

#### Fonts

You can choose from built-in fonts or upload your own.

* **Subtitle Font** and **Text Font**: Pick from dropdown
* **Enable Custom Font**: Toggle this ON to use your own

To use a **custom font**, follow these steps:

#### 🛠️ How to Add a Custom Font

1. Upload your font file (usually `.woff2`) to **Settings > Files** in Shopify Admin
2. Copy the file URL
3. In the Text Block settings:
   * Paste the **font name** (e.g., "MyCustomFont") into `Custom Subtitle Font Name` or `Custom Text Font Name`
   * Paste the **file URL** into `Custom Subtitle Font URL` or `Custom Text Font URL`

Once saved, your text will render using the custom font you uploaded.

***

#### Font Sizes

Adjust font sizes separately for desktop and mobile:

* **Subtitle Font Size** (Desktop / Mobile)
* **Text Font Size** (Desktop / Mobile)
* Toggle **Bold Subtitle** or **Bold Text** for added emphasis

***

### Colors

* **Background Color**: Solid or gradient background
* **Subtitle Color**
* **Text Color**

All colors are set using hex codes or Shopify's color picker.

***

### Styling

* **Text Animation**: Choose from:
  * No Animation
  * Typewriter
  * Fade Up
  * Reveal

Animations apply to the main text only and trigger as the section scrolls into view.

***

### Spacing

Control top and bottom padding for both desktop and mobile:

* **Top Spacing (Desktop / Mobile)**
* **Bottom Spacing (Desktop / Mobile)**
* Toggle **Remove Section Padding** to flush the section edge-to-edge

> 💡 Use increased spacing when stacking this section between media-heavy blocks.

***

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/readme-1/sections-and-features/text-block-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.