Media - Image

In the Page Builder panel, expand Media and drag an Image placeholder to the target container.

You can add an image to a row, column, or tab. In the following example, the image is dragged to an empty column.

{width="600" modal="regular"}

Use one of the following methods to add the image asset:

{width="500" modal="regular"}

• Upload a new image: Use this method to upload a new image file from your system.

  • Click Upload Image.

  • Locate and choose the image to add it to the gallery and target container.

  As an alternative, you can also drag an image file from your system and drop it on the Camera ( {width="20"} ) icon.

• Select an existing asset: Use this method to select an existing image asset from the media storage/gallery.

  • Click Select from Gallery.

  • Use the tree to navigate to the image.

  • Click the thumbnail and click Add Selected.

    {width="600" modal="regular"}

• Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.

  note note
  NOTE
  This method requires an Adobe Stock integration configured for your Admin.

  • Click Search Adobe Stock and search for an image.

  • Save the preview or licensed image to the gallery.

    See Using Adobe Stock Images for more information about working with Adobe Stock assets.

  • Select the asset thumbnail in the gallery and click Add Selected.

The image appears in the target container at the placeholder location. Unlike a background image, you can move the image to a different position within the current container or to a different container.

{width="500" modal="regular"}

Hover over the image container to display the tool box and choose the Settings ( {width="20"} ) icon.
The file name, dimensions, and file size appear below the current image.

{width="600" modal="regular"}

To change the current Image, do one of the following:

• Upload a new image: Use this method to upload a new image file from your system.

  • Click Upload Image.

  • Locate and choose the image to add it to the gallery and target container.

• Select an existing asset: Use this method to select an existing image asset from the media storage/gallery.

  • Click Select from Gallery.

  • Use the tree to navigate to the image.

  • Click the thumbnail and click Add Selected.

    {width="600" modal="regular"}

• Search and select an Adobe Stock image: Use this method to find an image from Adobe Stock.

  note note
  NOTE
  This method requires an Adobe Stock integration configured for your Admin.

  • Click Search Adobe Stock and search for an image.

  • Save the preview or licensed image to the gallery.

    See Using Adobe Stock Images for more information about working with Adobe Stock assets.

  • Select the asset thumbnail in the gallery and click Add Selected.

To add a Mobile Image, use the same methods described in the previous step to select an image to be used for display on mobile devices.

{width="600" modal="regular"}

If needed, specify a Link for the image.

The link is the destination page that appears when the customer clicks the image. You can use one of three link types:

• URL - Links to either a relative or fully qualified URL.

• Product - Identifies the destination page based on the product name or SKU. Search for the product by name based on either a partial or full name. Choose the product from the search results list.

  {width="600" modal="regular"}

• Category - Identifies the destination page as a specific category or subcategory in the category tree. Search for the category based on either a partial or full name. Choose the category from the expanded section of the displayed tree.

  {width="600" modal="regular"}

• Page - Identifies the destination page as a specific content page. Search for the page based on either a partial or full name. Choose the page from the search results list.

  {width="600" modal="regular"}

If you want to prevent the visitor from navigating away from your store, select the Open in new tab checkbox. When the checkbox is cleared, the linked destination opens in the same browser tab, which could effectively navigate the visitor away from your store.

To add an Image Caption, enter the text that you want to appear below the image.

The format of the caption is determined by the stylesheet that is associated with the current theme.

The caption typically appears below the image, and provides information about the image for visitors and search engines. If your site is available in multiple languages, you might use the same image, but translate the caption. In HTML, the <figcaption> tag is a subset of the <figure> tag. <figcaption>This is the image caption</figcaption>

Update any of the other settings as needed:

• Search Engine Optimization
• Advanced

When complete, click Save to apply the settings and return to the Page Builder workspace.

Hover over the image container to display the toolbox and choose the Move ( {width="20"} ) icon.

{width="500" modal="regular"}

Select and drag the image to the new position, just below the red guideline.

{width="500" modal="regular"}

Hover over the image container to display the toolbox and choose the Remove ( {width="20"} ) icon.

When prompted to confirm, click OK.