# Slideshow

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FhV5C2UYzYQq5XApCWS4E%2FFox-BG%20Light%20-%202025-11-26T092433.701.jpg?alt=media&#x26;token=add53fd3-fcdd-4cb2-9f49-cc35ae74b672" alt=""><figcaption></figcaption></figure>

The **Slideshow** section lets you display multiple hero slides with images or videos in a smooth, auto-rotating carousel. It’s designed to create strong first impressions, announce promotions, and guide users into key pages of your store.

## How to add a Slideshow section to your Shopify store

{% hint style="success" %}

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Slideshow** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit the section Slideshow

### Section settings

#### **Layout**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable header overlay</strong></td><td>Allows the header to sit transparently over the slideshow.<br><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fz0m7soHSGcwv5XhAEqRg%2Fimage.png?alt=media&#x26;token=405f601f-f3ab-44af-b961-69b9059343d7" alt=""></td></tr><tr><td><strong>Height</strong></td><td>Controls the height of the slides. “Adapt” auto-adjusts based on the image.</td></tr></tbody></table>

#### **Carousel settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Autoplay</strong></td><td>Enables automatic slide movement.</td></tr><tr><td><strong>Autoplay delay</strong></td><td>Time between slides (seconds). Visible only when autoplay is ON.</td></tr><tr><td><strong>Control type</strong></td><td>Choose how users navigate the slideshow: <strong>Default</strong> or <strong>Progress text</strong>.</td></tr><tr><td><strong>Control alignment</strong></td><td>Left / center / right alignment for default controls.</td></tr></tbody></table>

{% tabs %}
{% tab title="Default control as Control type" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7EjJt2E44f7CuSOTzljW%2Fimage.png?alt=media&#x26;token=5374cdb7-9d20-4f72-9229-e6cca787d1fe" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Progresst text as Control type" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F7rP8BLJBIbqIOcGMcT5d%2Fimage.png?alt=media&#x26;token=55bbcc07-2031-413f-b306-600378f47b65" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Change the **Pagination label** in the **Slide block settings**.
{% endhint %}
{% endtab %}
{% endtabs %}

### Block settings

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FU0FxJCogNf7wMMrfX1RF%2Fimage.png?alt=media&#x26;token=f5f448d8-c6fc-41db-ba2a-fa3aad8b40ee" alt=""><figcaption></figcaption></figure>

The Slideshow section provides three main block types:

* **Image slide** – a hero slide using desktop/mobile images
* **Video slide** – a hero slide using autoplay looping video
* **Slide content** – the textual layer (heading, text, button, spacing, animations) that appears on top of the slide media

These blocks give full control over visuals, content layout, and storytelling on your hero carousel.

{% tabs %}
{% tab title="🖼️ Image slide" %}
Use this block to create standard hero slides with responsive images, overlays, and content placement.

Settings include:

* **Image**: Upload the desktop image for the slide
* **Enable overlay**: Add a semi-transparent layer to improve text visibility.
* **Content position**: Controls where text appears over the image.
* **Pagination label**: The name that appears in the progress-text navigation. Useful for editorial storytelling.

{% hint style="info" %}
:bulb: **Best practices**

* **Use a mobile-specific image** to avoid awkward cropping on small screens.
* **Add an overlay** when using busy lifestyle backgrounds to keep text readable.
* **Place content where the image has natural empty space** (“safe zones”).
  {% endhint %}
  {% endtab %}

{% tab title="🎥 Video slide" %}
Best for premium or experiential storytelling.

Settings include:

* **Video**: Upload or select a Shopify-hosted video. Automatically loops, autoplays, and plays muted.
* **Content position:** Placement of the content area over the video.
* **Pagination label**: Label shown in progress-text navigation, visible only when using that control style.

{% hint style="info" %}
:bulb: **Best practices**

* **Use short videos (8–12s)** to reduce load and maintain flow.
* Use clean, bright footage that loops well.
  {% endhint %}
  {% endtab %}

{% tab title="🧩 Slide content" %}
This nested block contains all textual elements layered over the slide media. It acts as the inner container that holds headings, text, buttons, and spacers.

Settings include:

* **Alignment**: Select left/ center/ right alignment for the content stack.
* **Row gap**: Space between content blocks.
* **Width:** Choose content width: Fit, Fill, or Custom.
* **Color scheme**: Choose a scheme for the slide content. *Learn more:* [colors](https://docs.foxecom.com/pebble-theme/theme-settings/colors "mention")
* **Transparent background**: Remove the background to show only text.

{% hint style="success" %}
Within the Slide content, you can add:
{% endhint %}

<table><thead><tr><th width="175">Block</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Heading, paragraph, subheading — highly customizable. <br>Learn more: <a data-mention href="../../theme-blocks/basic#text">#text</a></td></tr><tr><td><strong>Button</strong></td><td>Primary, secondary, or link-styled button.<br>Learn more: <a data-mention href="../../theme-blocks/basic#button">#button</a></td></tr><tr><td><strong>Spacer</strong></td><td>Add vertical spacing between elements.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}