# Showcase Theme

### Customize themes for individual showcases

Tailor the appearance of each Showcase without impacting your workspace-wide branding. This is ideal for sharing demos with specific teams, customers, or use cases.

**What you can customize:**

* Logo
* Brand colors
* CTA button styles
* Background and text colors
* Layout
* Displayed names of the Supademos within a Showcase

{% hint style="info" %}
Changes apply only to the selected Showcase and won't affect other demos or the global theme.
{% endhint %}

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2Fe0OGZ3NPdPJA0lZXQCdG%2Fimage.png?alt=media&#x26;token=5087d5fc-1b64-4352-ba19-f289abf420a2" alt=""><figcaption></figcaption></figure>

**To apply a custom theme:**

1. Open your Showcase edit page.
2. Click on the **Settings** icon
3. Go to the **Branding** section.
4. Upload a logo and adjust styling options as needed.

***

### Showcase layouts

You can control the default layout of your Showcase for when it's shared as a link or embedded online. Options include:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>Section Design</strong></td><td>Display your Showcase with a left-pane sidebar on larger screens. Smaller screens default to checklist view.</td><td><a href="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FtbY6Z5mqH1wZLHmNsOHY%2Fsidebar-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=ac8f5e92-63ce-49d2-9aa7-856a6240665c">sidebar-ezgif.com-video-to-gif-converter.gif</a></td></tr><tr><td><strong>Checklist Design</strong></td><td>Display your Showcase with an expandable checklist on the bottom left of the screen.</td><td><a href="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FlEBiH2iPWPg6DJPSnAhH%2Fchecklist-ezgif.com-video-to-gif-converter.gif?alt=media&#x26;token=feedb3d6-3ee5-4fc6-8ad4-3859007dc27e">checklist-ezgif.com-video-to-gif-converter.gif</a></td></tr></tbody></table>

{% hint style="warning" %}
These layouts will be reflected on **Link/Share pages** and on **Embeds** on larger window sizes. On small window sizes, all Showcases will default to the checklist view.
{% endhint %}

#### Display sidebar by default

Enable this option to display the sidebar sections on the first load on embeds and smaller window sizes. If not enabled, the user will need to explicitly click the checklist on the bottom left to expand the available Supademos for the Showcase.

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FR9fABGf2goSO4S1c9HYt%2Fimage.png?alt=media&#x26;token=f626bffd-06fa-471a-a846-1986a5157ed7" alt=""><figcaption></figcaption></figure>

#### Adjust the displayed names or labels of demos within a Showcase

You can now edit or change the displayed name of a demo within a showcase, giving you more control over how it appears in the sidebar or checklist.&#x20;

This feature is especially helpful when a title is too long or when you want to personalize the label for clarity and better presentation. Whether you’re tailoring demos for external clients or simplifying navigation for your team, this flexibility ensures that your showcase is both polished and easy to follow.

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

### Add custom meta images for SEO

By default, Showcases use a system-generated preview image when shared online (e.g., on Slack or LinkedIn). For more control, you can upload your own meta image.

**How it works:**

1. Navigate to the **SEO Settings** panel for your Showcase.
2. Upload a **custom meta image** (recommended: 1200×630px).
3. This image will appear in link previews instead of the default.
4. To revert, click the 🗑️ **trash icon** to remove the custom image.

> This is especially useful for highly personalized Showcases where the default image may not be relevant.