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

# Slideshow

A step-by-step guide detailing how to upload and edit the slideshow images displayed on your home page from within your Freewebstore Control Panel.

The big rotating picture at the top of your home page is the first thing customers see when they arrive at your store. Make it eye-catching and they are more likely to stay and shop.

On the new design system the slideshow is a **hero block**: a section you add to a page and edit in place, like any other block. Each slide has its own picture, headline and button.

{% hint style="info" %}
Using one of our older designs? See [Older designs](#older-designs) at the bottom of this page.
{% endhint %}

### Add a hero to a page

New stores usually start with a hero already on the home page, so you may only need to [edit it](#change-your-slides).

1. Log in to your Freewebstore Control Panel.
2. Go to **Design > Website Theme**.
3. Open the page you want the hero on. Click **Pages** on the left to switch page.
4. Hover over the section above or below where you want the hero, and click the **+** button on its top or bottom edge.
5. In **Add a block**, click **Hero** to see the hero styles, or type the name into **Search blocks…**. **Hero Banner** is a full-width photo slideshow; **Hero Banner (Full Page)** fills the whole first screen.
6. Click **Publish** to make it live.

{% hint style="info" %}
Want a big search box instead of pictures? Try the **Hero Search** or **Hero Split with Search** blocks. See Search Bar.
{% endhint %}

### Change your slides

1. Go to **Design > Website Theme** and open the page with your hero on it.
2. Hover over the hero and click **Edit**.
3. Your slides appear as numbered items along the top of the panel. Click one to edit it.
4. Click **Choose image** to upload a new picture or pick one from your gallery. Use a wide, landscape photo with a calm area for the text.
5. Fill in the slide's text, such as the headline, sub-text and button label, and add a link if you want the slide to go somewhere when clicked.
6. To add a slide, click the **+** at the end of the items. To remove one, select it and click **Remove this item**.
7. Click **Done**, then **Publish** to make your changes live.

Under **All items — settings** at the bottom of the panel you can change settings that apply to every slide, such as the height, where the text sits and the button style. The fonts and colours come from your store's design settings, so your hero always matches the rest of your store. See Colors and Fonts.

### Image descriptions (alt text)

Image descriptions help customers who use screen readers, and help search engines understand your pictures.

On **Hero Banner** and **Hero Banner (Full Page)** there is no separate description box: each slide's main headline is used as the picture's description automatically. Write headlines that describe the slide, for example "New season walking boots" rather than "Welcome!".

Some other hero styles have their own description box in the slide's fields. Where it's there, fill it in.

### Hide or remove your hero

Hover over the hero:

* To **hide** it for now, click the eye icon, then **Publish**. It stays in the editor, marked Hidden, so you can show it again later.
* To **remove** it, click the bin icon, then **Publish**. Until you publish, **Discard** brings it back.

### Older designs

If your store still uses one of our older designs, the slideshow is edited in **Design > Theme Editor**. Hover over the slideshow in the store preview and click **Edit**. In the panel on the left:

* Tick **Enabled** to show the slideshow.
* Click **Add New Slideshow Image** to upload or choose a picture.
* Hover over an image and click the **A** icon to add its image description (alt tag).

Click **Save** when you're done.