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

# Slideshow

The Slideshow section lets you display a visually engaging image slider on your page. You can configure layout, navigation, timing, content styles, and more for each slide.

To customize the Slideshow in our theme please follow the steps:

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FKb0Rt6AAeyHy4faj2YZK%2Fslider.png?alt=media&amp;token=2d949f78-1a90-47a0-a692-d16640e6da24" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Slideshow**
3. **Save**
   {% endhint %}

## Section Settings

#### **General**

* **Container:** Choose how the slideshow is displayed — *Full width* or *Boxed*.
* **Color scheme:** Select a color scheme to match your site’s design.
* **Show navigation:** Enable to display arrows for navigating between slides.
* **Show dots:** Show pagination dots to represent each slide at the bottom.
* **Loop images:** Set slides to continuously loop.
* **Autoplay:** Enable slides to change automatically.
* **Change slides every:** Set time (in seconds) between automatic slide transitions.
* **Position dots:** Choose where pagination dots appear (e.g., *Bottom center*).
* **Dots style:** Select the visual style (e.g., *Dashed*).
* **Color dots:** Pick the color of pagination dots.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F85Vj2Aa89PfPYF798wXU%2Fslider%20genneral.png?alt=media&amp;token=c8c05967-196f-434b-a82c-866f737a23c7" alt=""><figcaption></figcaption></figure>

#### **Slide Height Settings**

Control how tall the slideshow appears on different devices:

* **Slide height (desktop):** Choose *Full screen* or *Custom height*.
* **Section height (desktop):** Set a specific pixel height for desktop when using *Custom height*.
* **Section height (tablet):** Set height for tablets.
* **Section height (mobile):** Set height for mobile devices.

> *Note:* Custom height values only take effect when *Custom* is selected in the Slide height option.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F0jHNuCod7Uh2sQqh4BOD%2Fslider%20height.png?alt=media&amp;token=2eb76359-cbb0-4322-9bec-5e5734269e80" alt=""><figcaption></figcaption></figure>

***

#### **Adjustments for Content Settings**

Define how text and buttons appear on slides:

* **Font size title:** Adjust the size of slide titles.
* **Font size subtitle:** Set the subtitle size.
* **Font size description:** Define the body text size on slides.
* **Font weight title:** Control how bold the slide title is.
* **Font weight subtitle:** Set boldness for subtitles.
* **Font weight description:** Adjust boldness for description text.
* **Type button:** Choose a button style such as *Primary* or *Secondary*.
* **Margin top:** Add spacing above text and buttons.
* **Remove default space between sections:** Remove automatic spacing between this section and the next.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FXloumql2jI9SV0dKQa15%2Fslider%20adjuust.png?alt=media&amp;token=d498a465-3506-4a27-a2ba-e3564edfa279" alt=""><figcaption></figcaption></figure>

## Block Settings

Each **Slide item** (block) allows you to customize individual slides within the slideshow. You can adjust the image, text, animation, and button options independently for each slide to create a dynamic and engaging presentation.

***

#### **Image Settings**

* **Image:** Upload the main image for the slide. This image will be displayed on desktop devices.
* **Image mobile:** Upload a separate image optimized for mobile view if needed.
* **Overlay slide:** Add a semi-transparent color overlay on top of the slide image. Adjust the percentage to control overlay opacity.

***

#### **Content Settings**

* **Content box:** Choose a layout style for how content (text and button) appears within the slide (e.g., *Default* or other available styles).
* **Slider effect:** Select the transition effect for this slide (e.g., *fadeIn*, *slide*, *zoom*).
* **Position content:** Choose where the content block is placed — *Left*, *Center*, or *Right*.
* **Text align content:** Control the alignment of text inside the content block — *Left*, *Center*, or *Right*.
* **Background content:** Set a background color or image behind the text content. Choose *Transparent* if you don’t want a background.
* **Subheading:** Add a short introductory line above the main heading.
* **Heading:** Enter the main title text for the slide. You can use text formatting options such as bold, italic, or links.
* **Description:** Add a brief description or call-to-action message below the heading.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F1t9LTv2lgG0bIEBlUMJa%2Fslblock-conent.png?alt=media&amp;token=6e7a5d87-50cb-404d-aa24-f1d8825b7ea4" alt=""><figcaption></figcaption></figure>

***

#### **Button Settings**

* **Slide URL:** Add a link destination for the button (e.g., *All collections*, *Product page*, or a custom URL).
* **Button label:** Define the text displayed on the button (e.g., *Shop Now*, *View Collection*, *Learn More*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FMf8WeR25JZFJVRIS8xeO%2Fslblock-btn.png?alt=media&amp;token=bcd5517e-2fd8-4f5b-8ccb-50784ce8e7bb" alt=""><figcaption></figcaption></figure>

***

#### **Tips for Better Slides**

* Use **high-resolution images** (recommended size: 1800px width or more) for clear display on all devices.
* Keep text concise and easy to read — no more than **two lines per heading**.
* Use contrasting text colors or overlays for better readability.
* Maintain consistent button styles across all slides for a professional look.