Superstore includes a toolbox of shortcodes used to improve the appearance of pages, product descriptions, and more. Similar to an accordion-style FAQ page or disclosure triangles, the Compressed blocks shortcode can be used to conceal portions of text until clicked by the customer.
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.