> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/product-list-single-collection.md).

# 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.

{% hint style="info" %}
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).
{% endhint %}

<figure><img src="/files/LWvkvrLzRMQMbVBThXXR" alt=""><figcaption></figcaption></figure>

## There are 2 ways to add a Section to your store

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

[Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)

### **2. Add the Product List (Single Collection) section** manuall&#x79;**?**

* 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.**

<figure><img src="/files/uJ3SbII66tkrOK6gAAyD" alt=""><figcaption></figcaption></figure>

## 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.

<details>

<summary>Featured Collection - Settings Guide</summary>

***

### Basic Settings

| Setting                                | Type         | Default  | Description                                                                                                                                                                                                                                          | Visibility                                   |
| -------------------------------------- | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Collection**                         | Collection   | -        | Select collection to display products from                                                                                                                                                                                                           | -                                            |
| **Layout Type**                        | Select       | Grid     | <p>Layout style:<br>• <strong>Grid</strong> - Grid layout with columns<br>• <strong>Carousel</strong> - Horizontal sliding carousel<br>• <strong>Editorial</strong> - Magazine-style layout<br>• <strong>Widget</strong> - Compact widget layout</p> | -                                            |
| **Widget Layout**                      | Select       | Default  | <p>Widget style:<br>• <strong>Default</strong> - Standard widget<br>• <strong>Spotlight</strong> - Featured product highlight</p>                                                                                                                    | 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)  |

</details>

## 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.

<figure><img src="/files/0SESiNoTA3cWl5nHD95n" alt=""><figcaption></figcaption></figure>

* **The supported blocks:**&#x20;
  * Heading
  * Text
  * Button
  * Image
  * Group
* **Featured Collection - Settings Guide:**&#x20;

  This guide explains all available settings for the **Section Header** block in order from top to bottom as they appear in the Theme Editor.

<details>

<summary>Featured Collection - Settings Guide</summary>

***

### Layout Settings

| Setting                       | Type     | Default | Description                                                                                                                                                                                                                                                         | Visibility                      |
| ----------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Direction**                 | Select   | Row     | <p>Content flow direction:<br>• <strong>Vertical</strong> - Stack items vertically<br>• <strong>Horizontal</strong> - Arrange items horizontally</p>                                                                                                                | -                               |
| **Direction on Mobile**       | Select   | Column  | <p>Mobile layout direction:<br>• <strong>Vertical</strong> - Stack items vertically<br>• <strong>Horizontal</strong> - Arrange items horizontally</p>                                                                                                               | -                               |
| **Alignment**                 | Select   | Left    | <p>Horizontal alignment when direction is Row:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right<br>• <strong>Space Between</strong> - Distribute space</p>                   | When Direction is Row           |
| **Position**                  | Select   | Center  | <p>Vertical alignment when direction is Row:<br>• <strong>Stretch</strong> - Fill height<br>• <strong>Top</strong> - Align to top<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to bottom</p>                                | When Direction is Row           |
| **Align Baseline**            | Checkbox | No      | Align text to baseline                                                                                                                                                                                                                                              | When Position is Bottom         |
| **Alignment (Column)**        | Select   | Left    | <p>Horizontal alignment when direction is Column:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right</p>                                                                       | When Direction is Column        |
| **Position (Column)**         | Select   | Center  | <p>Vertical alignment when direction is Column:<br>• <strong>Top</strong> - Align to top<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to bottom<br>• <strong>Space Between</strong> - Distribute space</p>                  | When Direction is Column        |
| **Mobile Alignment**          | Select   | Left    | <p>Horizontal alignment on mobile when mobile direction is Row:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right<br>• <strong>Space Between</strong> - Distribute space</p>  | When Mobile Direction is Row    |
| **Position Mobile**           | Select   | Center  | <p>Vertical alignment on mobile when mobile direction is Row:<br>• <strong>Stretch</strong> - Fill height<br>• <strong>Top</strong> - Align to top<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to bottom</p>               | When Mobile Direction is Row    |
| **Mobile Alignment (Column)** | Select   | Left    | <p>Horizontal alignment on mobile when mobile direction is Column:<br>• <strong>Left</strong> - Align to left<br>• <strong>Center</strong> - Center alignment<br>• <strong>Right</strong> - Align to right</p>                                                      | When Mobile Direction is Column |
| **Position Mobile (Column)**  | Select   | Center  | <p>Vertical alignment on mobile when mobile direction is Column:<br>• <strong>Top</strong> - Align to top<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to bottom<br>• <strong>Space Between</strong> - Distribute space</p> | When Mobile Direction is Column |
| **Gap**                       | Range    | 12px    | Spacing between child elements (0-100px)                                                                                                                                                                                                                            | -                               |

***

### Size Settings

| Setting          | Type   | Default | Description                                                                                                                                                                                           | Visibility           |
| ---------------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| **Width**        | Select | Fill    | <p>Block width behavior:<br>• <strong>Fit Content</strong> - Width based on content<br>• <strong>Fill</strong> - Take full available width<br>• <strong>Custom</strong> - Custom width percentage</p> | -                    |
| **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    | <p>Border style:<br>• <strong>None</strong> - No borders<br>• <strong>Solid</strong> - Solid border</p> | -                                |
| **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)   |

</details>

### 2. Product Card

This section displays the list of products in the collection you have selected.

<figure><img src="/files/PwzXSEAZebUniUSkxNBZ" alt=""><figcaption></figcaption></figure>

* **The supported blocks:**&#x20;
  * Group: Product media
  * Group: Information
  * Product vendor
  * Product title
  * Price
  * Product variant
  * Spacer
  * Product button&#x20;

* **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.

<details>

<summary><strong>Product  Card  - Settings Guide:</strong> </summary>

***

### 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    | <p>Border style:<br>• <strong>None</strong> - No borders<br>• <strong>Solid</strong> - Solid border</p> | -                              |
| **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  | <p>Content flow direction:<br>• <strong>Vertical</strong> - Stack items vertically<br>• <strong>Horizontal</strong> - Arrange items horizontally</p>                                                                                                                                                                                                               |
| **Wrap**            | Select | No Wrap | <p>Content wrapping behavior:<br>• <strong>No</strong> - Items stay on single line<br>• <strong>Yes</strong> - Items wrap to new lines</p>                                                                                                                                                                                                                         |
| **Align Items**     | Select | Stretch | <p>Cross-axis alignment:<br>• <strong>Default</strong> - Stretch to fill<br>• <strong>Top</strong> - Align to start<br>• <strong>Center</strong> - Center alignment<br>• <strong>Bottom</strong> - Align to end</p>                                                                                                                                                |
| **Justify Content** | Select | Start   | <p>Main-axis alignment:<br>• <strong>Start</strong> - Align to beginning<br>• <strong>Center</strong> - Center alignment<br>• <strong>End</strong> - Align to end<br>• <strong>Space Between</strong> - Distribute with space between<br>• <strong>Space Around</strong> - Distribute with space around<br>• <strong>Space Evenly</strong> - Distribute evenly</p> |
| **Gap**             | Range  | 12px    | Spacing between child elements (0-100px)                                                                                                                                                                                                                                                                                                                           |

***

### Size Settings

| Setting          | Type   | Default | Description                                                                                                                                                                                           | Visibility           |
| ---------------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| **Width**        | Select | Fill    | <p>Block width behavior:<br>• <strong>Fit Content</strong> - Width based on content<br>• <strong>Fill</strong> - Take full available width<br>• <strong>Custom</strong> - Custom width percentage</p> | -                    |
| **Custom Width** | Range  | 100%    | Custom width percentage (0-100%)                                                                                                                                                                      | When Width is Custom |

</details>

## 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](https://halosoft.ticksy.com/) — 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.

<div align="left"><figure><img src="/files/u3Ke6fbPZZvBlBetfneg" alt="Halothemes Community" width="233"><figcaption></figcaption></figure></div>

<a href="https://www.facebook.com/groups/halothemescommunity" class="button primary" data-icon="comment-dots">Join HaloThemes Community</a>