> 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/video-carousel.md). # Video carousel The Video carousel section displays a row of looping videos with optional featured products. Use it to highlight product stories, lookbooks, or UGC-style clips on the homepage. Two layout styles are available: * **Style 1 — Default carousel:** equal-width slides with a centered infinite loop. * **Style 2 — Active video focus:** the playing video takes about 50% of the screen width; remaining videos share the rest. {% hint style="info" %} For Style 1, add at least twice as many Video blocks as the number of columns (for example, 5 columns needs 10+ videos). With fewer videos, some slides may be hidden. {% endhint %} ### 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 Video carousel 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 **Video carousel**. ### Video carousel - Settings Guide This guide explains all available settings for the Video carousel section in order from top to bottom as they appear in the Theme Editor. #### Layout & carousel | Setting | Type | Default | Description | Visibility | | -------------------------------------- | -------- | -------------------------- | ---------------------------------------------------------------- | ----------------------------------- | | Layout style | Select | Style 1 - Default carousel | Style 1: equal slides. Style 2: the playing video is larger. | Always | | Number of videos per row on desktop | Select | 5 | Desktop columns (3–7). | Style 1 only | | Gap between videos | Range | 15px | Space between video slides (0–100px). | Always | | Gap between video and featured product | Range | 15px | Space between the video and the product card below it (0–100px). | Always | | Enable autoplay | Checkbox | No | Automatically advance slides. | Always | | Speed | Range | 5s | Seconds between autoplay transitions (3–10s). | When autoplay is enabled | | Navigation | Select | Arrows | None / Arrows / Pagination / Arrows + Pagination. | Always | | Pagination type | Select | Dots | Dots / Dynamic / Progress / Counter. | When navigation includes pagination | | Dots top offset | Range | 40px | Distance from dots to content (20–100px). | Dots pagination | | Progress top offset | Range | 40px | Distance from progress bar to content (20–100px). | Progress pagination | #### Size, appearance & padding | Setting | Type | Default | Description | Visibility | | -------------------- | ------------ | ---------- | ------------------------------------- | -------------------- | | Section width | Select | Full width | Page width / Full width / Custom. | Always | | Page width | Range | 1570px | Custom container width (1000–2000px). | When width is Custom | | Color scheme | Color scheme | Scheme 1 | Section color scheme. | Always | | Padding top / bottom | Range | 50px | Vertical section spacing (0–100px). | Always | | Padding left / right | Range | 0px | Horizontal section spacing (0–100px). | Always | ### Default blocks #### 1. Section header A static header used for the heading above the carousel. Supported child blocks: Heading, Text, Button, Image, Group. #### 2. Video item Add one **Video** block for each clip. | Setting | Type | Default | Description | Visibility | | ------------------------ | --------- | ---------------- | --------------------------------------------------- | --------------------- | | Video source | Select | Uploaded | Uploaded file or external URL (YouTube / Vimeo). | Always | | Video | Video | — | Upload a Shopify video. | Uploaded source | | Video URL | Video URL | — | YouTube or Vimeo link. | External URL | | Cover image | Image | — | Thumbnail for external videos. | External URL | | Video controls layout | Select | Default Controls | Default player controls or custom minimal controls. | Always | | Video alt text | Text | — | Accessibility text for external videos. | External URL | | Border style | Select | None | None / Solid. | Always | | Thickness | Range | 1px | Border width (0–100px). | When border is Solid | | Corner radius | Range | 0px | Video corner roundness (0–100px). | When border is Solid | | Product | Product | — | Optional featured product shown under the video. | Always | | Testimonial text / quote | Text | — | Quote shown in Style 2 when a product is selected. | When a product is set | | Testimonial author name | Text | — | Author name for the quote (Style 2). | When a product is set | | Rating (Stars) | Range | 5 | Star rating 0–5 (Style 2). | When a product is set | | Rated / unrated colors | Color | — | Star colors. | When a product is set | | Product card border | Select | None | Border around the featured product card. | When a product is set | | Padding | Range | 0px | Inner spacing of the video item (0–32px). | Always | In **Style 1**, the featured product renders as a compact product card with quick add. In **Style 2**, it renders as a testimonial card (quote, author, rating) plus a mini product row. ### 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