Set up expandable blocks of content in products

This guide aims to cover adding expandable blocks in products. Expandable blocks are areas of static or dynamic content that can be added in each product’s page and can contain additional product information like Ingredients, Shipping information, Handling information, Size guides etc.

For this guide we’ll be using as a reference the Athens Pharma theme preset.

The Expandable block

When you navigate to a product in the customizer, you’ll find a list of all its blocks under the “Product information” section on the right.

By default, you should see the Description block, which is similar to the Expandable block but is hardcoded to always display the product’s description as set from its edit screen. The “Description” block always renders on the left of your product’s main information (on desktop viewports) and right under the media gallery.

If you wanted to display more content above or under the product’s description on the left, you would use the Expandable block.

To add an Expandable block simply click on “Add block” and select “Expandable“.

The Expandable block contains the following settings:

• Heading: The title of the content (i.e. Shipping information, Important info, etc)
• Icon: Optionally select an icon to accompany the title.
• Text: The content of your block.
• Page content: Select a page to display its contents in the expandable block. This will override the Text content above, if set.
• Start expanded: Whether to start the block expanded or collapsed. By default all Expandable blocks start collapsed.

Please note that adding an expandable block to a product will add it on all products (as generally that’s how blocks work). Similarly, adding static text as the content of your block will display it on all products.

Below we’ll cover how you can set up different, dynamic, content (per product) using expandable blocks.

Setting up different text per product with Expandable blocks

To achieve this you will need to use Metafields and Dynamic sources. Those are Shopify features that allow you to store and display unique content for products, collections, pages, etc (in our case we’ll use them in products).

Creating metafields

Creating metafields for your products is easy, you can read about this in full detail on the official Shopify documentation but the following instructions will give you a jump start:

1. From your Shopify admin, navigate to “Settings“.
2. From the settings menu on the left, navigate to “Metafields and metaobjects“.
3. Select “Products“.
4. Click “Add definition“.

In the following screen, name your definition based on the type of content you will be providing (this will be the title of your metafield, i.e. “Ingredients”), and choose a content type. Usually you will want this to be “Multi-line text” (read more on content types) for formatted text, but it could also be anything, a file, or a reference to another product or collection.

Hit “Save” and then you’re done.

Displaying the dynamic content of metafields with Expandable blocks

Once you’ve set up your metafields, you can enter their content individually for each product from the product’s edit page.

In the Theme Editor, add an Expandable block. In the block’s Text field, delete the placeholder content entirely.

Click the dynamic source icon in the top-right corner of the Text field (highlighted in the screenshot above). Then select the metafield you created in the previous step.

Once selected, the metafield will appear in the Text field as a dynamic source.

Click Save. The Expandable block will now automatically display the corresponding metafield content for each product.