> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/cms-extensions/cms-elements/product-page/image-gallery-grid.md).

# Image gallery (Grid)

{% hint style="info" %}
**Note**: This element and this article are work in progress.
{% endhint %}

The **ThemeWare® "Image gallery (Grid)"** is a variant of the "Image gallery" from Shopware. In this element, the product images are displayed in a grid or one below the other (as a scroller).

<figure><img src="/files/m3Lt2DGg2jR3I1IylXhO" alt=""><figcaption><p>ThemeWare® CMS extension "Image gallery (Grid)"</p></figcaption></figure>

{% hint style="info" %}
**Note**: This CMS element has no individual CMS block. Simply replace a "Image gallery" element in an existing CMS block.
{% endhint %}

{% hint style="success" %}
**Beta**: This feature is currently in beta and may change in a future release. – We'd love to hear your [feedback](https://service.themeware.design/en/feature-request).
{% endhint %}

{% hint style="warning" %}
**Important**: This element is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## Add element (replacing the "Image gallery" element)

You can use the ThemeWare® "Image gallery (Grid)" by replacing an existing "Image gallery":

1. Move the mouse over the CMS block (1)
2. Click on the ![](/files/b6gVu58MXtDooQvBy4BB) "Replace" icon (2)
3. The pop-up "Select element" opens
4. Select the desired CMS element (3)

<div><figure><img src="/files/VaKMJ0aIah0JDn71pV4t" alt=""><figcaption></figcaption></figure> <figure><img src="/files/HOzx6e9BsnxGac1oI7vd" alt="" width="521"><figcaption></figcaption></figure></div>

***

## Configure element

You can configure the ThemeWare® "Image gallery (Grid)" as follows:

1. Click on the corresponding CMS block (1) to activate the "edit mode"
2. Hover the mouse over the desired CMS element
3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element
4. The "Element Settings" pop-up will open
5. Make the desired changes
6. Save your changes

You have now configured the CMS element.

<figure><img src="/files/bXfbxBgTYkPSoU3Pgqkl" alt=""><figcaption><p>Configuring the ThemeWare® "Image gallery (Grid)"</p></figcaption></figure>

***

## Configuration

The configuration of the "Image gallery (Grid)" is fairly self-explanatory. The **gallery images** are a mandatory field. Strictly speaking, you do not need to configure anything else.

### General

In the "General" tab you configure the images and the display of the gallery.

> **Gallery**
>
> In the "Gallery" section you select the **images** to be displayed in the gallery. This is a mandatory field. You can also configure the **display mode**, the **minimum height** (default: `430px`, for the mobile gallery slider), the **minimum height (>=992px)** (for the grid from desktop) and the **vertical alignment**.

### Layout

In the "Layout" tab you configure the grid layout and the gallery navigation.

> **General**
>
> In the "General" section you can select the **layout type**. Three layouts are available: "Images stacked", "Images stacked (1x 100%, rest 50%)" and "Images stacked (all 50%)".
>
> **Gallery slider**
>
> In the "Gallery slider" section you can configure the **arrow navigation**, the **dot navigation** and the **preview navigation** of the mobile gallery slider.
>
> **Gallery grid (>=992px)**
>
> In the "Gallery grid" section you can show or hide the **preview navigation** of the gallery grid (from desktop). You can also activate the **fullscreen gallery**.

***

## Examples

<figure><img src="/files/m3Lt2DGg2jR3I1IylXhO" alt=""><figcaption><p>ThemeWare® CMS extension "Image gallery (Grid)"</p></figcaption></figure>

<figure><img src="/files/XQxBb1FDpzpuyCjkZRei" alt=""><figcaption><p>ThemeWare® CMS extension "Image gallery (Grid)" (as a gallery scroller)</p></figcaption></figure>