> 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-multiple-collection.md).
# 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?**
[Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)
### **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
| Setting | Type | Default | Description | Visibility |
| ------------------------------------- | --------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **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***
| Setting | Type | Default | Description | Visibility |
| ----------------------- | -------- | ------- | ------------------------------------------------------------ | --------------------------------------------------------- |
| **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
| 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 | - |
| **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*
| Setting | Type | Default | Description | Visibility |
| ----------------------- | -------------- | ------- | ---------------------------------------- | ---------------------- |
| **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***
| Setting | Type | Default | Description | Visibility |
| ---------------------------- | -------- | ------- | -------------------------------------------------- | --------------------- |
| **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*
| Setting | Type | Default | Description | Visibility |
| ---------------------- | ------------ | -------- | ---------------------------------------------- | ------------------------------ |
| **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*
| Setting | Type | Default | Description | Visibility |
| ----------------------------- | ---------------- | ------- | ------------------------------------------ | ---------------------- |
| **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***
| Setting | Type | Default | Description |
| ------------------ | ------ | ------- | -------------------------------------------------- |
| **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.
### 1. [Section Header](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/pages/5AyB0W7BW5TmLJmsUYB8#id-1.-section-header)
### 2. [Product Card](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/pages/5AyB0W7BW5TmLJmsUYB8#id-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](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.