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

{% hint style="success" %}
Steps

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

## Section settings <a href="#section-settings" id="section-settings"></a>

### General setting <a href="#id-1.-design-settings" id="id-1.-design-settings"></a>

* **Layout:** You can choose among Container, Wrapped container, Full width for the banner layout.
* **Slide height:** The image height can be configured to fit the full screen, maintain its original height, or be adjusted to a custom height
* **Color schema:** Set text color and background color with preset scheme

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/oQEY8jnyGLjzTn5nJjHP/image.png" alt=""><figcaption></figcaption></figure>

### Animations

This animation is applied to image slides:

* **Ambient movement:** slowly floating effects&#x20;
* **Zoom in on scroll:** As you scroll down the site, the slide image will undergo a zoom-in effect

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/jJiUJVjP6WCCCrMoLZmM/image.png" 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.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/MuAyvgrb966OLYuMZdAN/image.png" alt=""><figcaption></figcaption></figure>

### Content settings

For content displayed on slide items, you can customize the font size and weight, ensuring the text is visually appealing and readable.&#x20;

**Content on mobile:** you have the ability to adjust the position of the content on mobile screens for optimal viewing.&#x20;

**Reset color scheme setting on mobile:** this option is to reset the color scheme settings specifically for mobile devices, regardless of color scheme on desktop screen.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/NWN8eFR0jPAWc0jhOMfr/image.png" alt=""><figcaption></figcaption></figure>

### Carousel settings

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/z14kVz432NnMEq8AbqBr/blobs/mJLHlKB4v1co8ptUEOTX/image.png" alt=""><figcaption></figcaption></figure>

### 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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/rYxHxLONuhgtRsvC8BVH/image.png" alt=""><figcaption></figcaption></figure>

## Blocks settings <a href="#block-settings" id="block-settings"></a>

### Image settings <a href="#id-1.-background-settings" id="id-1.-background-settings"></a>

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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/GBtcmqYddhBstGrX3tqR/image.png" alt=""><figcaption></figcaption></figure>

**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://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/71Ya0IVz9PKDk8rsFKdi/image.png" 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 %}

### Video Setting <a href="#id-2.-video-setting" id="id-2.-video-setting"></a>

You have the option to embed a video in place of an image, providing a more dynamic and engaging visual element.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/VWMEqMUJWOphzoVoYp6I/image.png" alt=""><figcaption></figcaption></figure>

### **Content** <a href="#id-4.-content" id="id-4.-content"></a>

You can customize the content box by setting a layout and a maximum width for it; choosing a background color; and adjusting the transparency level of the content,

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/gGab9Cb6O6tsd2sB3VhX/image.png" alt=""><figcaption></figcaption></figure>

Furthermore, you have the ability to configure the position of your content, establish animations for when content becomes visible, and adjust the text alignment within the content area, providing a comprehensive set of tools to enhance the user experience and visual appeal of your site.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/kttMrW9Kob6m0mjFKfdG/image.png" alt=""><figcaption></figcaption></figure>

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

Additionally, you have the option to incorporate a hyperlink into the slide image, allowing users to navigate to specified content or pages directly from the slide.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/wIZ4fFxi8HdCQZKuLL24/image.png" alt=""><figcaption></figcaption></figure>

### Button <a href="#id-5.-carousel-setting" id="id-5.-carousel-setting"></a>

You have the flexibility to modify the label displayed on the button right here.&#x20;

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/z14kVz432NnMEq8AbqBr/blobs/mzBioBevDxGCD7K1ueDw/image.png" alt=""><figcaption></figcaption></figure>