# Slideshow with banner

<figure><img src="/files/jEf5NQf2L8hIvcuF49Ev" 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="/files/Ib2f9LEnNfqqKYrXR5QR" 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="/files/3e8iLUHvAud0qHQ93MvD" 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="/files/nZnWVAOttJZ8EGjhegOa" 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="/files/P9zDXVaW8HkGk8QMCwXP" 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="/files/aQaZHVqQ24joe9DMHZmK" 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="/files/EmIfL3dDeVZzOlGZtm2l" 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="/files/ddwkt23PtOjpRSYIFwoz" 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="/files/hKXKNJyxRgpnto5IBhN2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/3onWYzzrgudy6YHv1ReS" 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="/files/lRm67FRKMSblvRSUaKD9" 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="/files/7ibYyDOT6nzBtcVCyPoe" 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="/files/j7rVhFO4x2SexHwCcKxf" 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="/files/OB265HvtxxnIW4STrQh9" 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="/files/4LZ84kQGn1ZWOpUKIQ5c" 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="/files/sASSBoL4FohsPR9M3MJk" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nextsky.gitbook.io/glozin-theme/theme-sections/slideshow-with-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.