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: [e-mail]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website