Collection list

Display a list of featured collections with images, titles, and links to help customers explore your store easily. Perfect for highlighting product categories or seasonal collections.

There are 2 ways to add a Section to your store

1. Add a pre-made section from our demo?

Read the instructions here

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	When enabled, the element follows the color scheme When disabled, you can apply a custom color scheme for this element.
Background	When “Inherit color scheme” is disabled, you can choose a solid background color
Background gradient	When “Inherit color scheme” is disabled, you can apply 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	When enabled, the element follows the color scheme When disabled, you can apply a custom color scheme for this element.
Background	When “Inherit color scheme” is disabled, you can choose a solid background color
Background gradient	When “Inherit color scheme” is disabled, you can apply 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 — 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.

Join HaloThemes Community