> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-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/ella-7-documentation/sections-and-blocks/collection-list.md). # Collection list
## There are 2 ways to add a Section to your store ### **1. Add a pre-made section from our demo?** [Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md) ### **2. Add the** Collection List **section** manually**?** 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 #### Layout | Setting | Meaning | | ------------------- | ------------------------------------------------------------------------------------------------------ | | Direction | Set content layout direction for Desktop: vertical or horizontal. | | Direction on mobile | Set content layout direction for Mobile: vertical or horizontal. | | Alignment | Align content to the left, center, or right. | | Position | Set position of content | | Gap | Adjust the spacing between elements from 0 -> 100px | ### Size | Setting | Meaning | | ------- | ------------------- | | Width | Width of email box | | Height | Height of email box | ### Appearance | Setting | Meaning | | -------------------------------------------------------------------------- | ------------------------------------------------------------------ | | Color scheme | Choose the color style applied to this section. | | Background media | Choose None/ Image/ Video | | Image ( If you choose option "Image" on Background media setting) | Select image for Background media | | Video ( If you choose option "Video" on Background media setting) | Select a video for Background media | | Image position ( If you choose option "Image" on Background media setting) | Set how the image is displayed: cover or fit within the container. | | Video position ( If you choose option "Video" on Background media setting) | Set how the video fits in the container: cover or contain. | | Borders | Choose the border style for the element: none or solid. | | Corner radius | Adjust the roundness of element corners (0–100px). | | Background overlay | Toggle to enable or disable the background overlay. | ### Padding | Setting | Meaning | | ------- | ------------------------------------------------ | | Top | Adjust the spacing at the top of the section. | | Bottom | Adjust the spacing at the bottom of the section. | ## Block Settings ### \[BLOCK] Header | Settings | Meaning | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Direction | Choose the layout direction for the section or elements: vertical or horizontal. | | Direction on mobile | Choose the layout direction for the section or elements on Mobile: vertical or horizontal. | | Alignment | Set the horizontal alignment of elements | | Position | Set the vertical position of the element | | Mobile alignment | Set the horizontal alignment of elements specifically for mobile devices. | | Position mobile | Set the vertical position of the element for mobile devices | | Gap | Adjust the spacing between elements. | | Width | Set the element’s width | | Mobile width | Set the element’s width specifically for mobile devices. | | Height | Set the height of the element. | | Inherit color scheme |

| | Background | When **“Inherit color scheme”** is **disabled**, you can choose a solid background color | | Background gradient | When **“Inherit color scheme”** is **disabled, you can a**pply a gradient color background. | | Headings | When **“Inherit color scheme”** is **disabled,** you can set a custom color for headings. | | Text | When **“Inherit color scheme”** is **disabled,** you can set a custom color for regular text. | | Links | When **“Inherit color scheme”** is **disabled,** you can define a color for links | | Hover links | When **“Inherit color scheme”** is **disabled,** you can define how links or elements change color on hover. | | Borders | When **“Inherit color scheme”** is **disabled,** you can customize the border color. | | Shadow | When **“Inherit color scheme”** is **disabled, you can choose the color for shadow** | | Background media | Choose the background type | | Borders | Choose the border style | | Corner radius | Adjust how rounded the section’s corners appear. | | Background overlay | Toggle to enable or disable the background overlay effect. | | Enable parallax scroll | Toggle to enable or disable the parallax scrolling effect | | Shadow | Add a shadow effect | | Horizontal offset | Adjust the horizontal position of the section’s shadow. | | Vertical offset | Adjust the Vertical position of the section’s shadow. | | Blur | Adjust the blur level of the section’s shadow. | | Spread | Adjust how far the section’s shadow spreads outward. | | Top | Adjust the space above | | Top margin mobile | Adjust the space above for mobile | | Bottom | Adjust the space below | | Bottom margin mobile | Adjust the space below for mobile | | Left | Adjust the space to the left | | Left margin mobile | Adjust the space to the left for mobile | | Right | Adjust the space to the right | | Top margin mobile | Adjust the space to the right for mobile | | Top | Adjust the inner spacing at the top | | Bottom | Adjust the inner spacing at the bottom | | Left | Adjust the inner spacing at the left | | Right | Adjust the inner spacing at the right | ### \[BLOCK] Heading | Settings | Meaning | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | | Text | Enter text to show | | Special text | Toggle to enable or disable special text style. | | Highlight | Toggle to enable or disable text highlight. | | Spacing text | Toggle to enable or disable text spacing adjustment. | | Stroke | Add or adjust the outline (stroke) of the text. | | Width | Set the element width for Desktop: fit content, fill container, or use custom size. | | Inherit text alignment | Toggle to inherit text alignment from the parent section. | | Tablet width | Set the element width for Tablet: fit content, fill container, or use custom size. | | Mobile width | Set the element width for Mobile: fit content, fill container, or use custom size. | | Preset ( Typography) | Select a predefined typography style for text. | | Background | Toggle to enable or disable background for the title. | | Enable border | Toggle to enable or disable the border. | | Enable bottom border | Toggle to Enable bottom border | | Effects | Choose an animation effect for the element. | | Top | Adjust the spacing above the heading. | | Bottom | Adjust the spacing below the heading. | | Left | Adjust the spacing to the left of the heading. | | Right | Adjust the spacing to the right of the heading. | #### \[BLOCK] Collection items | Settings | Meaning | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Type | Choose how content is displayed | | Carousel on mobile | Toggle to enable or disable carousel mode on mobile devices. | | Columns | Set the number of columns to display | |

Mobile columns

| Set the number of columns to display for mobile | | Position | Set the vertical position of the content within the block | | Gap | Adjust the spacing between items in the block | | Height | Set the height of element. | | Inherit text alignment |

| | Background |

When “Inherit color scheme” is disabled, you can choose a solid background color

| | Background gradient | When **“Inherit color scheme”** is **disabled, you can a**pply a gradient color background. | | Headings | When **“Inherit color scheme”** is **disabled,** you can set a custom color for headings. | | Text | When **“Inherit color scheme”** is **disabled,** you can set a custom color for regular text. | | Links | When **“Inherit color scheme”** is **disabled,** you can define a color for links | | Hover links | When **“Inherit color scheme”** is **disabled,** you can define how links or elements change color on hover. | | Borders | When **“Inherit color scheme”** is **disabled,** you can customize the border color. | | Shadow | When **“Inherit color scheme”** is **disabled, you can choose the color for shadow** | | Background media | Choose the background type | | Media overlay | Toggle to enable or disable an overlay on the media. | | Top | Adjust the space above the element | | Bottom | Adjust the space below the element | | Left | Adjust the space on the left side of the element | | Right | Adjust the space on the right side of the element | ## Need More Help? If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our [Ticket System](https://halosoft.ticksy.com/) — we’ll get back to you within 24 hours. Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
Halothemes Community
Join HaloThemes Community