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

# Slideshow

Combine images, text, and call-to-action buttons in your slideshow

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://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FIxlS7RVDcQ7wTWfDtNEp%2Fimage.png?alt=media&amp;token=92d90fe1-e552-4b6d-b8b1-165be6199bb4" alt=""><figcaption></figcaption></figure>

## General settings

**Section width:** You can choose among Fluid container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Slide height:** The image height can be configured to fit the full screen, maintain its original height, or be adjusted to a custom height.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FMg4ECOSXhmzDdUBkuRMn%2Fimage.png?alt=media&amp;token=0302fb6a-84c4-4b16-9ba9-d6f2abed14b5" alt=""><figcaption></figcaption></figure>

## Custom height

Setting the slide height to custom allows you to personally configure the height of the slide according to your specific requirements, offering complete control over the slide's appearance.

**Color scheme:** Set text color and background color with preset scheme

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FuD3bdHbhSdShKLEwdTvX%2Fimage.png?alt=media&amp;token=7201ce3f-fc02-438d-98ee-d8081915cc02" alt=""><figcaption></figcaption></figure>

## Content settings

Adjust the font size, font weight, and bottom spacing for content parts, including subheadings, headings, and descriptions, to match your design preferences.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fr6JQ2ZuGs7wu9sVCMUnE%2Fimage.png?alt=media&amp;token=fc017552-7fce-466f-b970-b48f06140b0f" alt=""><figcaption></figcaption></figure>

## Carousel settings

**Show Next/Back:** Display arrows to navigate to the next or previous item.

**Pagination:** Choose from different types of pagination options.

**Setup period time:** Configure the time interval for changing slides.

**Reveal next slide:** Allow a part of the next slide to be visible while the previous one is still displayed.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FdXWWSOfbALKjA1kqPyXH%2Fimage.png?alt=media&amp;token=db685091-7de8-4c33-850a-ffd08c3c2895" alt=""><figcaption></figcaption></figure>

## Mobile options

&#x20;Specify the number of items displayed per row on mobile devices for an optimal viewing experience.

## Section padding

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

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F48kU5isdtierBiDF7TKU%2Fimage.png?alt=media&amp;token=2a450b86-9e6a-4cd6-b969-bd1272094828" alt=""><figcaption></figcaption></figure>

## Block settings

### Image settings

You can add images for desktop and mobile versions separately.

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

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FldH8TZYNLFnfPi3nQbtZ%2Fimage.png?alt=media&amp;token=2922f0e0-99e5-4f30-a6d0-7a25f69042bc" alt=""><figcaption></figcaption></figure>

**Local video:** Enable this option to assign a specific video to each slide, enhancing visual engagement and interactivity.

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

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

### Content

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fga7MNukeYiYgLMOMn65p%2Fimage.png?alt=media&amp;token=a42fc131-7aef-4444-9fba-a211892a12d3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FYDIoS8jK8sNZHwHRiSHg%2Fimage.png?alt=media&amp;token=dd8450a1-aec0-4d7d-bae3-3895f2fa76a6" alt=""><figcaption></figcaption></figure>

### Content settings

**Content alignment:** Options to align text left, center, or right are available.

**Desktop content position:** Vertically and horizontally align the content for optimal positioning.

**Content padding**: Configure the padding for the content box.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FYGCoRdgt5unZ6kR1fzCu%2Fimage.png?alt=media&amp;token=fd66f279-22e8-4449-94e8-41990ff14556" alt=""><figcaption></figcaption></figure>

### Content box and Mobile options

You can set a background color and adjust the opacity for the it.

**Content alignment:** Options to align text left, center, or right are available on mobile.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FMBffRnWtMmyD1Bo6hQtm%2Fimage.png?alt=media&amp;token=8eaa908b-ce2a-4396-b2fa-3742d6a9475b" alt=""><figcaption></figcaption></figure>