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 | The alignment of the page title within the section container. There are 3 options:
|
Description | Fill in the description of the page. |
Content: Alignment | The alignment of the description within the section container:
|
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. |
Section Width | Select the layout for the page to be either: Default (Adapt to the Body Width), FullWidth (regardless of the Body Width), and Width 1770px. |
| Settings | Meaning |
|---|---|
Desktop | Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Tablet | Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Mobile | Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
| Settings | Meaning |
|---|---|
Desktop | Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Tablet | Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Mobile | Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
| 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. |
| Setting | Description |
|---|---|
Pagination | Choose how the Collections list displays when there are too many collections. There are 3 options:
|
Maximum Collections To Show | Limit the number of collections to show. (This setting does not apply to 'Show all' pagination) |
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 | Set the text color of the show more button. |
Border Color | Set the border color of the show more button. |
Background Color | Set the background color of the show more button. |
Background Gradient | Set the background gradient of the show more button. |
Hover / Active Color | Set the text color for hover states of the show more button. |
Hover / Active Border Color | Set the border color for hover states of the show more button. |
Hover / Active Background Color | Set the background color for hover states of the show more button. |
Hover / Active Background Gradient | Set the background gradient for hover states of the show 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. (Applies to 'Portrait' option) |
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:
|
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 | Set the text color of the button. |
Border Color | Set the border color of the button. |
Background Color | Set the background color of the button. |
Background Gradient | Set the background gradient of the button. |
Hover / Active Color | Set the text color for hover states of the button. |
Hover / Active Border Color | Set the border color for hover states of the button. |
Hover / Active Background Color | Set the background color for hover states of the button. |
Hover / Active Background Gradient | Set the background gradient for hover states of the button. |
| Setting | Description |
|---|---|
Choose Collection | Select a collection that you want show in this block. |
Upload Image | Custom image for this collection. Leave the image blank to show the collection image if available. |
| Setting | Description |
|---|---|
Display Countdown | Enable to show the countdown function. |
Title | Enter the title of the countdown block. |
Font Size | The font size of the title on tablet and desktop devices. |
Font Size Mobile | The font size of the title on mobile devices. |
Font Weight | The font weight of the title:
|
Spacing Bottom | Adjust the space between the bottom edge of a title and the elements below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Text Color | Set the color of the title. |
Description | The description for this block. |
Font Size | The font size of the description on desktop devices. |
Font Size Mobile | The font size of the description on mobile devices. |
Font Weight | The font weight of the title:
|
Spacing Bottom | Adjust the space between the bottom edge of a description and the elements below it. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Text Color | Set the color of the description. |
Countdown | Enter the due date for the countdown with the format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00. |
Item Width | Determines the width of the countdown item. |
Item Height | Determines the height of the countdown item. |
Countdown Item Gap | Determine the gap between each countdown item. |
Item Border Radius | Determine the roundness for the four corners of the countdown item. |
Border Color | Set the border color of the countdown item. |
Background Color | Set the background color of the countdown item. |
Background Gradient | Set the background gradient of the countdown item. |
Opacity Background | Sets the opacity of the background. |
Number Font Size | The font size of the number in the countdown item on tablet and desktop devices. |
Number Font Size Mobile | The font size of the number in the countdown item on mobile devices. |
Number Font Weight | The font weight of the number in the countdown item:
|
Number Color | Set the border color of the number in the countdown item. |
Text Font Size | The font size of the 'Days, Hours, Mins, Secs' text in the countdown item on tablet and desktop devices. |
Text Font Size Mobile | The font size of the 'Days, Hours, Mins, Secs' text in the countdown item on mobile devices. |
Text Font Weight | The font weight of the 'Days, Hours, Mins, Secs' text in the countdown item:
|
Text Color | Set the color of the 'Days, Hours, Mins, Secs' text in the countdown item. |
