# Collection List

<figure><img src="/files/79bqXKi0QXpFdD8XYXAt" alt=""><figcaption></figcaption></figure>

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Collection list**".

## Section settings

### General

<table><thead><tr><th width="315">Settings</th><th>Meaning</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>The background color of the section.</td></tr><tr><td>Background gradient</td><td>The background gradient of the section.</td></tr><tr><td>Background image</td><td>Upload an image as the section background.</td></tr><tr><td>Layout</td><td>Select the layout for the section. There are 2 options:<br><br><mark style="color:orange;"><strong>Masonry</strong></mark><br><mark style="color:orange;"><strong>Grid</strong></mark></td></tr><tr><td>Enable swipe on mobile</td><td>Toggle to use swipe layout on mobile.<br><br><em><mark style="color:orange;">Note: Apply to 'Grid' layout.</mark></em></td></tr><tr><td>Enable sticky heading on desktop</td><td>Toggle sticky heading section.</td></tr><tr><td><strong>Section header</strong></td><td></td></tr><tr><td>Style</td><td>Select the layout for the header. There are 2 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr><tr><td>Title</td><td>Enter in the title for the section.</td></tr><tr><td>Title color</td><td>Apply a color to the title of the section.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title on tablet and desktop.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on mobile.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom on tablet and desktop.</td></tr><tr><td>Title bottom margin on mobile</td><td>Determine the spacing of the title from bottom on mobile.</td></tr><tr><td>'View all' style</td><td>Select the style for the "view all". There are 2 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr><tr><td>View all</td><td>Enter the text for the "view all" link.</td></tr><tr><td>'View all' link</td><td>Set URL for the "view all" to redirect to if the "Redirect To URL" is selected.</td></tr><tr><td>'View all' link color</td><td>Apply a color to the "view all".</td></tr><tr><td>'View all' link hover color</td><td>Apply a color when hover on the "view all".</td></tr><tr><td>Alignment</td><td>Select the alignment of the content to be either to the Left, Center or to the Right of the section.</td></tr><tr><td>'View all' width</td><td>Determine the width of the "view all".</td></tr><tr><td><strong>Collection image</strong></td><td></td></tr><tr><td>Image ratio</td><td>Select the desired ratio of the image: <br><br><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> <br><mark style="color:orange;"><strong>Square</strong> (the image is cropped to be square)</mark></td></tr><tr><td>Portrait aspect ratio</td><td>Determine the ratio between width and height of the image.<br><br><em><mark style="color:orange;">Note: Apply to 'portrait' option.</mark></em></td></tr><tr><td><strong>Collection content</strong></td><td></td></tr><tr><td>Content alignment</td><td>Select the alignment of the collection content to be either to the Left, Center, or to the Right of the section.</td></tr><tr><td><strong>Title</strong></td><td></td></tr><tr><td>Font size</td><td>Determine the font size of the block title on tablet and desktop.</td></tr><tr><td>Font size on mobile</td><td>Determine the font size of the block title on mobile.</td></tr><tr><td>Font weight</td><td>Select the font weight of the blog title.</td></tr><tr><td>Text style</td><td>Transform the block title to be None, Capitalize, Uppercase or Lowercase.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing of the block title from bottom.</td></tr><tr><td>Text color</td><td>Apply a color to the title.</td></tr><tr><td>Text hover color</td><td>Apply a color to the title on the hovered.</td></tr><tr><td><strong>Description</strong></td><td></td></tr><tr><td>Show collection description?</td><td>Toggle to show or hide the collection description.</td></tr><tr><td>Content description length</td><td>Determine the number of characters of the displayed collection description.</td></tr><tr><td>Text color</td><td>Apply a color to the collection description.</td></tr><tr><td>Text hover color</td><td>Apply a color to the collection description on the hovered.</td></tr><tr><td>Font size</td><td>Determine the font size of the collection description.</td></tr><tr><td>Font weight</td><td>Select the font weight of the collection description.</td></tr><tr><td><strong>Button</strong></td><td></td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Font size</td><td>Determine the font size of the button.</td></tr><tr><td>Text color</td><td>Apply a color to the button of the block.</td></tr><tr><td>Text hover color</td><td>Apply a color when hover on the button of the block.</td></tr><tr><td><strong>Grid layout</strong></td><td></td></tr><tr><td>Columns per row</td><td>Determine the number of items that appear on a row.</td></tr><tr><td>Grid gap</td><td>Determine the spacing between items.</td></tr><tr><td>Show navigation arrows</td><td>Toggle to show navigation arrows.</td></tr><tr><td>Show navigation dots</td><td>Toggle to show navigation dots.</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 200px, 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 200px, 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] Collection

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Collection</td><td>Select collection to show.</td></tr><tr><td>Custom collection badge</td><td>Enter the text for the custom badge.</td></tr><tr><td>Custom collection badge color</td><td>Enter the color for the custom badge color.</td></tr><tr><td>Custom collection badge background</td><td>Enter the background color for the custom badge color.</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/sections/all-sections-in-theme/collection-list.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.