> 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

<figure><img src="/files/2CIWFUDcqpy635E6Xoxi" 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="/files/R4cjHYUAxECEQ4wBoKvT" 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="/files/e5Iw5fm9cx1V9X0bZTkw" 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

**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="/files/TcY1DCApp3lqj4pNwTdN" 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>

## 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="/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>