# Collection list

{% embed url="https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da" %}

Cello theme provides a section, namely "Collection list" in this section, you can show the collection as a slideshow. You can display a maximum of fifteen collections in this section.

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width on right side</td><td><p>By enabling this checkbox, you can make full width section on right side.</p><p>This feature will only work when 'Enable carousel on desktop' is enable.</p></td></tr><tr><td>Subheading</td><td>Enter text to display as a subtitle in the section.</td></tr><tr><td>Subheading style</td><td><p>Following is the Subheading style customization of the heading of the section:</p><ul><li>Solid</li><li>Outline</li><li>Link</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading position</td><td><p>Following is the heading position customization of the heading of the section:</p><ul><li>Next to the collections</li><li>Top to the collections</li></ul></td></tr><tr><td>Heading size</td><td><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Following is the heading alignment customization of the heading of the section:</p><ul><li>left</li><li>center</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the Collection list section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>"View all" style</td><td><p>Customization of the "View all" style in the Collection list section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Enable "View all" button</td><td>By enabling this checkbox, you can see "View all" button, if list includes more collections than shown.</td></tr><tr><td>Enable arrow icon</td><td>By enabling this checkbox, you can see "arrow icon".</td></tr><tr><td>Full width collection image</td><td>By enabling this checkbox, you can see full width collection image.</td></tr><tr><td>Direction</td><td><p>Collection list "Direction" is as follows:</p><ul><li>Row</li><li>Column</li></ul></td></tr><tr><td>Image ratio</td><td><p>In the section, Image size customization is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “5” products.</td></tr><tr><td>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel in the desktop screen.</td></tr><tr><td>Number of rows on desktop</td><td>"Number of rows on desktop" is to customize the rows on the desktop and mobile screen. You can show a minimum of “1” and a maximum of “3” rows.</td></tr><tr><td>Slider arrow position</td><td><p>In this section, you can change slider arrow position is as follows:</p><ul><li>Top</li><li>Inline</li><li>Bottom</li></ul><p>This feature will only work when heading position is top to the collections.</p></td></tr><tr><td>Slider arrow style</td><td><p>In this section, you can change slider arrow style is as follows:</p><ul><li>Button</li><li>Icon</li></ul></td></tr><tr><td>Horizontal space</td><td>You can add horizontal space between collection cards using this feature.</td></tr><tr><td>Vertical space</td><td>You can add vertical space between collection cards using this feature.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul><p>Modifying the color of the background on hover will result in a corresponding color change for the collection card hover background.<br><br>Modifying the color of the text on hover will result in a corresponding color change for the Collection card hover text.</p></td></tr><tr><td>Enable hover effect</td><td><p>By enabling this checkbox, you can see card hover effect.</p><p></p><p><strong>card hover effects</strong></p><ul><li>Background color on hover</li><li>Text color on hover</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of collection columns in Mobile devices.</p><ul><li>1 Column</li><li>2 Columns</li></ul></td></tr></tbody></table>

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FP5AzhREjYtAI8dcNJia0%2Fcollection-list.png?alt=media&#x26;token=c895afd4-6e45-4d20-8259-4151f375053b" alt=""><figcaption></figcaption></figure>

## **Add Collection**

Click on "**Add Collection**" and its customization screenshot is as follows.

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FVtDTEZexOTtj5OqwbQ55%2Fcollection-list-block.png?alt=media&#x26;token=8e9f5a38-4b7e-421a-8157-325b32acfb59" alt=""><figcaption></figcaption></figure>
