Similar to an accordion-style FAQ page with disclosure triangles, the Compressed blocks code framework conceals portions of text until clicked by the customer. Add this to your product description, page content, blog post, or collection description, then replace the placeholders with your content.
Copy the Shortcode Code to the Page in HTML View
The shortcode is a sort of template for content, so it is best to add the template first, then replace the placeholders with the desired content.
Go to your FAQ page or add a new page in the Pages admin.
Activate HTML view by selecting Show HTML in the top-right corner of the Content field.
Paste this code to the field:
<details>
<summary>
<span class="headline">Features</span>
</summary>
<div class="indent-content">
<p>Content goes here</p>
</div>
</details>
Once pasted, you can start replacing the placeholders.
The placeholders included in this shortcode are:
- Features (visible headline)
- Content goes here (hidden until clicked)
For example, you could replace the content like this:
<details>
<summary>
<span class="headline">Do you ship internationally?</span>
</summary>
<div class="indent-content">
<p>We ship free of charge in all of North America.
<br>
International orders require additional costs and depend on the destination. Please contact our support team for more info!
</p>
</div>
</details>
Save, then select View page to confirm it has applied correctly.
Repeat for each FAQ question and answer.