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

# Slideshow with banner

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2F1vqBPDS5DaF3PvfquiOi%2Fimage.png?alt=media&#x26;token=b24bf085-ceff-4b2e-a233-16135ea9f1ee" 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 with banner**
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.

**Column gap:** Adjust the spacing between columns to create a well-balanced and visually appealing layout.

**Slide width:** Adjust the slide width within the range of 0% to 50% to control its size and layout.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FOeAQdgGdsN9qCsu3oO6Z%2Fimage.png?alt=media&#x26;token=7fd38541-42c7-4985-810d-a66338d8db43" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-bed5a5c1fcac6941d5c6a531bbaef17ab70f9eb2%2Fimage%20(3).png?alt=media" alt=""><figcaption></figcaption></figure>

## Block setting

The **Slideshow** section consists of four block types, each playing a specific role in structuring the content display. The **Parent** blocks always appear before their corresponding **Child** blocks, following the default section settings.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FQ0w5zIB4CCMMWB7upCuB%2Fimage.png?alt=media&#x26;token=32abe3ad-0db7-42cf-8efa-23c5ea5c9d74" alt=""><figcaption></figcaption></figure>

### Slideshow parent

The main container for the slideshow settings, controlling global styles, transitions, and layout for all slideshow child blocks.

Always appears before **Slideshow Child** blocks.

Configure global settings for all child slides, including color scheme, content styling (font size, font weight), and carousel settings to ensure consistency across the slideshow.

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FyGsDMytPBx2V41I35jnR%2Fimage.png?alt=media&#x26;token=858bb751-4f1d-4063-bb48-ae673138ea25" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-25d00f909f584791c1759ca7d199519965440d80%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

#### Carousel settings

**Slide effect:** Choose the transition effect for slides: "Fade In" for a smooth appearance or "Slide" for a traditional sliding motion.

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

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

**Desktop dots position:** Set the position of navigation dots on desktop view to left, center, or right for better alignment with your layout.

**Change slide every:** Configure the time interval for changing slides.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FvyxzACQbjjUhPmQE1XjX%2Fimage.png?alt=media&#x26;token=ca129437-b9bd-4249-b287-41eacaa3fb51" alt=""><figcaption></figcaption></figure>

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

Individual slide items within the **Slideshow Parent**, each containing unique images, text, and links.

Comes after the **Slideshow Parent** block in the block hierarchy.

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

You can add images for desktop and mobile versions separately.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-db5a80e653a23ab475c693681e79dc5f05e08414%2Fimage%20(4).png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-89839fd79dab17e60fc48bd15658aa01206538dd%2Fimage%20(363).png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-2d5919b9afdb1724376e38f864134a0b101375ff%2Fimage%20(365).png?alt=media" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-cd902f0682ca58705914653607fa76e23da9f0cb%2Fimage%20(368).png?alt=media" 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.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-b0578b27bebb7f43cf030cf0c5e9322fe4f42202%2Fimage%20(369).png?alt=media" alt=""><figcaption></figcaption></figure>

### Banner parent

The main container for banners inside the slideshow section, defining overall banner styles and layout.

Always appears before **Banner Child** blocks.

### Banner child

Individual banner elements containing images, text, and links.&#x20;

Comes after the **Banner Parent** block in the block hierarchy.

**Color Scheme:** Choose a predefined color scheme for the banner to match the overall theme design..

**Vertical Alignment:** Adjust the vertical position of the banner content.

**Image:** Upload or select an image to be displayed in the banner.

**Mobile Image:** Upload or select a specific image optimized for mobile devices.

**Image Behavior:** Choose how the image behaves within the banner.

**Link:** Add a URL to make the banner clickable, directing users to a specific collection or page.

**Overlay Opacity:** Adjust the transparency level of the overlay to improve text readability while maintaining background visibility.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FqOTu8o7XATgYKo3WLQk5%2Fimage.png?alt=media&#x26;token=bdb70201-d3ce-472f-a8ad-b3941cc657b9" alt=""><figcaption></figcaption></figure>

#### 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FUJhkQFlunDoQilERHMNi%2Fimage.png?alt=media&#x26;token=778c5837-812f-475f-b648-0a10ec7beb85" 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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fos6kTQP2pMU41bSX57Mi%2Fimage.png?alt=media&#x26;token=8eda60ba-8a2a-4441-b44e-e9d0c36b08cf" alt=""><figcaption></figcaption></figure>

#### Typography

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://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2FJ1AzQMxyTpFttjZ5tW7P%2Fimage.png?alt=media&#x26;token=84508897-6d35-4fbe-ad9a-e096440ed354" alt=""><figcaption></figcaption></figure>

