# 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