> 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/tab-collage.md).

# Tab Collage

The **Tab collage** 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>Make image full width</td><td>Extend the section to be the width of the browser window.</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>Desktop image placement</td><td><p>Choose whether the image or the text appears first. Image first is default for mobile layouts:</p><ul><li><strong>Image first</strong></li><li><strong>Image second</strong></li></ul><p>(<em>Image first is the default mobile layout</em>)</p></td></tr><tr><td>Open first collapsible row</td><td>Open first collapsible row</td></tr></tbody></table>

## Image settings

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image height</td><td><p>Determine the height of the image:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td>Image behavior</td><td><p>Determine the behavior of the image:</p><ul><li><strong>None</strong></li><li><strong>Ambient movement</strong></li></ul></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>Changes 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>Changes 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>Changes 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>Changes 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>Upload a image</td><td>Upload a image.</td></tr><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>