> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/collections-list-page/collections-list-section.md). # 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. ![](/files/ix1ZUQtMca4qKgSNA6DO) | Setting | Description | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | Background Color | Set the background color for the section | | Background Gradient | Set the background gradient for the section | | Show Breadcrumb? | Enable to show the page breadcrumb. | | Breadcrumb: Alignment | Align Breadcrumb to either to be center, to the left or right. | | Background Color | Set the background of the breadcrumb on Desktop. | | Background Gradient | Set the gradient of the breadcrumb on Desktop. | | Background Color Mobile | Set the background of the breadcrumb on Mobile. | | Background Gradient Mobile | Set the gradient of the breadcrumb on Mobile. | | Show Page Title? | Enable to show the page title. | | Page Title: Alignment | Align the Page Title to the center, to the left or right. | | Title Spacing Top | Determine the spacing of the title from the top. | | Title Spacing Bottom | Determine the spacing of the title from the bottom. | | Description | Fill in the description of the page. | | Content: Alignment | Align the description to the center, to the left or right. | | Font Size | Determine the font size of the description. | | Font Size Mobile | Determine the font size of the description on Mobile. | | Font Weight | Select the Font weight of the description. | | Spacing Top | Determine the spacing top of the description. | | Spacing Bottom | Determine the spacing bottom of the description. | | Text Color | Set the color for the description text. | | Layout | Select the layout for the page to be either: Default (Adapt to the Body Width), FullWidth (regardless of the Body Width), and Width 1770px. | | Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. | | Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. | ### Sidebar | Setting | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Show Sidebar? | Enable to show sidebar. Note that blocks rather than Custom Collection must be added for the sidebar to appear. | | Show Collapsible Block? | Turn the blocks in sidebar to be collapsible. | | Enable Sticky? | Fix the position of the sidebar when scrolling until the end of the collection content. | | Layout | Determine how collapsible blocks are presented: Layout 1 (The collapsible blocks appear with carets), Layout 2 (The collapsible blocks appear with minus and plus icons) | | Collapsible | Select the collapse state of the collapsible blocks when the page loads. | | Position | Select the position of the side to be either to the Left or Right. | | Select Font Type | Select the font family for the title of the sidebar. | | Font Size | Determine the font size of the title of the sidebar. | | Font Weight | Select the font weight of the title of the sidebar | | Text Transform | Select the text transform for the title of the sidebar | | Font Style | Select the font style of the title of the sidebar. | #### COLLECTION LIST | Setting | Description | | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Type | Select the type of the collection to display in the list: All Collection (Dynamically fetch data from the admin), Custom Collections (Set up with Custom Collection Block) | | Sort by | Change the order of the All Collection Type with criteria. | | Item Per Row | Select the number of collections to show per row. | | Item Per Row Mobile | Select the number of collections to show per row on Mobile. | | Spacing Top | Determine the spacing top of the collection list. | | Spacing Bottom | Determine the spacing bottom of the collection list. | | Grid Gap | Determine the gap between collections. | | Item Content Side Padding | Determine the padding left and right of the collection content including title, product amount and description. | | Maximum Collections To Show | Limit the number of collections to show. | | Show 'Show More' Button? | Enable to show the 'Show More' button. | | Button | Fill in the text for the show more button. | | Button Font Size | Determine the font size of the button. | | Button Width | Specify the width the load more button from 100px to 600px. | | Button Font Weight | Select the font weight of the load more button. | | Text Transform | Select the text transform of the load more button. | | Spacing Top | Determine the spacing of the button from the top. | | Spacing Bottom | Determine the spacing of the button from the bottom. | | Color - Background Color - Background Gradient - Border Color | Set the text color, background and border color for both normal and hover states of the load more button. | #### COLLECTION IMAGE | Setting | Description | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Image Ratio | Select the desired ratio of the image: Adapt to Image (the original image width and height are adopted), Portrait (the image is cropped to be portrait), Square (the image is cropped to be square) | | Portrait Aspect Ratio | Determine the ratio between width and height of the image if the Image Ratio: Portrait is selected. | | Spacing Bottom | Determine the spacing of the image from the bottom. | #### COLLECTION CONTENT | Setting | Description | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------- | | Show Collection Title | Enable to show the collection title on all collection items. | | Show Collection Product Count? | Enable to show the collection product amount on all collection items. | | Content: Alignment | Align the collection content including title, number amount, description and button to the Left, Right or Center. | | Border Color | Set the color for all of the collection items' border. | | Background Color | Set the color for all of the collection items' background. | | Background Gradient | Set the background gradient for all of the collection items' background. | #### TITLE | Setting | Description | | ------------------- | ----------------------------------------------------------------------- | | Font Size | Determine the font size of the title on all collection items. | | Font Size Mobile | Determine the font size of the title on all collection items on Mobile. | | Font Weight | Select the font weight of the title on the collection items. | | Text Transform | Select the text transform of the title on the collection items. | | Title Font Style | Select the font style for all the collection items' titles. | | Spacing Bottom | Determine the spacing bottom of the collection title. | | Text Color | Set the color for the collection title. | | Background Color | Set the background color for the collection title. | | Background Gradient | Set the background gradient for the collection title. | #### THE NUMBER OF PRODUCTS | Setting | Description | | ---------------- | ------------------------------------------------------------------------------- | | Font Size | Determine the font size of the product count on all collection items. | | Font Size Mobile | Determine the font size of the product count on all collection items on Mobile. | | Font Weight | Select the font weight of the number count. | | Text Transform | Select the text transform for the number count. | | Spacing Bottom | Determine the spacing bottom of the product count. | | Text Color | Set the color for the product count. | #### DESCRIPTION | Setting | Description | | ----------------- | --------------------------------------------------------------------------- | | Font Size | Determine the font size of the description. | | Font Size Mobile | Determine the font size of the description on Mobile. | | Font Weight | Select the font weight of the description. | | Text Transform | Transform the description to be Normal, Capitalize, Uppercase or Lowercase. | | Description Limit | Limit the description word count to truncate. | | Spacing Bottom | Determine the spacing bottom of the description. | | Text Color | Set the color for the description. | #### BUTTON The settings below are for the buttons in the collection content block. | Setting | Description | | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Button | Enter the text for the button. Eg: Read More | | Button Style | Select the style of the button: Style 1 - normal button; Style 2 - as a Link | | Button Font Size | Determine the font size of the button. | | Button Width | Determine the width of the button. | | Button Font Weight | Select the font weight of the button. | | Text Transform | Transform the text of the button to be either normal, uppercase, lowercase or capitalize. | | Spacing Bottom | Determine the spacing bottom of the button. | | Color - Background Color - Background Gradient - Border Color | Set the text color, background and border color for both the normal and hover states of the buttons. |