# 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.
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/slideshow.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.