# Slideshow

{% embed url="<https://youtu.be/HisvGQzL6DQ>" %}

A slideshow is a quick and interactive way to showcase content and information on your site. Slideshow lets you display your most popular products/collections or shout out about what's new with a call-to-action button.

<figure><img src="/files/QtqkoirPR47lkH49G0rl" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Slideshow**
3. **Save**
   {% endhint %}

## Section settings

### 1. Design settings

<figure><img src="/files/bztBtUWYdMbJzDHZCrwN" alt=""><figcaption></figcaption></figure>

## Block settings

### 1. Background settings

You can add images for desktop and mobile versions separately.&#x20;

{% hint style="info" %}
1920x900px is recommended for desktop & 600x480px is recommended for mobile.
{% endhint %}

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<figure><img src="/files/YsIg1KHlLCNwMUfzGtnq" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CM7DFjn4EU9fhV4zc5ri" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}

### 2. Video Setting

<figure><img src="/files/i43uQ5W4hzOGuAWByfvm" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/iPD4JTYVwRupKnZ7WyjG" alt=""><figcaption></figcaption></figure>

### 3. Button

You have the flexibility to modify the label displayed on the button right here. Additionally, you can determine the button's priority by selecting its type with the **Button Type** option.

<figure><img src="/files/xflRa80sAbV0YEn9GJMh" alt=""><figcaption></figcaption></figure>

### **4. Content**

Add some text for the slide’s heading and subheading, then determine the content's size, and position by choosing a value in the text size, content position, and alignment drop-down.

<figure><img src="/files/woMSmPIiHnLg1nRbGbyT" alt=""><figcaption></figcaption></figure>

### 5. Carousel setting

Identify the buttons that facilitate the transition between slides. Additionally, consider configuring the carousel to automatically advance to the next slide after a predetermined period.

<figure><img src="/files/wdodzC5NJXvbEY0l6qe8" alt=""><figcaption></figcaption></figure>

### 6. Section padding&#x20;

<figure><img src="/files/yf3qfU1C9S1X4vm9vwtg" alt=""><figcaption></figcaption></figure>

Section padding allows you to specify the space between the slideshow and the preceding or following sections, or both.


---

# 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://blueskytechcos-organization.gitbook.io/umino-shopify/theme-sections/slideshow.md?ask=<question>
```

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.