# 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.
Halothemes Community
Join HaloThemes Community --- # 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-multiple-collection.md?ask= ``` 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.