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

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