> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-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/bonnita-documentation/sections/all-sections-in-theme/slideshow.md).
# Slideshow
To add this section, please follow below steps:
1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Slideshow**".
### How to show Category Block for Slideshow like on the Supermarket Homepage?
* In Theme Editor of **Slideshow** -> Scroll down to "**BLOCK CATEGORIES**" -> **Select Menu Category** to show categories for this block.
{% hint style="warning" %}
You need to create a menu in Navigation first
{% endhint %}
**To show icons for categories, please follow below instruction to upload icons:**
* Prepare your Icon image with the same name as the menu name (please use PNG image format).
{% hint style="warning" %}
**Rules:** Lower cap and use a hyphen "-" to replace white space if your color image name has the white space.\
**For example:** with the menu name "Pellentes Habitanto", the image name will be **pellentes-habitanto.png**
Recommended size for icon image: 24 x 24px
{% endhint %}
* Go to **Settings** --> **Files**, upload images here:
## Section Settings
| Setting | Description |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| Layout | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width. |
| Padding Container Full Width | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected. |
| Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. |
| Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. |
| Background Color | Set the background of the slideshow. |
| Background Gradient | Set the background gradient of the slideshow. |
| Background Image | Upload / Choose an image as the background for the slideshow. |
#### SETTINGS FOR SLIDESHOW
| Setting | Description |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Slideshow Auto Play | Enable the autoplay feature on slideshow. |
| Change slides every | Select the interval to switch to the next slide. |
| Slideshow transition effect | Select the transition effect to be either fade or slide. |
| Dots Direction |
Select the position and direction of slideshow pagination dots on Desktop. Default: The dots are horizontal and centered. Left: The dots are vertical and to the left. Right: The dots are vertical and to the right.
|
| Enable Custom Arrow? | Enable to allow the custom arrow width, height and size. |
| Width Arrows | Determine the width of the arrow (for custom arrow) |
| Height Arrows | Determine the height of the arrow (for custom arrow) |
| Size Icon Arrows | Determine the size of the arrow icon (for custom arrow) |
| Color - Background - Border Color | Set the color, background and border for both normal and hover/active states of slideshow arrows. |
#### SETTINGS FOR VIDEO
| Setting | Description |
| ---------------------- | ------------------------------------------------------------------------------- |
| Slideshow Video Height | Fill in the video height in percentage relative to the height of the slideshow. |
| Autoplay video | Enable the video to auto play. |
#### BLOCK CATEGORIES
| Setting | Description |
| ---------------------- | ----------------------------------- |
| Enable Categories? | Enable to show the categories. |
| Title | Enter the title for the categories. |
| Title Color | Set the color of the title. |
| Title Background Color | Set the background for title. |
| Text Color | Set color for the text. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://halosoft.gitbook.io/bonnita-documentation/sections/all-sections-in-theme/slideshow.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.