Using images

As a user of the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., you can add certain marketing images to Media. These can be in any format, for example, JPEG, or PNG. These images will then be optimized and scaled by our CDN before being displayed to your customers.

All other images that will be available on your site will come through either the API data sources that you're using and will automatically be brought through to your pages (these include icons, logos, and product images), or developers will specify how the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. accesses these images and how you can use them within Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.. For example, using a header component should include your brand logo but you won't need to add this, your developers will have done this for you when they created the component.

However, there are some components that you'll need to add your own images, for example, the Tile component.

  1. Once you've uploaded your images to the media library, navigate to the page you want to add the image to in the site builder and click the edit icon to open the page builder

  2. Drag the Tile component (or another image component) into your page where you want it to be displayed

  3. In the component settings panel, expand the Image section and click Select, this opens the image picker where you can select your image

You can also edit the other configurations within the panel as you'd like them to display to your users. Then you can preview your page with your new image, and then save your page.

Changing an image

You can change the image on your page at any time, just click on your component, expand the Image section of the component settings panel, click Select, then select another image:

If the image isn't available in your library, you can upload a new image from the overlay screen. Click the blue + icon and select your file, or drag your media file into the overlay window:


Did this page help you?