---
description: Combines images, text, and call-to-action buttons in your slideshow
---

# Slideshow

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2Fe5H0x5Xr80nFBfT3WOts%2Fimage.png?alt=media&#x26;token=1126b062-acb2-4fd6-a2da-9da1941ded0e" alt=""><figcaption></figcaption></figure>

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>

**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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FWIO73KqzemS93BVcR0X6%2Fimage.png?alt=media&#x26;token=0168f78a-e564-4bd8-9281-1f3edf44e64f" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FyAjvbYrDOllDwn7Tiz0D%2Fimage.png?alt=media&#x26;token=adfd36c3-5d27-42c2-89b5-df3adc88d21d" alt=""><figcaption></figcaption></figure>

### Content settings

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

**Desktop content position:** Vertically and horizontally align the content for optimal positioning.&#x20;

**Content width:** Define the width of the content box for a tailored fit.

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

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FtNL5x8WgGByUOOK9Qrbg%2Fimage.png?alt=media&#x26;token=891d59fd-06b1-4b71-ae4a-580c8ff2e8ec" 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.&#x20;

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FpHhYO2LHn2VJwfh4FOOT%2Fimage.png?alt=media&#x26;token=34e2ae68-ffbe-4f07-8e1c-1791eee44a31" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FNti24xk8jrOH9nJUamA4%2Fimage.png?alt=media&#x26;token=f415220e-0071-4902-a295-58bf6d67c3f6" 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.

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

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

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;

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FT7FrzmiHw9mhzpbM4P0C%2Fimage.png?alt=media&#x26;token=a86ecbef-5cf7-485c-be45-69c2d76a3177" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2F3UNddbvVUov2oc0LZ0ja%2Fimage.png?alt=media&#x26;token=32ea49b2-ec37-4259-a0be-ef669b4fcf6a" alt=""><figcaption></figcaption></figure>

### Content settings

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

**Desktop content position:** Vertically and horizontally align the content for optimal positioning.&#x20;

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

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FyWh56ItsCmYEnLFZYCFT%2Fimage.png?alt=media&#x26;token=cf5af195-de3b-4c72-99db-89d3b4e9a542" alt=""><figcaption></figcaption></figure>

### Content box and Mobile options <a href="#id-5.-carousel-setting" id="id-5.-carousel-setting"></a>

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

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2F2v20r2CcquSPUamlxVJc%2Fimage.png?alt=media&#x26;token=d8f02ffb-940d-4a87-ae8a-b53c169ab325" alt=""><figcaption></figcaption></figure>
