> For the complete documentation index, see [llms.txt](https://meowcart.gitbook.io/lilyth-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://meowcart.gitbook.io/lilyth-theme/sections/collapsible-content.md).

# Collapsible Content

The **Collapsible content** section contains the following default blocks:

* [Collapsible row](#collapsible-row-block)

## Section settings

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p>Determine the width of the section:</p><ul><li><strong>Full width</strong></li><li><strong>Page width</strong></li><li><strong>Customized width</strong></li></ul></td></tr><tr><td>Customize width</td><td>Determine the width of the section when you choose <strong>Customized width</strong> option. Can be from 800px to 1800px, increasing arithmetically of 50 pixel.</td></tr><tr><td>Color schema</td><td>A set of colors that you can apply to this section. <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme">Learn more.</a></td></tr><tr><td>Separator line</td><td><p>Display a line to visually separate this section from the other sections:</p><ul><li><strong>None</strong></li><li><strong>Top</strong></li><li><strong>Bottom</strong></li><li><strong>Top and bottom</strong></li></ul></td></tr></tbody></table>

## Section header settings

<table><thead><tr><th width="248">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td>Add text to display as a caption.</td></tr><tr><td>Heading</td><td>Add text to display as a heading.</td></tr><tr><td>Heading size</td><td><p>Change the size of the heading:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Description</td><td>Add text to display as a description.</td></tr><tr><td>Alignment</td><td><p>Determine the section header alignment:</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr></tbody></table>

## Main section settings

<table><thead><tr><th width="259">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Open first collapsible row</td><td>Open first collapsible row</td></tr></tbody></table>

## Collapsible tab heading settings

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text font</td><td><p>Change the font of the text:</p><ul><li><strong>Body font</strong></li><li><strong>Heading font</strong></li></ul></td></tr><tr><td>Text size</td><td><p>Change the size of the text:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Text thickness</td><td><p>Change the thickness of the text:</p><ul><li><strong>Thin</strong></li><li><strong>Extra light</strong></li><li><strong>Light</strong></li><li><strong>Regular</strong></li><li><strong>Medium</strong></li><li><strong>Semi bold</strong></li><li><strong>Bold</strong></li><li><strong>Extra bold</strong></li><li><strong>Black</strong></li></ul><p>(<em>The thickness available depend on the font that is currently set</em>)</p></td></tr><tr><td>Text style</td><td><p>Change the style of the text:</p><ul><li><strong>Normal</strong></li><li><strong>Uppercase</strong>: put all characters in uppercase.</li><li><strong>Lowercase</strong>: put all characters in lowercase.</li><li><strong>Capitalize</strong>: put first letter of a word in capitalize.</li></ul></td></tr><tr><td>Icon width</td><td>Determine the width of the SVG icons. Can be from 20px to 72px, increasing arithmetically of 4px (pixel).</td></tr></tbody></table>

## Section padding settings

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determine the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determine the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

## Block settings

### Collapsible row block

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to display as a heading. Support text or dynamic sources.</td></tr><tr><td>Icon</td><td>Choose a pre-made SVG icon that accommodates your text. The None option will disable the icon.</td></tr><tr><td>SVG</td><td>Add SVG code. SVG will be displayed instead of basic icons if provided.</td></tr><tr><td>Row content</td><td>Display content only when the collapsible row is expanded.</td></tr><tr><td>Row content from page</td><td>Display content from a page. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Tab content displays above the page content.</td></tr></tbody></table>