Product List (Single Collection)
The Product List section allows customers to easily browse all available items in the store. Each product is displayed with clear images, names, prices, and key details to support quick decision-making. The layout is designed to offer a clean and professional shopping journey.
This section only supports displaying a product list from a single collection. If you want to display multiple collections in one section, please refer to Product List (Multiple Collection).
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 (Single Collection) 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: Carousel / Product List: Grid.
Featured Collection - Settings Guide
This guide explains all available settings for the Featured Collection section in order from top to bottom as they appear in the Theme Editor.
Featured Collection - Settings Guide
Basic Settings
Collection
Collection
-
Select collection to display products from
-
Layout Type
Select
Grid
Layout style: • Grid - Grid layout with columns • Carousel - Horizontal sliding carousel • Editorial - Magazine-style layout • Widget - Compact widget layout
-
Widget Layout
Select
Default
Widget style: • Default - Standard widget • Spotlight - Featured product highlight
Only when Layout Type is Widget
Products to Show
Range
4
Number of products to display (2-25)
-
Number of Columns (Desktop)
Range
4
Product columns on desktop (1-6)
Not Editorial or Widget layouts
Number of Columns (Desktop Widget)
Select
1
Desktop columns for widget (1-2)
Widget layout, not Spotlight
Horizontal Gap
Range
8px
Spacing between product columns (0-100px)
Not Editorial, not Widget Spotlight
Media Size
Select
Medium
Banner size (Small/Medium/Large)
Not Widget Spotlight
Banner Image
Image Picker
-
Upload banner image
-
Video Source
Select
Uploaded
Video source (Uploaded/External URL)
-
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)
-
Video Autoplay
Checkbox
No
Auto-play video when visible
When video is set and display mode is Inline
Video Loop
Checkbox
Yes
Loop video playback
When video is set
Video Alt Text
Text
-
Alt text for accessibility
When source is External URL
Position
Select
Left
Media position (Left/Right)
Not Widget Spotlight
Align Items
Select
Stretch
Vertical alignment (Default/Top/Center/Bottom)
-
Media Ratio
Select
Adapt
Aspect ratio (Adapt/Landscape/Portrait/Square)
-
Content Inside Media
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)
Subheading
Inline Rich Text
-
Secondary heading text
Subheading Bottom Spacing
Range
0px
Space below subheading (0-100px)
Text
Inline Rich Text
-
Body text content
Text Bottom Spacing
Range
0px
Space below text (0-100px)
Button Label
Text
-
Button text
Button Style
Select
Button
Button appearance (Primary/Secondary/Link)
Button Link
URL
-
Button destination URL
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
-
Section Padding
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)
Default Block
1. Section Header
This section sets up the header content for the product list. It supports flex sections, allowing you to add blocks to configure the header layout as you wish.
The supported blocks:
Heading
Text
Button
Image
Group
Featured Collection - Settings Guide:
This guide explains all available settings for the Section Header block in order from top to bottom as they appear in the Theme Editor.
Featured Collection - Settings Guide
Layout Settings
Direction
Select
Row
Content flow direction: • Vertical - Stack items vertically • Horizontal - Arrange items horizontally
-
Direction on Mobile
Select
Column
Mobile layout direction: • Vertical - Stack items vertically • Horizontal - Arrange items horizontally
-
Alignment
Select
Left
Horizontal alignment when direction is Row: • Left - Align to left • Center - Center alignment • Right - Align to right • Space Between - Distribute space
When Direction is Row
Position
Select
Center
Vertical alignment when direction is Row: • Stretch - Fill height • Top - Align to top • Center - Center alignment • Bottom - Align to bottom
When Direction is Row
Align Baseline
Checkbox
No
Align text to baseline
When Position is Bottom
Alignment (Column)
Select
Left
Horizontal alignment when direction is Column: • Left - Align to left • Center - Center alignment • Right - Align to right
When Direction is Column
Position (Column)
Select
Center
Vertical alignment when direction is Column: • Top - Align to top • Center - Center alignment • Bottom - Align to bottom • Space Between - Distribute space
When Direction is Column
Mobile Alignment
Select
Left
Horizontal alignment on mobile when mobile direction is Row: • Left - Align to left • Center - Center alignment • Right - Align to right • Space Between - Distribute space
When Mobile Direction is Row
Position Mobile
Select
Center
Vertical alignment on mobile when mobile direction is Row: • Stretch - Fill height • Top - Align to top • Center - Center alignment • Bottom - Align to bottom
When Mobile Direction is Row
Mobile Alignment (Column)
Select
Left
Horizontal alignment on mobile when mobile direction is Column: • Left - Align to left • Center - Center alignment • Right - Align to right
When Mobile Direction is Column
Position Mobile (Column)
Select
Center
Vertical alignment on mobile when mobile direction is Column: • Top - Align to top • Center - Center alignment • Bottom - Align to bottom • Space Between - Distribute space
When Mobile Direction is Column
Gap
Range
12px
Spacing between child elements (0-100px)
-
Size Settings
Width
Select
Fill
Block width behavior: • Fit Content - Width based on content • Fill - Take full available width • Custom - Custom width percentage
-
Custom Width
Range
100%
Custom width percentage (0-100%)
When Width is Custom
Appearance Settings
Inherit Color Scheme
Checkbox
Yes
Use parent section's color scheme
-
Background
Color
#FFFFFF
Background color with alpha support
When not inheriting color scheme
Background Gradient
Color Background
-
Background gradient overlay
When not inheriting color scheme
Headings
Color
#000000
Heading text color with alpha support
When not inheriting color scheme
Text
Color
#000000
Body text color with alpha support
When not inheriting color scheme
Primary Color
Color
#000F9F
Primary/accent color with alpha support
When not inheriting color scheme
Primary Hover Color
Color
#000000
Primary hover state color with alpha support
When not inheriting color scheme
Borders
Color
#E6E6E6
Border color with alpha support
When not inheriting color scheme
Shadow
Color
#000000
Shadow color with alpha support
When not inheriting color scheme
Borders Style
Select
None
Border style: • None - No borders • Solid - Solid border
-
Border Width
Range
1px
Border thickness (0-10px)
When Borders Style is not None
Border Opacity
Range
0%
Border transparency (0-100%)
When Borders Style is not None
Border Radius
Range
0px
Corner roundness (0-100px)
-
Margin Settings
Margin Top
Range
0px
Top margin spacing (0-100px)
Margin Bottom
Range
0px
Bottom margin spacing (0-100px)
Padding Settings
Padding Top
Range
0px
Top padding spacing (0-100px)
Padding Right
Range
0px
Right padding spacing (0-100px)
Padding Bottom
Range
0px
Bottom padding spacing (0-100px)
Padding Left
Range
0px
Left padding spacing (0-100px)
2. Product Card
This section displays the list of products in the collection you have selected.
The supported blocks:
Group: Product media
Group: Information
Product vendor
Product title
Price
Product variant
Spacer
Product button
Product Card - Settings Guide:
This guide explains all available settings for the Product Card Flex block in order from top to bottom as they appear in the Theme Editor.
Product Card - Settings Guide:
Basic Settings
Product
Product
-
Select product to display in the card
Appearance Settings
Inherit Color Scheme
Checkbox
Yes
Use parent section's color scheme
-
Background
Color
#FFFFFF
Background color with alpha support
When not inheriting color scheme
Background Gradient
Color Background
-
Background gradient overlay
When not inheriting color scheme
Headings
Color
#000000
Heading text color with alpha support
When not inheriting color scheme
Text
Color
#000000
Body text color with alpha support
When not inheriting color scheme
Primary Color
Color
#000F9F
Primary/accent color with alpha support
When not inheriting color scheme
Primary Hover Color
Color
#000000
Primary hover state color with alpha support
When not inheriting color scheme
Borders
Color
#E6E6E6
Border color with alpha support
When not inheriting color scheme
Shadow Color
Color
#000000
Shadow color with alpha support
When not inheriting color scheme
Padding Settings
Padding Top
Range
36px
Top padding spacing (0-100px)
Padding Bottom
Range
36px
Bottom padding spacing (0-100px)
Padding Left
Range
0px
Left padding spacing (0-100px)
Padding Right
Range
0px
Right padding spacing (0-100px)
Border Settings
Borders Style
Select
None
Border style: • None - No borders • Solid - Solid border
-
Border Width
Range
1px
Border thickness (0-10px)
When Borders Style is not None
Border Opacity
Range
100%
Border transparency (0-100%)
When Borders Style is not None
Border Radius
Range
0px
Corner roundness (0-100px)
-
Layout Settings
Direction
Select
Column
Content flow direction: • Vertical - Stack items vertically • Horizontal - Arrange items horizontally
Wrap
Select
No Wrap
Content wrapping behavior: • No - Items stay on single line • Yes - Items wrap to new lines
Align Items
Select
Stretch
Cross-axis alignment: • Default - Stretch to fill • Top - Align to start • Center - Center alignment • Bottom - Align to end
Justify Content
Select
Start
Main-axis alignment: • Start - Align to beginning • Center - Center alignment • End - Align to end • Space Between - Distribute with space between • Space Around - Distribute with space around • Space Evenly - Distribute evenly
Gap
Range
12px
Spacing between child elements (0-100px)
Size Settings
Width
Select
Fill
Block width behavior: • Fit Content - Width based on content • Fill - Take full available width • Custom - Custom width percentage
-
Custom Width
Range
100%
Custom width percentage (0-100%)
When Width is Custom
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