# Collection Description

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F0UA5EeKFE1zSMIVozy9Q%2Fcol_descr_opt.png?alt=media&#x26;token=475d8228-a249-4c21-b54d-7ee1a21937b3" alt=""><figcaption></figcaption></figure>

***

#### **Purpose**

This option is used to present a short or detailed overview of the collection — such as product highlights, category information, or marketing text.\
For example, a “Summer Collection” page might include a brief introduction about seasonal trends or materials used in the products.

{% hint style="info" %}
**Template -> Collection description**
{% endhint %}

## **Layout** <a href="#layout-1" id="layout-1"></a>

The Collection description will be displayed for collections that have a description added in Shopify admin -> Products -> Collections:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fzfc0JmIDZuPGXkhbB0Ui%2Fcol_descr.png?alt=media&#x26;token=b7468ffb-712a-4676-849b-70f0a7b5d270" alt=""><figcaption></figcaption></figure>

If you need to disable the section, press on an eye icon in the theme Editor -> Collections -> Collection Description:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FwGIBXrveFM9OLmvZNbUx%2Fcol_descr_hide.png?alt=media&#x26;token=e42cc05c-22b2-403e-9694-db1306444bc4" alt=""><figcaption></figcaption></figure>

## **Collection Description — Options Reference**

| **Option Group**  | **Option Name**            | **Values / Range**            | **Description**                                                                                                                                       |
| ----------------- | -------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Layout**        | **Top spacing**            | None, Small, Medium, Normal   | Controls the amount of vertical space above the collection description section.                                                                       |
|                   | **Width**                  | Default, Boxed, Wide          | Defines the horizontal width of the section. *Wide* is optimized for screens 1440px and above.                                                        |
|                   | **Text align**             | Left, Center                  | Aligns the description text within the section.                                                                                                       |
|                   | **Text width**             | Numeric / percentage value    | Sets the maximum width of the text area on desktop for better readability.                                                                            |
|                   | **Text width mobile**      | Numeric / percentage value    | Defines the text area width on mobile devices to improve visual balance.                                                                              |
|                   | **Show text box**          | Toggle (on/off)               | Displays the collection description inside a text container for better contrast or emphasis.                                                          |
|                   | **Text box opacity**       | 0–100%                        | Adjusts the transparency of the text box background. Lower opacity allows the background image to be partially visible.                               |
|                   | **Text box color**         | Color picker                  | Selects the background color of the text box, visible when the box is enabled.                                                                        |
| **Dividing Line** | **Show dividing line**     | Toggle (on/off)               | Displays a horizontal line below the collection description to visually separate it from the product grid or next section.                            |
| **Background**    | **Background type**        | Hide, Color, Gradient, Image  | Defines the background style behind the collection description. Choose solid color, gradient, or image background.                                    |
|                   | **Desktop height**         | Auto, Fixed, Image height     | Determines the vertical height of the background area on desktop. *Auto* adjusts dynamically; *Fixed* or *Image height* keeps a consistent height.    |
|                   | **Mobile height**          | Auto, Fixed, Image height     | Sets the height behavior for mobile screens.                                                                                                          |
|                   | **Image position**         | Top, Center, Bottom           | Controls the focal point of the background image across all devices.                                                                                  |
|                   | **Image size**             | Full background size, Contain | Sets how the background image scales. *Full background size* covers the section completely, while *Contain* fits the entire image within the section. |
|                   | **Width**                  | Fullwidth, Content width      | Defines whether the background spans the full browser width or stays within the main content area.                                                    |
|                   | **Top and bottom spacing** | None, Small, Medium, Normal   | Adjusts vertical padding above and below the section for layout spacing.                                                                              |
|                   | **Remove bottom spacing**  | Toggle (on/off)               | Removes the extra space below the section for a seamless transition into the next block or product grid.                                              |
| **Colors**        | **Base**                   | Color picker                  | Sets the main text color for the collection description content.                                                                                      |
|                   | **Lines**                  | Color picker                  | Defines the color of dividing lines (if enabled) for visual separation.                                                                               |

#### **Notes**

* The **Collection Description** section displays text from the Shopify collection’s built-in *Description* field.
* This section helps merchants present informative or promotional text at the top of collection pages — such as brand details, style notes, or seasonal messages.
* Combine **Background** and **Text box** options for a visually striking hero banner effect.
* Adjust **Text width** and **Alignment** to ensure readability on all devices.
* The **Wide** layout and **Fullwidth background** settings are ideal for immersive, edge-to-edge designs.

***

## Dividing line

If the line is enabled the Width can be set as: **Full width** or **Content width**.

{% hint style="info" %}
Doesn't work on mobile phone
{% endhint %}

***

## Background

Background has the following modes:

* Hide
* Color
* Gradient
* Image

If some option is chosen the Image field, Gradient field or Color field will appear to  be set.

**Desktop height/Mobile height**

Can be set as Auto, Fixed, Image height separately for desktop and mobile versions.

**Desktop fixed height**

Available if the Background is set as Image. Can be chosen from 200 to 1000px.

{% hint style="info" %}
This option applies only for desktop screens (width > 577px) and the previous height option is set to Fixed.
{% endhint %}

**Image position** can be set as Top, Center, Bottom. Works for all screens.

**Image size** can have Full background size or Contain option. Works for all screens.

**Width** can be as Full width or Contain width.

**Top, bottom spacing** can be None, Small, Medium, Normal.

**Remove bottom spacing** can be enabled/disabled.

***

## Colors

Available colors include: Base, Lines.
