Search

Display images in an image gallery

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.

Image gallery showing multiple photos in a grid

Info

To rotate large-format images instead of using a gallery, use the content element Image slider.

How to add an image gallery

  1. In the sidebar of the administration, navigate to Editor.
    The Editor opens.
  2. Navigate to Pages.
  3. Select the page to edit or add a new page.
    A preview of the page opens on the right-hand side.
  4. Navigate to Content elements → Images.
  5. Drag the content element Image gallery to the desired position. You can only drop content elements into the blue areas of the page.
  6. Select Add images.
    The Add images view appears.
  7. Drag images onto the Add images view or select Add images to upload from your device.
    You can assign up to 24 images to the gallery.
  8. Once the upload is complete, select Save.
    If you encounter any issues, see Troubleshooting.

You have added an image gallery to your shop.

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.

  1. Hover over the image gallery and select Edit.
    The Edit image gallery view appears. In the lower left corner of the view, you can see how many images you've already added.
  2. Below the uploaded images, select the Add images link and choose the additional images from your device.
  3. When the upload is complete, select Save.
    If you encounter any issues, see 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.

  1. Hover over the image gallery and select Edit.
    The Edit image gallery view appears.
  2. Hover over an image and select Edit on the image.
  3. Here you have the following options:
    Option Description
    Change image

    Replace the image by selecting Change image, 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.

    Caution

    You can also select products via the link picker that are currently set as not visible in the product settings. Even if a product is set as not visible, it can still be accessed via its URL. However, it can't be ordered.

    External link:
    Enter the full URL in the Enter link or search page/product field.

    Confirm with Apply link.

    To remove the link, select Delete link.
    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 shop by switching tabs again.
  4. Select Apply.
  5. Once you are done, select Save.

You have updated the image gallery.

Delete images

You can also delete individual images from an image gallery.

  1. Hover over the image gallery and select Edit.
    The Edit image gallery view appears.
  2. Hover over an image and select Delete on the image.
  3. Select Save.

You have deleted the image from the image gallery.

Troubleshooting

In the following sections, you can find information on how to solve issues/errors that can occur when adding images to your image gallery.

  • Your 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.

  • 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 shop 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.

  • 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 will need to delete images. As soon as your image gallery includes 24 images or less, you can select Save again.

  • 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.

  • 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.

Was this article helpful?