> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/share/share-multiple-demos/showcase-collection.md).

# Showcase Collection

Group demos, videos, PDFs, links, and embeds into one Supademo showcase with a single link or embed. Covers layouts, settings, gallery thumbnails, translations, and chapters.

### What is a showcase?

A [Supademo Showcase](https://supademo.com/showcase) groups multiple demos and resources behind one shareable link or embed. You arrange the items into sections, pick a layout, and share one URL. Viewers move between items without leaving the page, and [showcase analytics](/analyze/general-analytics.md) record what each viewer opened.

{% @supademo/embed url="<https://app.supademo.com/demo/cmq9tpsbb3zjfqml61pm0ign7>" demoId="cmq9tpsbb3zjfqml61pm0ign7" %}

### Supported content types

A showcase can hold any mix of:

* **Demos:** interactive Supademos from your workspace
* **Videos:** screen recordings and other video content
* **PDFs and PowerPoint files:** guides, one-pagers, and decks
* **Links:** external pages
* **Embeds:** scheduling forms, calendars, and other third-party embeds

### Layouts

Each showcase uses one of three display formats:

| Layout               | What viewers see                                                                                            |
| -------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Section Design**   | A left sidebar lists sections and items on larger screens. Smaller screens fall back to the checklist view. |
| **Checklist Design** | An expandable checklist in the bottom left of the screen. Suits content meant to be completed in order.     |
| **Gallery Design**   | A gallery of cards grouped by section. Viewers can filter by demos and resources.                           |

### How to create a showcase

1. Click **Create Showcase** from your Supademo dashboard.
2. Click the pencil icon next to the title to name the showcase.
3. Click a section name to rename it.
4. Click **Add content** and choose what to add: demos, a video, a PDF, a PowerPoint file, a link, or an embed.
5. Click **Add section** to group content into more sections.

The editor saves content changes as you make them.

### Showcase settings

Showcase settings sit in the **⋮** menu at the top right of the showcase editor. Click **⋮**, then **Settings**. The dialog has five tabs, and one **Save** button applies the changes from all of them.

| Tab              | What it controls                                                                                                                                                      |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Branding**     | The logo at the top left of the shared showcase page, and the **Share Page Button** (text, link, and colors) at the top right. Requires a paid plan.                  |
| **Layout**       | The display format, plus **Display Sidebar by Default** for the Section and Checklist designs.                                                                        |
| **Translations** | Opens the Translations Hub for the showcase. See [Translate a showcase](#translate-a-showcase).                                                                       |
| **Autoplay**     | **Next Demo Autoplay**, **Loop to Beginning**, the autoplay duration, and the progress bar color. See [Showcase Autoplay](/customize/animation/showcase-autoplay.md). |
| **SEO**          | The page title, meta description, and the image shown when the showcase is shared on social media (1200 × 630 px recommended, up to 5MB).                             |

The same **⋮** menu holds **Manage tags**, **Duplicate**, **Create Demo Hub**, **Move to...**, and **Delete**.

### How to change the layout

1. Open your showcase in the editor.
2. Click **⋮**, then **Settings**.
3. Open the **Layout** tab.
4. Choose **Section Design**, **Checklist Design**, or **Gallery Design**.
5. Click **Save**.

### How to enable autoplay

1. Open your showcase in the editor.
2. Click **⋮**, then **Settings**.
3. Open the **Autoplay** tab and turn on **Next Demo Autoplay**. The showcase then advances to the next demo when the viewer finishes the current one.
4. Click **Save**.

### Edit an item

Click the **⋮** menu on an item in the editor:

* **Open Demo** or **Open Video** opens the source content.
* **Replace** swaps a demo for another one. Other item types show **Edit** instead.
* **Edit label** changes the name viewers see for the item in this showcase.
* **Gallery thumbnail** sets the card image. It appears when the showcase uses the Gallery layout.
* **Remove** takes the item out of the showcase.

### Set a gallery thumbnail

In the Gallery layout, each card shows the content's own thumbnail unless you choose another image.

1. Set the layout to **Gallery Design**.
2. Click **⋮** on an item, then **Gallery thumbnail**.
3. Pick a source:
   * **Default** uses the content's own thumbnail.
   * **Step** uses an image from one of the demo's steps. Available for demos.
   * **Upload** uses your own image. A 7:4 image works best, for example 1400 × 800 px. PNG, JPG, WebP, SVG, and GIF files are accepted.

### Translate a showcase

Showcase translations work the same way as [demo translations](/customize/personalize/ai-translations-hub.md): you add a language, review the AI translation next to the original text, and save. They cover the showcase's own text:

* The showcase name, description, and button text
* Section names and descriptions
* Item names
* The heading, description, and button text of a [showcase chapter](/share/share-multiple-demos/showcase-collection/showcase-chapters.md)

Demos inside the showcase keep their own translations and voiceovers, which you manage in each demo's Translations Hub.

1. Click **⋮**, then **Settings**.
2. Open the **Translations** tab and click **Open Translations Hub**. The button is disabled while other tabs have unsaved changes, so save or cancel those first.
3. Choose a language under **Translate to** and click **Translate**.
4. Review the **Original text** and **Translated text** columns and edit any translation.
5. Click **Save translation**. Use **Add language** to add another language, or **Translate to all demo languages** to add every language your demos have that the showcase doesn't.

Viewers don't pick a showcase language separately. The showcase text follows the language of the demo they are watching, which they set with the demo's language selector or a `?lang=` link. If a demo in the showcase is missing a language, the hub lists it with an **Open demo** link so you can add that language in the demo's own hub.

When you change showcase text after translating it, a **Translations out of date** badge appears in the editor header. Click it to open the hub and update the affected languages.

Showcase translations require a paid plan.

### Gate a showcase with a chapter

A showcase chapter puts a lead capture form or a password in front of the showcase. It works like a [chapter in a demo](/customize/chapters.md), and you add it with **Add chapter** in the showcase editor. See [Showcase Chapters](/share/share-multiple-demos/showcase-collection/showcase-chapters.md).