> For the complete documentation index, see [llms.txt](https://blueskytechcos-organization.gitbook.io/umino-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueskytechcos-organization.gitbook.io/umino-shopify/theme-sections/slideshow.md).

# Slideshow

Combines images, text, and call-to-action buttons in your 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/WBGCYGWKp02KLsQU44nt/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/S7yvlvofEVBlVjuyhdAr/slide-show-general.jpg" alt=""><figcaption></figcaption></figure>

## Block settings

### 1. Background settings

You can add images for desktop and mobile versions separately.

{% 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FA82u6kZXkFxzzzqbqsGj%2FScreenshot%202023-12-19%20115134.png?alt=media&amp;token=70e842da-e552-4a25-af1e-e9eb014a66cb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FPzzoH9v5Nj2JdP1UvSC6%2FScreenshot%202023-12-19%20115558.png?alt=media&amp;token=8af130f5-61aa-4e54-bd01-2c2d5c458b08" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/uqr6ibfKC2ZIfdt85XbJ/Screenshot%202023-12-14%20084427.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Vr7OCiGewIqClnIFM7nR/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/jjUpInU6A1MBR9jbm3ZQ/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/BHY2bDYfQwyWw2Aq8DeS/slide-show-content.jpg" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/IU0ZOJgL8o2Tgi0elU5i/image.png" alt=""><figcaption></figcaption></figure>

### 6. Section padding

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/LDSY8GOaGY9yECcQOkg4/image.png" alt=""><figcaption></figcaption></figure>

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