> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/collections/text-collection-+-media.md).

# Text collection + Media

The Text Collection + Media section displays a list of collections as clickable text links with interactive images that change when you hover over each collection name. Images can appear as a background behind the text or alongside it, creating an engaging visual experience that helps customers discover your product collections.

{% hint style="info" %}

### How to set it up

1. Go to **Online Store > Themes > Customize**.
2. Open **Sections > Text collection + media**.
3. Preview your changes live, then click **Save**.
   {% endhint %}

### Settings

#### Content

* **Collections**: Select which collections to display. You can add up to 50 collections. You can create and manage collections in your Shopify admin under Products > Collections.

#### **Heading**

* **Heading**: Enter a title for this section, such as "Shop by Category" or "Our Collections". Leave blank to hide the heading.
* **Heading size**: Choose how large the heading appears, from XS (extra small) to 2XL (extra extra large).
* **Underline**: When enabled, adds a decorative underline beneath the heading.
* **Header text position**: Controls where the heading appears horizontally - left, center, or right.

#### Layout

* **Image display**: Choose how images appear - as a background behind the collection text, or as a side image next to the text.
* **Side image position**: When image display is set to "Side", choose whether the image appears on the left or right side of the text.
* **Height**: Set the minimum height of the section - Auto (adapts to content), Small, Medium, or Large. This helps ensure consistent spacing and visual balance.
* **Color scheme**: Select a color scheme for the section background and text.
* **Full width**: When enabled, the section stretches across the entire width of the page instead of being contained within the standard page width.
* **Remove space between image and content**: When enabled, removes the gap between the image and text content when using side image display. This creates a seamless, connected look.
* **Enable custom border settings**: When enabled, allows you to customize borders and border radius for the image and content areas separately from your theme's global settings.
* **Horizontal space**: Adjust the horizontal spacing between the image and content when custom borders are enabled and gapless grid is disabled (1 to 30 pixels).
* **Image border width**: Set the border width around the image area (0 to 10 pixels). Only available when custom borders are enabled.
* **Image border radius**: Set the corner roundness of the image area (0 to 50 pixels). Only available when custom borders are enabled.
* **Content border width**: Set the border width around the text content area (0 to 10 pixels). Only available when custom borders are enabled.
* **Content border radius**: Set the corner roundness of the text content area (0 to 50 pixels). Only available when custom borders are enabled.

#### Effects

* **Image behavior**: Choose how images animate when displayed - None (static), Ambient movement (subtle motion), Fixed background position, or Zoom in on scroll.
* **Overlay color**: Choose a color for the overlay that appears over background images. This helps ensure text remains readable over images.
* **Overlay opacity**: Adjust how transparent or opaque the overlay appears (0 to 100%). Higher values make the overlay more visible and text easier to read.

#### Content

* **Text size**: Choose the size of the collection link text, from 4XS to 3XL.
* **Position**: Controls where the collection text appears horizontally - left, center, or right.
* **List vertical alignment**: Choose how the collection list is positioned vertically within the section - Top, Center, or Bottom.
* **Separator**: Choose the character or symbol that appears between collection names - Comma, Dot, Pipe, Bullet, Dash, Diamond, Heart, Star, or Four Pointed Star.
* **Content color scheme**: Select a separate color scheme for the text content area, allowing it to differ from the main section background.

#### Mobile layout

{% hint style="info" %}
On mobile, collections appear in an accordion format where customers can tap to expand and see collection images and buttons.
{% endhint %}

* **Text size**: Choose the size of collection names on mobile devices, from 4XS to 3XL.
* **Text alignment**: Controls how collection names align on mobile - left, center, or right.
* **Button style**: Choose the style of the "View all" button that appears on mobile - Solid button, Outline button, or Transparent button.
* **Full width**: When enabled, the mobile layout stretches to the full width of the screen with no side margins.

#### Padding

* **Top**: Adjust the spacing above the section (0 to 400 pixels).
* **Bottom**: Adjust the spacing below the section (0 to 400 pixels).

***

### Tips

* Use background image display for a bold, immersive experience where collection images fill the entire section behind the text.
* Use side image display for a more structured layout that clearly separates text and images.
* Add an overlay with higher opacity when using background images to ensure collection names remain readable.
* Choose separators that match your brand style - commas for a clean look, or decorative symbols like stars or hearts for a more playful feel.