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?
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
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
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
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
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
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
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
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
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.
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.
Last updated