# Collection list page

Visit our demo to see all available previews: [Click here](https://concept-theme.myshopify.com/collections).

## How to set up sections for Collection list page?

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Collection list** from the dropdown window.
4. From the side menu, select **Collection list page**. Configure the collection list page in the setting on the side with the following settings.

<table><thead><tr><th width="254">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout style</td><td><p>Select the layout style for the section:</p><ul><li><strong>Classic</strong></li><li><strong>Masonry</strong></li></ul></td></tr><tr><td>Section width</td><td><p>Select the section width from the dropdown menu:</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>Determines the width of the section when you choose "Customized width" option. Can be from <strong>1200px</strong> to <strong>1800px</strong>, increasing arithmetically of <strong>50px</strong> (pixel)</td></tr><tr><td>Show breadcrumb?</td><td>Select this checkbox to show/hide breadcrumb</td></tr><tr><td>Breadcrumb: size</td><td><p>Font size of text:</p><ul><li><strong>Default</strong></li><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Breadcrumb: alignment</td><td><p>Set horizontal alignment for content inside section containers.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Breadcrumb: padding top</td><td>Determines the height of the top inner space of the breadcrumb. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)</td></tr><tr><td>Breadcrumb: padding bottom</td><td>Determines the height of the bottom inner space of the breadcrumb. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)</td></tr><tr><td>Heading</td><td>Add text to display as a section heading. <br><em><mark style="color:red;">(Leave the field blank to hide the heading)</mark></em></td></tr><tr><td>Heading size</td><td><p>Font size of text:</p><ul><li><strong>Default</strong></li><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr><tr><td>Heading alignment</td><td><p>Set horizontal alignment for content inside section containers.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td>Heading top margin</td><td>Determines the height of the top outside space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel)</td></tr><tr><td>Heading bottom margin</td><td>Determines the height of the bottom outside space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel)</td></tr></tbody></table>

### Collection list

<table><thead><tr><th width="257">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Collection type</td><td><p>Select the collection type for the section:</p><ul><li><strong>All collection</strong></li><li><strong>Custom collection</strong></li></ul></td></tr><tr><td>Sort collections by</td><td><p>Select the sort order of the collection, which is set in the collection pages of the Admin from the dropdown menu:</p><ul><li><strong>Alphabetically, A-Z</strong>.</li><li><strong>Alphabetically, Z-A</strong>.</li><li><strong>Date, new to old</strong>.</li><li><strong>Date, old to new</strong>.</li><li><strong>Product count, high to low</strong>.</li><li><strong>Product count, low to high</strong>.</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>The number of products from the products to display on desktop. Must be an even number. Minimum: <strong>1</strong>. Maximum: <strong>5</strong><br><em><mark style="color:red;">(Not For Layout 'Masonry')</mark></em></td></tr><tr><td>Number of columns on mobile</td><td><p>Select the number of columns to display on mobile devices from the dropdown menu:</p><ul><li><strong>1 column</strong></li><li><strong>2 columns</strong></li></ul><p><em><mark style="color:red;">(Not For Layout 'Masonry')</mark></em></p></td></tr><tr><td>Grid between</td><td>Determines the grid spacing between on desktop devices. Can be from <strong>10px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Grid between tablet</td><td>Determines the grid spacing between on tablet devices. Can be from <strong>10px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Image ratio</td><td><p>Select the ratio of image from the dropdown menu:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Portrait.</strong></li><li><strong>Square.</strong></li></ul><p>(<em>Add images by editing your collections.</em> <a href="https://help.shopify.com/manual/products/collections"><em>Learn more</em></a>)</p></td></tr></tbody></table>

### Collection content

<table><thead><tr><th width="260">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Hide collection title</td><td>Enable/disable checkbox</td></tr><tr><td>Show collection product count</td><td>Enable/disable checkbox</td></tr></tbody></table>

### Button

<table><thead><tr><th width="260">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Button label</td><td>Add text to display as a button on the section<br><em><mark style="color:red;">(Leave the field blank to hide the link)</mark></em></td></tr></tbody></table>

### **Section padding**

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

***

## Block Collection

<table><thead><tr><th width="262">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Choose collection</td><td>Select a collection to add all its products to the block</td></tr><tr><td>Upload image</td><td>Set up an image</td></tr></tbody></table>