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