Collapse
An essential block for product pages with rich or detailed information
The Collapse block is one of the most important blocks on the product page, especially if you need to present a lot of information without overwhelming the customer. It helps keep the layout clean and scannable while still making detailed content easily accessible.
This block can be used for any type of product-related information. Most commonly, the first collapse is used for the main product description, as every product typically includes one. After that, you can stack multiple Collapse blocks to present additional information such as shipping details, payment methods, return policies, care instructions, or any other relevant content.
If you need to show different information for different products, you can achieve this by using dynamic sources, which are covered further below.
Configuration
The Collapse block offers the following settings:
Content
Title – The heading of the collapse. This is the only text visible when the collapse is closed.
Title font size – Adjusts the title size as a percentage relative to the main body text.
Title text transform – Controls the capitalization of the title. Available options:
None
Capitalize
Lowercase
Uppercase
Title letter spacing – Fine-tunes the spacing between letters in the title.
Icon – Optional icon displayed at the beginning of the collapse title. We recommend using SVG icons for best results.
Description – The content shown inside the collapse. This content is hidden when the collapse is closed.
Page – Allows you to pull content dynamically from a page. This is commonly used for features like the Size Chart, where the page content is displayed inside the collapse.
Open by default – When enabled, the collapse is expanded by default. This is typically used for the first collapse, such as the main product description.
Button
Button label – Text displayed on a button below the description. Leave empty to disable the button.
Button URL – The link the button points to.
Button color – Controls the button style. Available options:
Link
Primary
Outline
Accent
The Collapse block is ideal for organizing complex product information in a user-friendly way, improving readability while keeping your product pages clean and conversion-focused.
How to connect a metafield
As mentioned above, you will often want to display information that is specific to each product. A common example is the product description or additional product-specific details. In these cases, you should connect a dynamic source (metafield) to the relevant block setting. Typically, the title of a block can stay the same across products, while the description pulls dynamic data.
Step 1: Create the metafield
Before connecting a metafield, you first need to create it in your Shopify admin:
Go to Settings → Metafields and metaobjects.
Select Products.
Click Add definition to create a new metafield.
Choose a Name and Namespace & key.
Set the Type of the metafield.
For Collapse descriptions, a Rich text type is recommended.
A Textarea type can also work, depending on your content needs.
Save the metafield.
The most important part of this process is selecting the correct metafield type, so it matches the block setting you plan to connect it to.
Step 2: Connect the metafield to the block
Once the metafield is created:
Open the Collapse block (or any other block that supports dynamic sources).
Locate the Description setting.
Click the dynamic source icon in the top-right corner of the setting.
Select the metafield you created from the list.
Using the default product description
For the main product description, you don’t need to create a metafield. Shopify’s standard product description field is available by default and will appear automatically when you click the dynamic source icon. You can simply select it and use it directly.
Using metafields in this way allows you to create flexible, scalable product pages where each product can display unique content while maintaining a consistent layout and structure.
Last updated