# Slideshow

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FW3Xk2s11x2nxTgQDHZef%2Fimage.png?alt=media&#x26;token=16fb1045-a752-4fa9-9b70-b5d6c950d688" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FwM3xPHnHzzvMmsq9bnte%2Fimage.png?alt=media&#x26;token=5e1d7e4a-3a70-46cb-b74c-2e28149281f2" alt=""><figcaption></figcaption></figure>

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**".

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FMRkivYZUTEggX9u1DlNK%2Fslideshow.gif?alt=media&#x26;token=7287bafe-3540-47bb-85d4-cda23a80252e" alt=""><figcaption></figcaption></figure>

### 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 %}

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FCDpB52gwJZDDEetepiOm%2FScreenshot_4.jpg?alt=media&#x26;token=98c8af75-54ca-4d50-8cc7-83321af71a6e" alt=""><figcaption></figcaption></figure>

**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).&#x20;

{% 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:

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FBJwG5OhOnjVFtLJqeoIQ%2FScreenshot_5.jpg?alt=media&#x26;token=01884b7b-7182-46ea-abd0-b59e6278fbc3" alt=""><figcaption></figcaption></figure>

## 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                     | <p>Select the position and direction of slideshow pagination dots on Desktop.<br>Default: The dots are horizontal and centered.<br>Left: The dots are vertical and to the left.<br>Right: The dots are vertical and to the right.</p> |
| 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.             |
