> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mixed Text

> Create dynamic typography layouts by mixing text elements and images in a flowing, inline arrangement.

The Mixed Text section creates visually interesting text compositions by combining text elements and images that flow together naturally. Each text or image block is displayed inline, allowing you to create unique, magazine-style typography layouts.

This section is perfect for creating impact headlines, brand statements, or editorial-style content where words and visuals blend seamlessly.

<img src="https://mintcdn.com/digifist/tHzUnCAexzNz1qxo/images/theme/release/sections/mixed-text/mixed-text-overview.png?fit=max&auto=format&n=tHzUnCAexzNz1qxo&q=85&s=a0f0ca5bb6b560440e9e4b4cc291aed1" alt="Mixed text section overview" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/mixed-text-overview.png" />

## What this section controls

This section controls mixed text and image layouts with the following capabilities:

* Unlimited text and image blocks flowing inline
* Custom content width and alignment
* Rich text support with links
* Inline images between text elements
* Optional CTA button below content
* Flexible color schemes

## How the Mixed Text section works

The Mixed Text section displays content in a flowing layout:

* Add unlimited text or image blocks
* Each text block represents a word or phrase
* Images render inline with text flow
* Content wraps naturally based on width
* Optional button appears below all content

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Mixed Text section">
    Add the section to your desired page or template.
  </Step>

  <Step title="Add content blocks">
    Click **Add Text** or **Add Image** to build your mixed layout.
  </Step>

  <Step title="Configure styling">
    Set content width, alignment, and color scheme.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/tHzUnCAexzNz1qxo/images/theme/release/sections/mixed-text/mixed-text-location.png?fit=max&auto=format&n=tHzUnCAexzNz1qxo&q=85&s=c6be443365f05c04207aed6acdf196aa" alt="Mixed text section in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/mixed-text-location.png" />

## Section settings

Section settings control layout, styling, and optional CTA button.

<Tabs>
  <Tab title="Layout">
    ### Content width

    Controls the width of content area.

    **Range:** 40 – 100

    **Unit:** %

    **Default:** 100

    <Note>
      This setting applies to desktop devices only.
    </Note>

    ### Content alignment

    Controls horizontal and vertical alignment of all content.

    **Available options:**

    * **Start:** Left/top aligned
    * **Center:** Center aligned
    * **End:** Right/bottom aligned

    **Default:** Start

    <img src="https://mintcdn.com/digifist/tHzUnCAexzNz1qxo/images/theme/release/sections/mixed-text/content-layout.png?fit=max&auto=format&n=tHzUnCAexzNz1qxo&q=85&s=17802b0df570cc4a2861347e458064b8" alt="Content width and alignment" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/content-layout.png" />
  </Tab>

  <Tab title="Button">
    ### Button label

    Text for optional button below content.

    * Leave empty to hide button

    <Tip>
      The button appears below all text and image blocks.
    </Tip>

    ### Button link

    Destination URL for button.

    * Shopify URL selector

    ### Button style

    Controls button visual style.

    **Available options:**

    * **Filled:** Solid background button
    * **Outlined:** Bordered button
    * **Default:** Text link style

    **Default:** Outlined

    <img src="https://mintcdn.com/digifist/p_8JusJBkPSwHVox/images/theme/release/sections/mixed-text/button-settings.png?fit=max&auto=format&n=p_8JusJBkPSwHVox&q=85&s=a8e892fa03e88e303e2dd0b9a655cc24" alt="Button configuration" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/button-settings.png" />
  </Tab>

  <Tab title="Settings">
    ### Section width

    Controls the maximum width of section container.

    **Available options:**

    * **Page:** Standard page width
    * **Narrower:** Narrower than page width
    * **Fluid:** Wider than page width

    **Default:** Fluid

    ### Color scheme

    Controls background and text colors for the section.

    * Shopify color scheme selector
    * **Default:** Scheme 1

    ### Spacing top

    Controls spacing above the section.

    **Available options:** No, S, M, L, XL

    **Default:** No

    ### Spacing bottom

    Controls spacing below the section.

    **Available options:** No, S, M, L, XL

    **Default:** No

    <img src="https://mintcdn.com/digifist/p_8JusJBkPSwHVox/images/theme/release/sections/mixed-text/section-settings.png?fit=max&auto=format&n=p_8JusJBkPSwHVox&q=85&s=4a49b7b8189780388a0bf883a6660263" alt="Section width and spacing" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/section-settings.png" />
  </Tab>
</Tabs>

## Block settings

The Mixed Text section supports two types of blocks: Text and Image.

<Tabs>
  <Tab title="Text Block">
    ### Type

    **tile**

    ### Name

    Text

    ### Text

    Content for this text element.

    * Inline rich text supported
    * Can contain links (rendered as single block)
    * Each block typically contains one word or phrase

    <Note>
      Text blocks are displayed inline with other blocks. If text contains links, it's rendered differently to preserve link functionality.
    </Note>

    <img src="https://mintcdn.com/digifist/tHzUnCAexzNz1qxo/images/theme/release/sections/mixed-text/text-block.png?fit=max&auto=format&n=tHzUnCAexzNz1qxo&q=85&s=be72a1ac7f9960baf89561a47190f60e" alt="Text block configuration" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/text-block.png" />
  </Tab>

  <Tab title="Image Block">
    ### Type

    **image**

    ### Name

    Image

    ### Image

    Image to display inline with text.

    * Shopify image picker
    * Flows with text elements
    * Displays placeholder if not set

    <Tip>
      Use images to break up text and add visual interest. They flow naturally with text blocks.
    </Tip>

    <img src="https://mintcdn.com/digifist/tHzUnCAexzNz1qxo/images/theme/release/sections/mixed-text/image-block.png?fit=max&auto=format&n=tHzUnCAexzNz1qxo&q=85&s=d5484afbc16262e3c5e382fd20cdf7cb" alt="Image block configuration" width="3280" height="2186" data-path="images/theme/release/sections/mixed-text/image-block.png" />
  </Tab>
</Tabs>

## Best practices

* Use text blocks for individual words or short phrases to create flowing layouts
* Mix images between text elements to create visual rhythm and break up typography
* Keep content width at 80-100% for optimal readability on larger screens
* Use links sparingly in text blocks to maintain visual flow and avoid breaking layout
* Strategic image placement creates natural visual breaks without disrupting the reading flow
* Consider alignment based on surrounding sections for visual consistency
* Test with different color schemes to ensure proper contrast and readability
* Limit total blocks to 10-15 for optimal performance and manageable layout
* Use center alignment for impact headlines and brand statements
* Start/end alignment works better for paragraph-style mixed content

## Common use cases

* **Hero headlines** - Create bold, mixed typography for homepage hero sections
* **Brand statements** - Display company values or mission with integrated imagery
* **Campaign taglines** - Build visually striking marketing messages
* **Feature highlights** - Mix descriptive text with feature icons or images
* **Editorial layouts** - Magazine-style text compositions with inline media
* **Call-to-action sections** - Engaging CTAs with mixed text and visual elements
* **Product benefits** - List benefits with inline product images or icons

## Related guides

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>