For the complete documentation index, see llms.txt. This page is also available as Markdown.

How to show product-specific content in collapsible accordions

The Product section in your Default product template includes a Collapsible row block – the expandable accordion that customers can click to reveal more info (like sizing, materials, shipping details, etc.).

The problem: If you type directly into the Row content field, that same text will show on every product using that template.

The solution: Instead of typing static text, you can connect the collapsible row to a metafield – a custom field that pulls in unique content for each product. This way, you use one template but display different content per product.

Example: Adding a "Fit & Sizing" Collapsible Row

Part 1: Create the metafield definition

  1. In your Shopify admin, go to Settings → Custom data (listed under Metafields & metaobjects in some versions).

  2. Select Products.

  3. Click Add definition.

  4. Enter a name – for this example: Fit & Sizing.

  5. Under Type, keep One selected and choose Rich text. Rich text lets you format the content with bold, lists, links to your FAQ, etc.

  6. Click Save.

Part 2: Add content to your products

  1. Go to Products in your Shopify admin and open a product.

  2. Scroll down to the Metafields section and find the Fit & Sizing field you just created.

  3. Enter the product-specific text and click Save.

  4. Repeat for every product that should display this collapsible.

Part 3: Connect the metafield to the collapsible block in your theme

  1. Open the Theme editor (Online Store → Themes → Customize).

  2. Navigate to your Default product template.

  3. Under the Product information section, click Add block and select Collapsible.

  4. In the Heading field, enter: Fit & Sizing.

  5. In the Text field, clear any placeholder text, then click the Connect dynamic source icon (the small icon at the top-right corner of the field).

  6. In the panel that opens, make sure you're viewing the Product source. (If it says "Nearest > Page", go back and select "Product" instead.)

  7. Find and select the Fit & Sizing metafield.

  8. The Text field should now show a dynamic source tag instead of static text (see screenshot below).

  9. If you've already filled in the metafield for the product you're previewing, the collapsible should appear in the preview.

  10. Click Save.

Once connected, the metafield shows up as a blue badge in the Text field

Tips

  • No content? No collapsible. If a product doesn't have a value in the metafield, the collapsible block won't appear for that product – so you don't need a separate template for products that shouldn't show it.

  • Reuse this approach for other collapsibles like "Materials & Care", "Shipping Info", "Ingredients" or "Returns Policy."

  • Rich text formatting lets you add links, bold text, and lists inside your collapsible content – handy for linking to your FAQ or size chart pages.

The Collapsible block is also available in the Featured product section – a standalone product section that can be added to any page in your theme (like your homepage or landing pages). If you're using a Featured product section, make sure to set up the same collapsible blocks and dynamic source connections there too, as it's configured separately from your product template.

Last updated

Was this helpful?