Use the content element Image gallery to showcase multiple images in a responsive grid. This is helpful to e.g. present your shop, your production process, or your brand.
Info
To rotate large-format images instead of using a gallery, use the content element Image slider.Topic overview:
How to add an image gallery
- In the sidebar of your cockpit, navigate to Editor.
The Editor opens. - Navigate to Pages.
- Select the page to edit or add a new page.
A preview of the page opens on the right-hand side. - Navigate to Content elements → Images.
- Drag and drop the Image gallery content element to the desired position.
You can only drop content elements into the blue areas of the page. - Select Add images.
The Add images view appears. - Drag images onto the Add images view or select Add images to upload from your device.
Note
You can assign up to 24 images to the gallery. - Once the upload is complete, select Save.
If you encounter any issues, see Troubleshooting.
You have added an image gallery to your website.
Note
The grid adapts to the number of images and their aspect ratios. The gallery is responsive: the number of columns and rows varies by screen size, but image order stays the same.How to edit an image gallery
Open the page with the gallery in the Editor to add, edit, replace, or delete images.
Caution
Changing the number of images or their aspect ratios updates the grid layout.Add images
You can add images to an existing gallery. A gallery supports up to 24 images.
- Hover over the image gallery and select
.
The Edit image gallery view appears. In the lower left corner of the view, you can see how many images you've already added. - Below the uploaded images, select the Add images link and choose the additional images from your device.
- When the upload is complete, select Save.
If you encounter any issues, see the section Troubleshooting.
You have added additional images to the image gallery.
Edit images
You can also add an alternative text and a link to each image of an image gallery. Furthermore, you can exchange individual images.
- Hover over the image gallery and select
The Edit image gallery view appears. - Hover over an image and select
on the image.
- Here you have the following options:
Option Description Change image Replace the image by selecting
in the upper right corner of the window. You can then select a new image from your device that you would like to add instead.
Alternative text Add an alternative text for the respective image. Info
Such an alternative text is a description of the image that can be used for SEO purposes, read by screen readers, or displayed in case the image cannot be shown. Come up with a short but meaningful description. For example, "Two white plant pots on a decorated table".Link Add a URL or use the link picker. When visitors select the image, they are redirected to the link. This way you can turn images into buttons.
- The link will not be visible on the image.
- To open the added link, customers can select any part of the image.
- Note that the link is only added to the respective image, not to the image gallery as a whole.
Internal link:
Select Pages or Products and choose the item. You can also search in the Enter link or search page/product field.Note
You can only link to published products. If a product is still in draft state, you'll need to publish it first before you can link to it.External link:
Enter the full URL in the Enter link or search page/product field.Confirm with
.
To remove the link, select
.
Open link in new tab Optional: Activate the Open link in new tab checkbox to open the link in a new browser tab. Without it, the link opens in the current tab.
We recommended to activate the checkbox if you enter a link to an external page, for example, a YouTube video. This way, your customers can easily return to your website by switching tabs again.
- Select Apply.
- Once you are done, select Save.
You have updated the image gallery.
Delete images
You can also delete individual images from an image gallery.
- Hover over the image gallery and select
The Edit image gallery view appears. - Hover over an image and select
on the image.
- Select Save.
You have deleted the image from the image gallery.
Troubleshooting
In the following section, you will find information on how to solve issues/errors that can occur when adding images to your image gallery.
Unsupported image format (use JPG, PNG, or GIF)
YYour shop supports JPG, PNG, and GIF. Convert images to a supported format to upload them. For further information, refer to Learn about image file formats.
File size exceeds 20 MB
If an image exceeds 20 megabytes (MB), try one of the following:
Option 1: Change the image file format
You can upload images to your website in the JPG, PNG, or GIF format. These formats have different characteristics which also affect the file size. Thus, changing the image file format might reduce the file size. For further information, refer to Learn about image file formats.
Option 2: Compress the image
You can compress the image to reduce the file size (e.g. by reducing the resolution). To do this, you can use basic image editors, for example when you open the image on your device. For further information on how to do this, refer to the help information of your chosen tool. Alternatively, you can also use various free online tools.
Note that the image quality might be affected when compressing the image.
Save button is greyed out and cannot be selected
There are two possible reasons for a greyed out Save button.
Reason 1: Upload of images is still in progress
Depending on the number and the size of the images you would like to add to the image gallery at once, the upload might take a while. You can see a progress bar on each image that has not been fully uploaded yet. As soon as all images are uploaded, you can select Save again.
Reason 2: More than 24 images added
You can only add up to 24 images to the image gallery. In order to be able to save your changes, you need to delete images. As soon as your image gallery includes 24 images or less, you can select Save again.
GIF has more than 100 frames
You can upload GIFs to the image gallery, but they cannot have more than 100 frames. There are free online tools available that can help you with reducing your GIF’s frame rate. For further information about GIFs, refer to Learn about image file formats.
Image resolution is too high
Your shop supports image resolutions with a maximum width of 7000 pixels and a maximum height of 7000 pixels.
If your image exceeds this resolution, you can reduce its size with the help of basic image editors, for example when you open an image on your device. For further information on how to do this, refer to the help information of your chosen tool. Alternatively, you can also use various free online tools.
Note that the image quality may be affected when you reduce the resolution.