Documentation

Using Media

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

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

If you store media items 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 media items on your website by associating a data source filter with a Frontend component on your page version.

Supported file format and size

In the Media area you can upload files of the following formats:

  • AVIF
  • GIF
  • JPEG
  • MP4
  • PDF
  • PNG
  • SVG
  • WEBP

The maximum file size is 20 MB.

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

Animated GIF files will appear as static images on your website.

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

Upload a media item

To upload a media item, 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 Media page with the Add media button and some of the uploaded media items

Delete a media item

To delete a media item, 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 media item to delete by clicking it, the media data pane opens. Then, click Delete.

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

      The media data pane with the Delete button inside it

    • Select one or multiple media items to delete by selecting the related checkbox. To select all media items, click Select all. Then, click Delete.

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

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

Edit a media item settings

Edit a media item name, alt title, or description

To edit a media item name, alt title, or description follow these steps:

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

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

  1. In the Settings section, enter the new value in the Name, ALT title, or Description field.

  2. Click Save.

The value in the ALT title field is the default alt title of the media item, unless from the page builder you enter an alt title in the settings of the Frontend component where the media item is used. If you do not enter any value in the ALT title field, the value in the Name field will be the alt title of the media item.

In the Description field, we suggest entering a description of the media item that helps accessibility and SEO, and that can be used in the frontend code to be displayed to customers.

Edit media item tags

Tags let you assign categories to media items to make their search and filtering easier. To edit the tags of a media item, follow these steps:

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

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

  3. In Settings > Tags, do the following:

    • To add a tag, select it from the drop-down list or enter the name of the tag and press Enter / Return on your keyboard.
    • To remove a tag, click the x icon next to the tag name.

  4. Click Save.

Search and filter media items

To search and filter media items, follow these steps:

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

  2. Do one or more 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.

    • Select the Uploaded by me checkbox.

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

Sort media items

You can sort media items by size or upload date. To so so, follow these steps:

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

  2. From the sorting drop-down, select the sorting criterion.

The sorting drop-down of the Media page with the sorting criteria listed

See where a media item is used

You can see on which page versions a media item is used. To do so, follow these steps:

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

  2. Select the media item by clicking it, the media item data pane opens.

  3. Expand the Media usage section.