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?

Read the instructions here

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

Setting	Type	Default	Description	Visibility
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

Setting	Type	Default	Description
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

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	-

Section Padding

Setting	Type	Default	Description
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

Setting	Type	Default	Description	Visibility
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

Setting	Type	Default	Description	Visibility
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

Setting	Type	Default	Description	Visibility
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

Setting	Type	Default	Description
Margin Top	Range	0px	Top margin spacing (0-100px)
Margin Bottom	Range	0px	Bottom margin spacing (0-100px)

---

Padding Settings

Setting	Type	Default	Description
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

Setting	Type	Default	Description
Product	Product	-	Select product to display in the card

---

Appearance Settings

Setting	Type	Default	Description	Visibility
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

Setting	Type	Default	Description
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

Setting	Type	Default	Description	Visibility
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

Setting	Type	Default	Description
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

Setting	Type	Default	Description	Visibility
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.

Join HaloThemes Community