# Collection header

## Section settings

### General

<table><thead><tr><th width="313">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section layout</td><td>Select the layout for the section, there are 3 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark><br><mark style="color:orange;"><strong>Style 3</strong></mark></td></tr><tr><td>Show breadcrumb</td><td>Enable to show the breadcrumb.</td></tr><tr><td>Breadcrumb alignment</td><td>Align the breadcrumb to either the center, left, or right.</td></tr><tr><td>Color - Background - Background gradient</td><td>Set the text color and background for the breadcrumb on the desktop.</td></tr><tr><td>Mobile color - Background color on mobile - Background gradient on mobile</td><td>Set the text color and background for the breadcrumb on the 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>Align the page title to either the center, left, or right.</td></tr><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></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] Collection image

*To change collection descriptions or collection images,* [*edit your collections.*](https://admin.shopify.com/store/hoanghiepsoftware/collections)

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show parallax banner</td><td>Enable to apply parallax layout for banner.</td></tr><tr><td>Show background overlay</td><td>Enable to apply background overlay for banner.</td></tr><tr><td>Type</td><td>Select the style for the banner, there are 2 options:<br><br><mark style="color:orange;"><strong>Custom</strong></mark><br><mark style="color:orange;"><strong>Full width</strong></mark></td></tr><tr><td>Upload image</td><td>Select the image and apply it to all collections.</td></tr><tr><td>Upload image for mobile</td><td>Select the image and apply it to all collections on mobile.</td></tr><tr><td>Background overlay color</td><td>Set background overlay color for banner.</td></tr></tbody></table>

#### **There are 2 ways to setup banner:**

1. Upload one image for all collections: You can upload it right in the theme editor. Please choose **Collection Image** as below:

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FkGeDlNEdJfghSxZdkSCf%2Fimage.png?alt=media&#x26;token=e1617f8b-7704-4d0b-b0dc-7f65b8c18a8a" alt=""><figcaption></figcaption></figure>

2\. Upload different image for different collections: **don't upload an image in the theme editor of Collection Image**. Go to **Collection Admin** -> Upload an image at here:

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FqMjhCQixWW5a6rCm4qQz%2Fimage.png?alt=media&#x26;token=7b3f85b9-e70f-4f26-99f3-a13b31fbf1f2" alt=""><figcaption></figcaption></figure>

### \[BLOCK] Collection description

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td><strong>Description</strong></td><td></td></tr><tr><td>Show collection description</td><td>Enable to show collection description.</td></tr><tr><td>Show 'read more'/'read less'</td><td>Enable to show 'read more'/'read less' button for collection description.</td></tr><tr><td>Position</td><td><p>Select the display position of the collection description. There are 2 options:<br><br><mark style="color:orange;"><strong>Relative</strong></mark></p><p><mark style="color:orange;"><strong>Absolute</strong></mark></p></td></tr><tr><td>Content alignment</td><td>The alignment of the collection description vertically within the banner.<br><br><em><mark style="color:orange;">Note: Only applies for 'position: absolute'.</mark></em></td></tr><tr><td>Alignment</td><td>The alignment of the collection description horizontally within the banner.</td></tr><tr><td>Page content max width</td><td>Set the maximum width of the collection description. Unit %.</td></tr><tr><td>Text color - Background - Background gradient</td><td>Set the text color and background color for collection description.</td></tr><tr><td><strong>Sub-collection</strong></td><td></td></tr><tr><td>Show sub-collection</td><td>Enable to show sub-collection.</td></tr><tr><td>Sub-collection layout</td><td>Select the layout for sub-collection.</td></tr><tr><td>Sub collection max height</td><td>Determine max height for sub-collection.<br><br><em><mark style="color:orange;">Note: Use for grid layout.</mark></em></td></tr><tr><td>Position</td><td><p>Select the position for sub-collection. There are 2 options:<br><br><mark style="color:orange;"><strong>Relative</strong></mark></p><p><mark style="color:orange;"><strong>Absolute</strong></mark></p></td></tr><tr><td>Show</td><td>Select to limit the display of sub-collection items. There are 2 options:<br><br><mark style="color:orange;"><strong>All sub-collections</strong> (show all items)</mark><br><mark style="color:orange;"><strong>Some sub-collections</strong> (show only 5 items)</mark></td></tr><tr><td>Background - Background gradient</td><td>Set the background/gradient for sub-collection.</td></tr><tr><td>Top padding</td><td>Determine the spacing top of the sub-collection.</td></tr><tr><td>Bottom padding</td><td>Determine the spacing bottom of the sub-collection.</td></tr><tr><td>Title</td><td>Enter the title for the sub-collection.</td></tr><tr><td>Color</td><td>Set the color for the title.</td></tr><tr><td>Font size</td><td>Set the font size for the title.</td></tr><tr><td>Font weight</td><td>Set the font weight for the title.</td></tr><tr><td>Text style</td><td>Set the text transform for the title.</td></tr><tr><td>Show sub-collection image</td><td>Enable to show sub-collection image.</td></tr><tr><td>Item top padding</td><td>Determine the spacing top of each item.</td></tr><tr><td>Item bottom padding</td><td>Determine the spacing bottom of each item.</td></tr><tr><td>Grid gap</td><td>Determine the spacing between 2 items.</td></tr><tr><td>Color - Background - Background gradient - Border color - Hover color - Background hover color - Background hover gradient - Border hover color</td><td>Set the text color, background, and border color for both the normal and hover states of the item.</td></tr><tr><td>Section top padding</td><td>Determine the spacing top of the sub-collection section.</td></tr></tbody></table>