> 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.md).

# Slideshow

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

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

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

**Reveal next slide:** Allow a part of the next slide to be visible while the previous one is still displayed.

**Show content below image:** Enable this option to display content, such as headings or descriptions, below the image on mobile devices for a more compact and organized layout.

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

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

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