# Slideshow ‌Designed to show beautiful imagery that connects your brand with visitors and potential customers in a very short space of time, your `Slideshow` section is one of the first things your customers will see when landing on your website. It enables visitors to easily navigate to other parts of the site and hopefully make a purchase. As well as being a great place to highlight current collections, offers, and news, the slideshow’s automatic transition gives a sense of urgency and allows you to communicate multiple messages that will also drive engagement. ### Getting Started * Go to `Online store` → `Theme` → `Customise` * By default, you will see this section pre-loaded * But if you need to add again, scroll to the bottom of the panel and `Add section` ### How do i customise the Slideshow? For this section, you have access to both section and block level settings whereby you can change the content of each slide and also the settings of the slideshow itself. #### Section settings By clicking on the name of the section `Slideshow` you get access to change the following; * **Section width** - change the section to have whitespace on the left/right side or make the section edge-to-edge * Slider height - adjust the height of the banner depedning on your content and style * **Top/bottom padding** - this controls the ammount of whitespace above and below this section * **Autoplay slides** - when you have 2 or more slides and if this setting is checked, the slideshow will change automatically based on the Transition speed you set. * **Show slider pagination** - when you have 2 or more slides, the pagination controls will show automatically to indicate addtional content to the user. * **Change slide every** - this is the speed that the next slide will show - 5000ms = 5 seconds * **Color scheme** - pick a theme color profile to change the style of this section #### Block settings Now we will work on setting up slides, which are blocks within the section. Here are the changes that we can make. * **Image upload** - we can upload a banner image for desktop screens - we recommend using an image with the specifications of at least 2048 x 878px .jpg format * **Image upload for mobile** - we can upload a banner image for mobile screens - we recommend using an image with the specifications of at least 800px x 500px .jpg format * **Color scheme** - pick a theme color profile to change the style of this block * **Enable opacity** - add an optional opacity to create a visual contrast ratio between your image and text * **Background image color** - use the color picker to lighten or dark the image background color * **Heading** - add a strong call to action to welcome customers * **Link** - Connect this section to another part of the site * **Button label** - when you add text a button will appear * **Slide content text alignment** - this will change the text alignment from `Left`, `Center` or `Right` aligned * **Slide content text vertical position** - this setting will allow you to choose if your content is at the `Top`, `Middle` or `Bottom` of the section * **Slide content text horizontal position** - this setting will allow you to choose if your content is postioned towards the `Left`, `Center` or `Right` of the section Once your happy with changes, click save and your done! {% hint style="warning" %} In order to add multiple slides, you need to add additional blocks. There are a max of 5 blocks that you can use for this section. {% endhint %} --- # 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://koding-themes.gitbook.io/theme-support/machina/sections/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.