> 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/slideshow.md).
# Slideshow
The **Slideshow** section is a large visual banner designed to capture attention. It lets you showcase striking images with headings, text, and buttons — ideal for highlighting key messages or promotions at the top of your homepage.
## 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 Slideshow 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 **Slideshow Section.**
This section is built based on the **Custom Section** and reusable blocks such as **Group, Heading, Text, Icon, Image**, etc. Below are the basic settings that allow you to customize the layout of this section.
### Testimonial - Settings Guide
#### Section settings — Layout & Type
| Setting | Type | Description | Visibility |
| ----------------------------- | ---------: | --------------------------------------------------------------------- | -------------------------------------- |
| Slideshow Type | select | Layout mode: Default (slider) or Masonry (grid-like masonry gallery). | Always visible |
| Enable Multi-Level Categories | checkbox | Enable multi-level category UI for left categories. | Always visible |
| Section Width | select | Container sizing: page-width, full-width, or custom. | Always visible |
| Page Width (Custom) | range (px) | Custom page width when Section Width is Custom. Default: 1570. | Visible when Section Width is "custom" |
#### Slide size & height
| Setting | Type | Description | Visibility |
| ----------------------- | --------: | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Slide Height (Desktop) | select | Preset heights (adapt to image, small, medium, large, full-screen, custom). Default: medium. | Visible when Slideshow Type is not "masonry" |
| Custom Height (Desktop) | range (%) | Custom slide height (svh) used when Slide Height is Custom. Default: 100 (%). | Visible when Slide Height is "custom" and Slideshow Type is not "masonry" |
| Slide Height (Mobile) | select | Mobile slide height presets (same options). Default: medium. | Visible when Slideshow Type is not "masonry" |
| Custom Height (Mobile) | range (%) | Custom mobile slide height when mobile height is Custom. Default: 100 (%). | Visible when Slide Height (Mobile) is "custom" and Slideshow Type is not "masonry" |
#### Masonry layout (when selected)
| Setting | Type | Description | Visibility |
| ----------------------------- | ------------------: | ------------------------------------------------- | ---------------------------------------- |
| Masonry Image Corner Radius | range (px) | Corner radius for masonry images. Default: 0. | Visible when Slideshow Type is "masonry" |
| Masonry Gap | range (px) | Gap between masonry tiles. Default: 22. | Visible when Slideshow Type is "masonry" |
| Masonry Row Heights (1..4) | text (px) | Row heights (px) for masonry rows. | Visible when Slideshow Type is "masonry" |
| Masonry Images / Links (1..9) | image\_picker / url | Media and links used by the masonry layout items. | Visible when Slideshow Type is "masonry" |
#### Carousel behavior
| Setting | Type | Description | Visibility |
| ------------------ | ---------: | ------------------------------------------------------------------------------------- | ---------------------------------------------- |
| Slide Direction | select | Slide axis: horizontal or vertical. Default: horizontal. | Visible when Slideshow Type is not "masonry" |
| Autoplay | checkbox | Automatically advance slides. | Always visible |
| Autoplay Speed | range (s) | Seconds between autoplay transitions. Default: 5s. | Always visible |
| Loop | checkbox | Loop slides when reaching the end. | Always visible |
| Navigation | select | Navigation controls: none / arrows / pagination / arrows+pagination. Default: arrows. | Always visible |
| Arrows Position | select | Position of arrow controls (center vertical / bottom center / bottom right). | Visible when Navigation includes "arrows" |
| Arrows Buttons Gap | range (px) | Horizontal gap for arrow buttons when position is bottom\_\* . | Visible when Arrows Position != "center\_vert" |
#### Pagination / Dots
| Setting | Type | Description | Visibility |
| ------------------- | ---------: | -------------------------------------------------------------- | -------------------------------------------------------------------- |
| Pagination Type | select | Bullets, dynamic, progress bar, or fraction. Default: bullets. | Visible when Navigation includes "pagination" |
| Pagination Position | select | Inside slide or outside. Default: inside. | Visible when Navigation is "pagination" |
| Dot Style | select | Visual style for bullet dots (filled/outlined). | Visible when Pagination Type is "bullets" |
| Dot Appearance | checkbox | Enable custom dot appearance (custom background, radius). | Visible when Pagination Type is "bullets" |
| Dot Background | color | Background color used by custom dots. | Visible when Dot Appearance is true and Pagination Type is "bullets" |
| Dot Border Radius | range (px) | Corner radius for custom dot shape. | Visible when Dot Appearance is true and Pagination Type is "bullets" |
#### Mobile & stacking
| Setting | Type | Description | Visibility |
| -------------------- | -------: | ------------------------------------------------ | -------------- |
| Stack Content Mobile | checkbox | Stack slide content vertically on small screens. | Always visible |
#### Left categories (optional)
| Setting | Type | Description | Visibility |
| -------------------------------- | ---------: | ------------------------------------------------------------------------ | ----------------------------------------- |
| Show Left Categories | checkbox | Show a left-side categories list next to the slideshow (default layout). | Visible when Slideshow Type is "default" |
| Left Categories Title | text | Title shown above the left categories. | Visible when Show Left Categories is true |
| Left Categories Title Color | color | Title foreground color. | Visible when Show Left Categories is true |
| Left Categories Title Background | color | Title background color. | Visible when Show Left Categories is true |
| Left Categories Text Color | color | Text color for category items. | Visible when Show Left Categories is true |
| Left Categories Menu | link\_list | Menu source used to build the categories list. | Visible when Show Left Categories is true |
#### Right banner (optional)
| Setting | Type | Description | Visibility |
| ----------------------- | ------------: | ------------------------------------------------------------- | ---------------------------------------- |
| Show Right Banner | checkbox | Show a grid of up to 4 promotional banners on the right side. | Visible when Slideshow Type is "default" |
| Right Banner Image 1..4 | image\_picker | Banner image assets for right-side items. | Visible when Show Right Banner is true |
| Right Banner Link 1..4 | url | Link targets for each right-side banner image. | Visible when Show Right Banner is true |
| Open Links in New Tab | checkbox | Open right-banner links in a new tab when enabled. | Always visible |
#### Animations
| Setting | Type | Description | Visibility |
| -------------- | -----: | ----------------------------------------------------------------- | -------------- |
| Image Behavior | select | Image animation: none, ambient movement, parallax. Default: none. | Always visible |
#### Colors & Padding
| Setting | Type | Description | Visibility |
| ---------------------- | ------------: | ------------------------------------ | -------------- |
| Color Scheme (Desktop) | color\_scheme | Color scheme used for the slideshow. | Always visible |
| Color Scheme (Mobile) | color\_scheme | Mobile color scheme override. | Always visible |
| Padding Top | range (px) | Section top padding. Default: 36. | Always visible |
| Padding Bottom | range (px) | Section bottom padding. Default: 36. | Always visible |
The content inside is set up based on the **Slide block**. You can find more information [\[here\]](/ella-7-documentation/sections-and-blocks/slideshow/slide-block.md).
## 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.