Documentation

Using Media

The Media area lets you add and manage the images to use on your website.

From the Media area, you can upload, delete, edit, and search the images to use on your website. Before images are displayed on your website, our Content Delivery Network (CDN) optimizes and scales them to improve performance.

If you store images in your backend (for example, Composable Commerce or a CMS) you don't need to upload them to the studio. In such a case, you can display images on your website by associating a data source filter with a Frontend component on your page version.

Upload an image

To upload an image, follow these steps:

  1. From the studio home page or from the left menu, go to Media.

  2. Do one of the following:

    • Click Add media, then select the file from your computer.
    • Drag the file from your computer to the Media page.

    The maximum file size is 20 MB. Only image type files can be uploaded (for example, JPEG, PNG, SVG, and GIF).

    Animated GIFs will appear as static images on your website.

    Experimental image formats such as AVIF might not render correctly on some web browsers. If you encounter image rendering issues, you should re-upload the image in a different format. You can use CanIUse to check image format browser compatibility.

    SVG files must contain XML definitions. Failure to do so may result in studio malfunctions.

    The Media page with the Add media button and some of the uploaded images

Delete an image

To delete an image, follow these steps:

  1. From the studio home page or from the left menu, go to Media.

  2. Do one of the following:

    • Select the image to delete by clicking it, the image data pane opens. Then, click Delete.

      You will not be asked to confirm the deletion. By clicking Delete you permanently delete the image.

      The image data pane with the Delete button inside it

    • Select one or multiple images to delete by selecting the related checkbox. Then, click Delete.

      You will not be asked to confirm the deletion. By clicking Delete you permanently delete the images.

      Some images selected on the Media page via their respective checkboxes and the Delete button is displayed

Edit an image settings

Edit an image name

To edit an image name, follow these steps:

  1. From the studio home page or from the left menu, go to Media.

  2. Select the image to edit by clicking it, the image data pane opens.

  3. In Settings > Name, enter the new name of the image.

  4. Click Save.

Edit image tags

Tags let you assign categories to images to make their search easier. You can find the existing tags in the Tag list drop-down.

The Tag list drop-down of the Media page with some tags listed

To edit the tags of an image, follow these steps:

  1. From the studio home page or from the left menu, go to Media.

  2. Select the image to edit by clicking it, the image data pane opens.

  3. In Settings > Tags, do the following:

    • To add a tag, enter the name of the tag and press Enter / Return on your keybord.
    • To remove a tag, click the x icon next to the tag name.

  4. Click Save.

Search images

To search images, follow these steps:

  1. From the studio home page or from the left menu, go to Media.

  2. Do one or both of the following:

    • Enter the search term in the search box.

    • Select one or multiple tags from the Tag list drop-down.

      You can enter the name of the tag in the Tag list field to ease the selection.