# Slideshow with product
The **Slideshow with product** section let you display a dynamic, visually engaging slideshow on your homepage with a featured product for each slide. This section is perfect for showcasing promotions, new arrivals, or **featured products** with either **image slides** or **video slides**.
## How to add a Slideshow with product to your Shopify store
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section.**
2. Locate **Slideshow with product.**
3. Make necessary changes.
4. **Save.**
{% endhint %}
## How to edit a Slideshow with product section
### Section settings
#### General settings
* **Container**: Set how the image sliders to be displayed as Full width/ Fixed width.
* **Slide height**: Set the height of the slides as **Adapt to first image/ Small/ Medium/ Large**.
* **Show controls**: Enable controls (navigation and pagination) for the sliders.
* **Auto-rotate content**: Slideshow will run automatically when enabled. The duration time to change slides is between 2-10 seconds.
#### Accessibility
Fill in the slideshow description for customers using screen readers.
### Block settings
{% hint style="info" %}
You have the option to use either **image slides** or **video slides** to create your slideshow. Both formats allow you to showcase products effectively while adding dynamic content to your homepage.
:white\_check\_mark: In each block, you can add:
* An image or a video (depending on the block type)
* A product to be featured in the slide
* Block content: Heading, subheading, text and a button
* A bottom heading
{% endhint %}
## Best practices :heavy\_check\_mark:
### **Keep text readable**
Ensure that the text is **legible** on various backgrounds. Use **Image overlay** **opacity** setting to make the text stand out.
### **Avoid overloading with too many slides**
While it’s tempting to showcase multiple products, keep your slideshow **concise**. Too many slides may overwhelm visitors. Focus on your most important products or promotions and make sure each slide serves a clear purpose.
### **Enable preload image for faster loading**
Use this option for sections that appear **above the fold** (i.e., sections that are immediately visible when a user lands on the page).
This can be particularly beneficial for **improving your site's load time** and reducing **Largest contentful paint (LCP)**, which is a key metric for website performance and SEO.
By preloading the image, visitors will see your slideshow content almost instantly, improving the user experience, especially for those with slower internet connections.
***
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/hyper-theme/theme-sections/slideshow-with-product.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg?alt=media&token=93b40ca3-c8da-4146-a429-864cc428530f)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)