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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/product-list-single-collection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.