# Collections List Section

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 **Collections list** from the dropdown window.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FJLpUQBPnK6vkM7QTJoLd%2Fimage.png?alt=media&#x26;token=c7ba6aa9-5f50-419b-b319-17bcc86844fd" alt=""><figcaption></figcaption></figure>

## Section settings

### General

<table><thead><tr><th width="297">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width)</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Background color</td><td>Set the background color for the section.</td></tr><tr><td>Background gradient</td><td>Set the background gradient for the section.</td></tr><tr><td>Show breadcrumb</td><td>Enable to show the page breadcrumb.</td></tr><tr><td>Breadcrumb alignment</td><td>Align breadcrumb to either to be center, to the left or right.</td></tr><tr><td>Background color</td><td>Set the background of the breadcrumb on Desktop.</td></tr><tr><td>Background gradient</td><td>Set the gradient of the breadcrumb on Desktop.</td></tr><tr><td>Background color on mobile</td><td>Set the background of the breadcrumb on Mobile.</td></tr><tr><td>Background gradient on mobile</td><td>Set the gradient of the breadcrumb on Mobile.</td></tr><tr><td>Show page title</td><td>Enable to show the page title.</td></tr><tr><td>Page title alignment</td><td>The alignment of the page title within the section container.</td></tr><tr><td>Description</td><td>Fill in the description of the page.</td></tr><tr><td>Content alignment</td><td>The alignment of the description within the section container.</td></tr><tr><td>Font size</td><td>Determine the font size of the description.</td></tr><tr><td>Font size on mobile</td><td>Determine the font size of the description on Mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight of the description.</td></tr><tr><td>Top padding</td><td>Determine the spacing top of the description.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing bottom of the description.</td></tr><tr><td>Text color</td><td>Set the color for the description text.</td></tr></tbody></table>

### Sidebar

<table><thead><tr><th width="305">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show collapsible block</td><td>Turn the blocks in sidebar to be collapsible.</td></tr><tr><td>Enable sticky sidebar</td><td>Fix the position of the sidebar when scrolling until the end of the collection content.</td></tr><tr><td>Layout</td><td><p>Determine how collapsible blocks are presented: </p><p><br><mark style="color:orange;"><strong>Layout 1</strong> (The collapsible blocks appear with carets)<strong>.</strong></mark><br><mark style="color:orange;"><strong>Layout 2</strong> (The collapsible blocks appear with minus and plus icons).</mark></p></td></tr><tr><td>Collapsible</td><td>Select the collapse state of the collapsible blocks when the page loads.</td></tr><tr><td>Position</td><td>Select the position of the side to be either to the Left or Right.</td></tr><tr><td><strong>Block heading</strong></td><td></td></tr><tr><td>Font family</td><td>Select the font family for the title of the sidebar.</td></tr><tr><td>Font size</td><td>Determine the font size of the title of the sidebar.</td></tr><tr><td>Font weight</td><td>Select the font weight of the title of the sidebar</td></tr><tr><td>Text style</td><td>Select the text transform for the title of the sidebar</td></tr></tbody></table>

### Collection list

<table><thead><tr><th width="307">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Type</td><td><p>Select the type of the collection to display in the list: <br></p><p><mark style="color:orange;"><strong>All collections</strong> (Dynamically fetch data from the admin)</mark><br><mark style="color:orange;"><strong>Custom collections</strong> (Set up with Custom Collection Block)</mark></p></td></tr><tr><td>Sort by</td><td>Change the order of the All Collection Type with criteria.<br><br><em><mark style="color:orange;">Note: Apply to 'all collections' option.</mark></em></td></tr><tr><td>Items per row</td><td>Select the number of collections to show per row.</td></tr><tr><td>Items per row on mobile</td><td>Select the number of collections to show per row on Mobile.<br><br><em><mark style="color:orange;">Note: Not for layout 'collections 03 masonry'.</mark></em></td></tr><tr><td>Section top padding</td><td>Determine the spacing top of the collection list.</td></tr><tr><td>Section bottom padding</td><td>Determine the spacing bottom of the collection list.</td></tr><tr><td>Grid gap</td><td>Determine the gap between collections.</td></tr></tbody></table>

### Pagination

<table><thead><tr><th width="310">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Pagination</td><td><p>Choose how the Collections list displays when there are too many collections. There are 3 options:</p><p></p><p><mark style="color:orange;"><strong>Show all</strong></mark></p><p><mark style="color:orange;"><strong>Pagination.</strong></mark></p><p><mark style="color:orange;"><strong>Button show more</strong></mark><br><br><em><mark style="color:orange;">Note: The 'pagination' option only applies to the 'all collections' type.</mark></em></p></td></tr><tr><td>Maximum collections to show</td><td>Limit the number of collections to show.<br><br><em><mark style="color:orange;">Note: This setting does not apply to 'show all' pagination.</mark></em></td></tr><tr><td>Button</td><td>Fill in the text for the show more button.</td></tr><tr><td>Button font size</td><td>Determine the font size of the button.</td></tr><tr><td>Button width</td><td>Specify the width the load more button from 100px to 600px.</td></tr><tr><td>Button font weight</td><td>Select the font weight of the load more button.</td></tr><tr><td>Text style</td><td>Select the text transform of the load more button.</td></tr><tr><td>Top padding</td><td>Determine the spacing of the button from the top.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing of the button from the bottom.</td></tr><tr><td>Color</td><td>Set the text color of the show more button.</td></tr><tr><td>Border color</td><td>Set the border color of the show more button.</td></tr><tr><td>Background color</td><td>Set the background color of the show more button.</td></tr><tr><td>Background gradient</td><td>Set the background gradient of the show more button.</td></tr><tr><td>Hover color</td><td>Set the text color for hover states of the show more button.</td></tr><tr><td>Border hover color</td><td>Set the border color for hover states of the show more button.</td></tr><tr><td>Background hover color</td><td>Set the background color for hover states of the show more button.</td></tr><tr><td>Background hover gradient</td><td>Set the background gradient for hover states of the show more button.</td></tr></tbody></table>

### Collection image

#### *To add images,* [*edit your collections*](https://help.shopify.com/en/manual/products/collections)

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image ratio</td><td><p>Select the desired ratio of the image: <br></p><p><mark style="color:orange;"><strong>Adapt to Image</strong> (the original image width and height are adopted)</mark><br><mark style="color:orange;"><strong>Portrait</strong> (the image is cropped to be portrait)</mark> </p><p><mark style="color:orange;"><strong>Square</strong> (the image is cropped to be square)</mark></p></td></tr><tr><td>Portrait aspect ratio</td><td><p>Determine the ratio between width and height of the image.<br></p><p><em><mark style="color:orange;">Note: Apply to 'portrait' option.</mark></em></p></td></tr><tr><td>Bottom padding</td><td>Determine the spacing of the image from the bottom.</td></tr></tbody></table>

### Collection content

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show collection title</td><td>Enable to show the collection title on all collection items.</td></tr><tr><td>Show collection product count</td><td>Enable to show the collection product amount on all collection items.</td></tr><tr><td>Content alignment</td><td>Align the collection content including title, number amount, description and button to the Left, Right or Center.</td></tr><tr><td>Border color</td><td>Set the color for all of the collection items' border.</td></tr><tr><td>Background color</td><td>Set the color for all of the collection items' background.</td></tr><tr><td>Background gradient</td><td>Set the background gradient for all of the collection items' background.</td></tr></tbody></table>

### Title

<table><thead><tr><th width="315">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font size</td><td>Determine the font size of the title on all collection items.</td></tr><tr><td>Font size on mobile</td><td>Determine the font size of the title on all collection items on mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight of the title on the collection items.</td></tr><tr><td>Text style</td><td>Select the text transform of the title on the collection items.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing bottom of the collection title.</td></tr><tr><td>Text color</td><td>Set the color for the collection title.</td></tr><tr><td>Background color</td><td>Set the background color for the collection title.</td></tr><tr><td>Background gradient</td><td>Set the background gradient for the collection title.</td></tr></tbody></table>

### Number of products

<table><thead><tr><th width="320">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font size</td><td>Determine the font size of the product count on all collection items.</td></tr><tr><td>Font size on mobile</td><td>Determine the font size of the product count on all collection items on mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight of the number count.</td></tr><tr><td>Text style</td><td>Select the text transform for the number count.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing bottom of the product count.</td></tr><tr><td>Text color</td><td>Set the color for the product count.</td></tr></tbody></table>

### Description

<table><thead><tr><th width="324">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font size</td><td>Determine the font size of the description.</td></tr><tr><td>Font size on mobile</td><td>Determine the font size of the description on mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight of the description.</td></tr><tr><td>Text style</td><td>Transform the description to be Normal, Capitalize, Uppercase or Lowercase.</td></tr><tr><td>Description limit</td><td>Limit the description word count to truncate.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing bottom of the description.</td></tr><tr><td>Text color</td><td>Set the color for the description.</td></tr></tbody></table>

### Button&#x20;

<table><thead><tr><th width="328">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Button</td><td>Enter the text for the button.</td></tr><tr><td>Button style</td><td><p>Select the style of the button: </p><p></p><p><mark style="color:orange;"><strong>Style 1</strong> - Normal button</mark></p><p><mark style="color:orange;"><strong>Style 2</strong> - As a Link</mark></p></td></tr><tr><td>Button font size</td><td>Determine the font size of the button.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr><tr><td>Button font weight</td><td>Select the font weight of the button.</td></tr><tr><td>Text style</td><td>Transform the text of the button to be either normal, uppercase, lowercase or capitalize.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing bottom of the button.</td></tr><tr><td>Color</td><td>Set the text color of the button.</td></tr><tr><td>Border color</td><td>Set the border color of the button.</td></tr><tr><td>Background color</td><td>Set the background color of the button.</td></tr><tr><td>Background gradient</td><td>Set the background gradient of the button.</td></tr><tr><td>Hover color</td><td>Set the text color for hover states of the button.</td></tr><tr><td>Border hover color</td><td>Set the border color for hover states of the button.</td></tr><tr><td>Background hover color</td><td>Set the background color for hover states of the button.</td></tr><tr><td>Background hover color</td><td>Set the background gradient for hover states of the button.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## Block settings

### \[BLOCK] Custom collection

<table><thead><tr><th width="339">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Choose collection</td><td>Select a collection that you want show in this block.</td></tr><tr><td>Upload image</td><td>Custom image for this collection.<br><br><em><mark style="color:orange;">Note: Leave the image blank to show the collection image if available.</mark></em></td></tr><tr><td><strong>Countdown</strong></td><td></td></tr><tr><td>Show countdown</td><td>Enable to show the countdown function.</td></tr><tr><td>Title</td><td>Enter the title of the countdown block.</td></tr><tr><td>Font size</td><td>The font size of the title on tablet and desktop devices.</td></tr><tr><td>Font size on mobile</td><td>The font size of the title on mobile devices.</td></tr><tr><td>Font weight</td><td>Select the font weight of the title.</td></tr><tr><td>Bottom padding</td><td>Adjust the space between the bottom edge of a title and the elements below it.</td></tr><tr><td>Text color</td><td>Set the color of the title.</td></tr><tr><td>Description</td><td>The description for this block.</td></tr><tr><td>Font size</td><td>The font size of the description on desktop devices.</td></tr><tr><td>Font size on mobile</td><td>The font size of the description on mobile devices.</td></tr><tr><td>Font weight</td><td>Select the font weight of the description</td></tr><tr><td>Bottom padding</td><td>Adjust the space between the bottom edge of a description and the elements below it.</td></tr><tr><td>Text color</td><td>Set the color of the description.</td></tr><tr><td>Countdown end date</td><td><p>Enter the due date for the countdown.</p><p></p><p><em><mark style="color:orange;">Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00</mark></em><mark style="color:orange;">.</mark></p></td></tr><tr><td>Item width</td><td>Determines the width of the countdown item.</td></tr><tr><td>Item height</td><td>Determines the height of the countdown item.</td></tr><tr><td>Item gap</td><td>Determine the gap between each countdown item.</td></tr><tr><td>Item corner radius</td><td>Determine the roundness for the four corners of the countdown item.</td></tr><tr><td>Border color</td><td>Set the border color of the countdown item.</td></tr><tr><td>Background color</td><td>Set the background color of the countdown item.</td></tr><tr><td>Background gradient</td><td>Set the background gradient of the countdown item.</td></tr><tr><td>Background opacity</td><td>Sets the opacity of the background.</td></tr><tr><td>Number font size</td><td>The font size of the number in the countdown item on tablet and desktop devices.</td></tr><tr><td>Number font size mobile</td><td>The font size of the number in the countdown item on mobile devices.</td></tr><tr><td>Number font weight</td><td>The font weight of the number in the countdown item.</td></tr><tr><td>Number color</td><td>Set the border color of the number in the countdown item.</td></tr><tr><td>Text font size</td><td>The font size of the 'Days, Hours, Mins, Secs' text in the countdown item on tablet and desktop devices.</td></tr><tr><td>Text font size on mobile</td><td>The font size of the 'Days, Hours, Mins, Secs' text in the countdown item on mobile devices.</td></tr><tr><td>Text font weight</td><td>The font weight of the 'Days, Hours, Mins, Secs' text in the countdown item.</td></tr><tr><td>Text color</td><td>Set the color of the 'Days, Hours, Mins, Secs' text in the countdown item.</td></tr></tbody></table>

### \[BLOCK] \[Sidebar] Categories

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading</td><td>Enter the heading for the block.</td></tr><tr><td>Menu depth</td><td>Select how the menu is displayed. There are 3 options:<br><br><mark style="color:orange;"><strong>One level</strong> (only show menu lv1)</mark><br><mark style="color:orange;"><strong>All levels</strong></mark><br><mark style="color:orange;"><strong>All Collections</strong></mark></td></tr><tr><td>Menu</td><td>Select the menu for the block.</td></tr></tbody></table>

### \[BLOCK] \[Sidebar] Product block

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading</td><td>Enter the heading for the block.</td></tr><tr><td>Collection</td><td>Select the collection for the block.</td></tr><tr><td>Layout</td><td>Select the layout for the product list. There are 2 options:<br><br><mark style="color:orange;"><strong>Grid</strong></mark><br><mark style="color:orange;"><strong>Slider</strong></mark></td></tr><tr><td>Maximum products to show</td><td>Determines the maximum number of products displayed.</td></tr><tr><td>Show navigation dots</td><td>Enable to show the navigation dots.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr><tr><td>Show navigation arrows</td><td>Enable to show the navigation arrows.<br><br><em><mark style="color:orange;">Note: Only applicable for slider layout.</mark></em></td></tr></tbody></table>

### \[BLOCK] \[Sidebar] CMS image

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading</td><td>Enter the heading for the block.</td></tr><tr><td>Image</td><td>Select the image for the block.<br><br><em><mark style="color:orange;">Recommended image: 340x400px.</mark></em></td></tr><tr><td>Link</td><td>Select the link for the image.</td></tr></tbody></table>

### \[BLOCK] \[Sidebar] CMS custom text

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading</td><td>Enter the heading for the block.</td></tr><tr><td>Content</td><td>Enter the content for the block.</td></tr></tbody></table>