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

# Product showcase

A full-screen slideshow. Each slide pairs a large image or video on one side with product content — heading, text, and a button — on the other.

![Product Showcase overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-61dc14c5bec0bbfeb036bf4c227e33d0d28b94de%2Fglobal-sections-product-showcase-overview.png?alt=media)

***

## Settings

### Layout

| Setting             | Description                                                                                                                                                                                                                                                                              |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width               | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. |
| Enable boxed layout | Wraps the product content in a contained box with its own color scheme.                                                                                                                                                                                                                  |

### Media

| Setting              | Description                                                                                                                                                  |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Media position       | **Left** — The image or video sits on the left, product content on the right. **Right** — The image or video sits on the right, product content on the left. |
| Desktop height       | Height of the section on desktop.                                                                                                                            |
| Mobile height        | Height of the section on mobile.                                                                                                                             |
| Corner radius        | Rounding of the section media corners.                                                                                                                       |
| Custom corner radius | Set your own corner radius. Available when Corner radius is set to Custom.                                                                                   |

### Autoplay

| Setting            | Description                                          |
| ------------------ | ---------------------------------------------------- |
| Auto-rotate slides | Advance through slides automatically.                |
| Pause on hover     | Stop the timer while the cursor is over the section. |
| Speed              | How long each slide stays before advancing.          |

### Navigation

| Setting             | Description                                                            |
| ------------------- | ---------------------------------------------------------------------- |
| Show arrow on hover | Show the previous and next arrows when the cursor is over the section. |
| Style               | Visual style of the arrow buttons.                                     |
| Icon                | Shape of the arrow icon.                                               |

### Appearance

| Setting              | Description                                                                         |
| -------------------- | ----------------------------------------------------------------------------------- |
| Color scheme         | Color scheme for the section.                                                       |
| Content color scheme | Color scheme for the product content box. Available when Enable boxed layout is on. |

### Spacing

| Setting                 | Description                                     |
| ----------------------- | ----------------------------------------------- |
| Padding top / bottom    | Space above and below the section.              |
| Custom padding — Mobile | Set separate top and bottom padding for mobile. |

***

## Available Blocks

### Showcase item

One slide. Add one Showcase item per slide.

| Setting                  | Description                                                                   |
| ------------------------ | ----------------------------------------------------------------------------- |
| Type                     | **Image** or **Video** for the slide media.                                   |
| Image                    | The slide image, when Type is Image.                                          |
| Video                    | The slide video, when Type is Video.                                          |
| Autoplay                 | Plays the video automatically, muted.                                         |
| Max width                | Widest the content panel can get, with a separate mobile value.               |
| Desktop gap / Mobile gap | Spacing between the content blocks.                                           |
| Type (Color)             | **Inherit** the section's color scheme, or apply a separate **Color scheme**. |

{% hint style="info" %}
The Showcase item has no product picker. To feature a product on a slide, add a **Product card** block inside the Showcase item — that is where the product is selected.
{% endhint %}

Each Showcase item holds these blocks:

| Block                                                 | Description                                                          |
| ----------------------------------------------------- | -------------------------------------------------------------------- |
| Product card                                          | The featured product for the slide. Its only setting is **Product**. |
| [Heading](/helix/theme-blocks/basic/heading.md)       | A heading line.                                                      |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | A smaller line above or below the heading.                           |
| [Text](/helix/theme-blocks/basic/text.md)             | A rich-text area.                                                    |
| [Button](/helix/theme-blocks/basic/button.md)         | A single call-to-action button.                                      |
| [Buttons](/helix/theme-blocks/basic/buttons.md)       | A group of call-to-action buttons.                                   |
| [Icon](/helix/theme-blocks/basic/icon.md)             | A standalone icon.                                                   |
| [Image](/helix/theme-blocks/basic/image.md)           | A standalone image.                                                  |
| [Colors](/helix/theme-blocks/basic/colors.md)         | Color swatches.                                                      |