Product List (Multiple Collection)

Product List (Multiple Collection) section allows customers to browse and explore products from multiple collections in one place. Each collection can be selected or combined to display a wider range of items that match different interests or categories.

Currently, there are 5 pre-installed layouts available for you to choose from:

• Tabs Grid

• Tabs Carousel

• Vertical

• Duo

• Duo Carousel

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 Product List section manually?

• From your Shopify admin, go to Online Store -> Themes.

• Find the theme that you want to edit, and then click Customize.

• In the Templates -> Add section -> choose Product List: Tabs grid / Product List: Tabs carousel / Product List: Duo / Product List: Duo Carousel / Product List: Vertical

Product List (Multiple Collection) - Settings Guide

This guide explains all available settings for the Product List (Multiple Collection) section in order from top to bottom as they appear in the Theme Editor.

Product List (Multiple Collection) - Settings Guide

---

Basic Settings

Setting	Type	Default	Description	Visibility
Layout Type	Select	Tabs Grid	Choose the layout style: • Tabs Grid - Tab navigation with grid • Tabs Carousel - Tab navigation with carousel • Vertical - Vertical stacked layout • Duo - Two-column layout • Duo Carousel - Two-column with carousel	-
Collection List	Collection List	-	Select multiple collections to display	-
Maximum Products to Show	Range	4	Number of products per collection (2-25)	-
Number of Columns (Desktop)	Range	4	Product columns on desktop (1-6)	Hidden for Duo layouts
Number of Columns Items (Desktop)	Range	1	Block item columns for Duo layouts (1-5)	Only for Duo/Duo Carousel
Horizontal Gap	Range	8px	Spacing between product columns (0-100px)	-
Vertical Gap	Range	8px	Spacing between product rows (0-100px)	Not for carousels
Show View All Button	Checkbox	Yes	Enable/disable "View All" button	-
View All Style	Select	Solid	Button style: Link/Outline/Solid	-
Number of Columns (Mobile)	Select	2 Columns	Choose 1 or 2 columns on mobile	Not for Vertical/Duo layouts
Enable Swipe on Mobile	Checkbox	No	Enable touch swipe navigation	Only for Tabs Grid/Carousel

---

Carousel Settings

Only visible when layout is Tabs Carousel or Duo Carousel

Setting	Type	Default	Description	Visibility
Loop	Checkbox	No	Enable infinite loop scrolling	Tabs Carousel only
Full Width	Checkbox	No	Extend carousel to full viewport width	Only when section width is "Page Width" and Tabs Carousel
Navigation	Select	Arrows	Navigation style: None/Arrows/Pagination/Arrows + Pagination	-
Pagination Type	Select	Bullets	Pagination style: Dots/Dynamic/Progress/Counter	-
Dots Top Offset	Range	40px	Distance from dots to content (20-100px)	Only for Bullets pagination
Progress Top Offset	Range	40px	Distance from progress bar to content (20-100px)	Only for Progress bar

---

Appearance & Section Settings

Setting	Type	Default	Description	Visibility
Section Width	Select	Page Width	Container width: Page Width/Full Width/Custom	-
Custom Page Width	Range	1570px	Custom container width (1000-2000px)	Only when width is Custom
Color Scheme	Color Scheme	Scheme 1	Apply theme color scheme to section	-
Padding Top	Range	36px	Top spacing for entire section (0-100px)	-
Padding Bottom	Range	36px	Bottom spacing for entire section (0-100px)	-
Padding Left	Range	0px	Left spacing for entire section (0-100px)	-
Padding Right	Range	0px	Right spacing for entire section (0-100px)	-

Tabs Header Settings

Only visible for Tabs Grid and Tabs Carousel layouts

Setting	Type	Default	Description	Visibility
Tabs Header Style	Select	Default	Position: Default/Inside Section Header	-
Alignment (Desktop)	Text Alignment	Center	Horizontal alignment (left/center/right)	-
Max Width	Range	100%	Maximum width of tab header (0-100%)	-
Gap	Range	16px	Spacing between tab items (0-100px)	-
Padding Top	Range	0px	Top padding for tab header (0-100px)	Only for Default style
Padding Bottom	Range	20px	Bottom padding for tab header (0-100px)	Only for Default style
Style	Select	Button	Tab appearance: Primary/Secondary/Link	-
Type	Select	Default	Button variant: Default/Outline/Custom	When Style is not Link

---

Button Customization

Settings for tab buttons when Type is Custom or Style is Link

Setting	Type	Default	Description	Visibility
Border Width	Range	1px	Button border thickness (0-4px)	Custom type, not Link
Border Radius	Range	100px	Button corner roundness (0-100px)	Custom type, not Link
Font	Select	Body	Font family (Body/Subheading/Heading)	Custom type, not Link
Size	Select	12px	Font size (10px-28px or Default)	All styles
Font Weight	Select	Default	Text weight (Thin to Black)	All styles
Text Case	Select	Default	Text transformation (Default/Uppercase)	Custom type, not Link
Case	Select	None	Text transformation (Default/Uppercase/Capitalize)	Link style only
Wrap	Select	-	Text wrapping (Pretty/Balance/None)	Link style only
Font Style	Select	Normal	Text style (Normal/Italic/Oblique)	Link style only
Underline	Checkbox	No	Show permanent underline	Link style only
Hover Underline	Checkbox	Yes	Show underline on hover	Link style only
Reveal on Hover	Checkbox	No	Animate text reveal on hover	Link style only
Custom Underline Color	Checkbox	No	Enable custom underline color	Link style only
Underline Color	Color	#000000	Custom color for underline	Link style only
Shadow Horizontal Offset	Range	0px	Horizontal shadow position (-12 to 12px)	Custom type, not Link
Shadow Vertical Offset	Range	0px	Vertical shadow position (-12 to 12px)	Custom type, not Link
Shadow Blur	Range	0px	Shadow blur amount (0-20px)	Custom type, not Link
Padding Top/Bottom	Range	8px	Vertical padding inside buttons (0-20px)	Not Link style
Padding Left/Right	Range	16px	Horizontal padding inside buttons (0-40px)	Not Link style

---

Media Settings

Not available for Vertical, Duo, and Duo Carousel layouts

Setting	Type	Default	Description	Visibility
Size	Select	Medium	Banner size (Small/Medium/Large)	-
Background Media	Select	Image	Media type (Image/Video)	-
Banner Image	Image Picker	-	Upload banner image	When media is Image
Video Source	Select	Uploaded	Video source (Uploaded/External URL)	When media is Video
Video	Video	-	Upload video file	When source is Uploaded
Video URL	Video URL	-	External video link (YouTube/Vimeo)	When source is External URL
Video Display Mode	Select	Inline	How video plays (Inline/Popup)	When media is Video
Cover Image	Image Picker	-	Video thumbnail	When media is Video
Video Autoplay	Checkbox	No	Auto-play when visible	When video is set, Inline mode
Video Loop	Checkbox	Yes	Loop video playback	When video is set
Video Description	Text	-	Alt text for accessibility	When source is External URL
Ratio	Select	Adapt	Aspect ratio (Adapt/Landscape/Portrait/Square)	-
Image Fit	Select	Cover	How image fits (Cover/Contain)	When ratio is not Adapt
Position	Select	Left	Media position (Left/Right)	-
Height	Select	Fill	Container height (Fit Content/Fill)	When ratio is Adapt
Align Items	Select	Stretch	Vertical alignment (Default/Top/Center/Bottom)	-

---

Content Inside Media

Not available for Vertical, Duo, and Duo Carousel layouts

Setting	Type	Default	Description	Visibility
Position	Select	Center	Vertical position (Top/Center/Bottom)	-
Alignment	Text Alignment	Left	Horizontal alignment	-
Heading	Inline Rich Text	-	Main heading text	-
Heading Bottom Spacing	Range	0px	Space below heading (0-100px)	-
Heading Preset	Select	Default	Typography preset	When heading exists
Subheading	Inline Rich Text	-	Secondary heading text	-
Subheading Bottom Spacing	Range	0px	Space below subheading (0-100px)	-
Subheading Preset	Select	Default	Typography preset	When subheading exists
Text	Inline Rich Text	-	Body text content	-
Text Bottom Spacing	Range	0px	Space below text (0-100px)	-
Text Preset	Select	Default	Typography preset	When text exists
Button Label	Text	-	Button text	-
Button Style	Select	Button	Button appearance (Primary/Secondary/Link)	-
Button Link	URL	-	Button destination URL	-

Custom Typography Settings

Available when any content preset is set to Custom

Setting	Type	Default	Description
Font	Select	Body	Font family (Body/Subheading/Heading)
Size	Select	Default	Font size (10px-120px or Default)
Line Height	Select	Normal	Line spacing (Tight/Normal/Loose)
Letter Spacing	Select	Normal	Character spacing (Tight/Normal/Loose)
Case	Select	None	Text transformation (Default/Uppercase/Capitalize)
Wrap	Select	-	Text wrapping (Pretty/Balance/None)
Color	Select	Text	Text color (Text/Heading/Link)

Default Block

This section also includes 2 default blocks: Section Header and Product Card, similar to the Product List (Single Collection) section.

1. Section Header

2. Product Card

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