Collections List Section
Last updated
Last updated
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Collections list from the dropdown window.
| 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. |
| 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 |
| 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. |
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 Border Color Background Color Background Gradient Hover / Active Color Hover / Active Border Color Hover / Active Background Color Hover / Active Background Gradient | Set the text color, background and border color for both normal and hover states of the load more button. |
| 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. |
| 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. |
| 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. |
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. |
| 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. |
| 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. |
| 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 - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Set the text color, background and border color for both the normal and hover states of the buttons. |
