Collapsible Drawer

The Collapsible Drawer block displays additional product information in an expandable drawer panel on the product page. It is ideal for presenting content such as how-to instructions, ingredients, delivery policies, or any other supplementary details in a clean and space-saving way.

Mobile view example

Main Settings

Heading: Enter the title displayed on the collapsible drawer tab. Include a heading that clearly explains the content inside.

A Shopify-hosted video: Select a video to display within the drawer content area.

Image: Upload an image to display within the drawer content area.

Tab content: Add the main body content displayed when the drawer is expanded. Rich text formatting options are available. To insert a variant metafield, use the format: [[metafield_name]] — for example: [[width]].

Variant metafield variables: Define variant metafield keys using the format variable_name:namespace.key. The metafield type should be a single-line text.

Tab content from page: Select an existing page from your Shopify store to use as the drawer content.

Icon

Settings for the icon displayed next to the heading.

Image: Upload a custom image to use as the icon.

Icon: Choose an icon from the built-in icon library.

More icon settings: Enable this toggle to access additional icon configuration options.

Icon scale desktop: Define the size of the icon on desktop.

Icon scale mobile: Define the size of the icon on mobile devices.

Icon top margin desktop: Adjust the spacing above the icon on desktop.

Icon top margin mobile: Adjust the spacing above the icon on mobile devices.