# 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="/files/iWuB5JVxRbuf4u0drT9X" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/collections-list-page/collections-list-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.