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

# Expanding gallery

Show a row of image panels where the selected panel expands to reveal its heading, text and button.

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

The **Expanding gallery** section is an image accordion: one panel is open and large, while the others are shown as narrow strips. When a shopper clicks a strip, it expands smoothly and shows its content. Use it to feature collections, product categories, lookbook images or brand stories in a compact, interactive way.

### 1. Our guide to set up an Expanding gallery section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Expanding gallery.**
* Click **Save.**
  {% endhint %}

### 2. Section settings

* **Color scheme:** Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
* **Section header**
  * **Subheading:** Small text shown above the heading.
  * **Heading:** The main title of the section.
  * **Heading size:** 15–80px.
  * **Header alignment:** Left / Center.
  * **Description:** Short text shown with the heading.
  * **Header layout:** Heading above description / Heading beside description.
* **Gallery settings**
  * **Desktop height:** Height of the gallery on desktop, based on the screen height: Small / Medium / Large / Custom.
  * **Mobile height:** Height of the open panel on mobile: Small / Medium / Large / Custom.
  * **Custom desktop height:** 200–1000px. Shown when **Desktop height** is set to Custom.
  * **Expanded panel size:** How much wider the open panel is than the collapsed strips, 2–6. Applies on desktop.
  * **Auto-rotate panels:** Opens the next panel automatically. Rotation pauses while a shopper hovers over or focuses on the gallery.
  * **Rotate every:** Time between panels, 3–10 seconds. Shown when **Auto-rotate panels** is on.
  * **Show labels on collapsed panels:** Shows a label on each closed strip.
  * **Label style:** Panel heading / Number. Shown when **Show labels on collapsed panels** is on.
  * **Custom mobile height:** 200–800px. Shown when **Mobile height** is set to Custom.
* **Corner radius**
  * **Image:** Rounds the corners of each panel, 0–40px.
* **Section**
  * **Section width:** Page width / Full width.
  * **Top padding:** 0–100px.
  * **Bottom padding:** 0–100px.

### 3. Gallery block settings

Each **Gallery** block is one panel. You can add up to 6 panels. The first panel is open when the page loads.

* **Image:** The panel image.
* **Mobile image:** Optional image used on mobile. If empty, the main image is used.
* **Image overlay opacity:** Darkens the image so text stays readable, 0–100%.
* **Subheading:** Small text shown above the panel heading.
* **Heading:** The panel's title. Also used as the strip label when **Label style** is Panel heading.
* **Heading size:** H1 / H2 / H3 / H4 / H5 / H6.
* **Description:** Short text shown below the heading.
* **Content position:** Where the text sits in the open panel: Bottom left / Bottom right / Top left / Top right / Center.
* **Content width:** Maximum width of the text area, 240–800px.
* **Button**
  * **Button label:** Text on the button. Leave empty to hide the button.
  * **Button / panel link:** Where the button goes. If there's no button label, the whole open panel becomes clickable instead.
* **Custom colors**
  * **Use custom colors:** Uses the colors below for this panel instead of the default white text and standard button colors.
  * **Heading:** Color of the panel heading.
  * **Text:** Color of the subheading and description.
  * **Button label:** Text color of the button.
  * **Button background:** Background color of the button.

### 4. Tips

* 4 to 5 panels usually look best. With more panels, each collapsed strip gets narrower.
* Panels are cropped to very different shapes as they open and close, so use images with the subject in the center (at least 1600px wide).
* On mobile, the panels stack vertically as an accordion and the labels are shown horizontally.
* Keep headings short when using **Label style** > Panel heading, since the label is shown vertically on narrow strips on desktop.