Image

Use the Image content type to add a JPG, GIF, or PNG image to the stage. In addition to the default desktop image, you can specify a secondary image for mobile devices. You can also add a caption that appears below the image and link the image to any URL, product, category, or page.

Image In Column

To add an image

  1. In the Page Builder panel under Media, drag an Image placeholder to the target container.

    In this example, the image is dragged to an empty column.

    Drag Image to Stage

  2. Use one of the following methods to upload a new image or choose an existing image from the gallery:

    Upload Image or Select from Gallery

    Upload New Image

    • Click Upload New Image.

    • Navigate to the image in your local file system. Then, choose the image to add it to the gallery and target container.

    Select from Gallery

    • Click Select from Gallery.

    • In the gallery, navigate to the image and click the thumbnail. Then, click Add Selected.

      Add Selected Image

      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.

      Image in Column

To change image settings

  1. Hover over the image container. Then, choose Settings () in the toolbox.

    Image Toolbox

    The file name, dimensions, and file size appear below the current image.

    Current Image

  2. To change the current image, do one of the following:

    • Click Upload. Then, navigate to the image in your local file system and choose the file.

    • Click Select from Gallery. Navigate to the image in the gallery. Then, click the thumbnail and click Add Selected.

  3. To add a mobile image, do one of the following:

    • Click Upload. Then, navigate to the image in your local file system and choose the file.

    • Click Select from Gallery. Navigate to the image in the gallery. Then, click the thumbnail and click Add Selected.

    • Drag the image from a directory in your local file system, and drop it on the camera icon.

    Mobile Image

  4. To link the image(s), choose one of the following destination types, and follow the instructions.

    URL

    • Set Link to URL.

    • Enter the destination URL.

    Link to URL

    Product

    • Set Link to Product.

    Link to Product

    • Do one of the following:

      • Begin typing the product name or SKU.
      • Choose the product from the search results list.
      • Click the down arrow, and choose the product from the list.

    Choose Product

    Category

    • Set Link to Category.

    • Do one of the following:

      • Begin typing the category name.

      • In the category tree, drill down to the category.

    • In the category tree, click the category name.

    Link to Category

    Page

    • Set Link to Page.

    • Do one of the following:

      • Begin typing the page name. Then, click the name of the page in the list.

      • Click the down arrow and choose the page from the list.

      Link to Page

    If you want to prevent the visitor from navigating away from your store, select the Open in new tab checkbox.

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

    Image Caption

  6. Expand the Search Engine Optimization section. Then, do the following:

    • In the Alternative Text field, enter the “alt” text that you want to be available to improve accessibility.

    • In the Title Attribute field, enter the text that you want to appear as a tooltip on mouseover.

    Both of these fields are visible to search engines, and improve the way the page is indexed.

  7. Update the remaining settings as needed, using the field descriptions at the end of this page for reference.

  8. In the upper-right corner, click Save to close the Edit Image page and return to the Page Builder workspace.

To move an image

  1. Hover over the image container. Then, choose Move () in the toolbox.

    Move Image

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

    Red Guideline Above Target Destination

To remove an image from the stage

  1. Hover over the image container. Then, choose Remove () in the toolbox.

  2. When prompted to confirm, click OK.

Image Toolbox

Tool Icon Description
Move Move icon Moves the image to another position on the stage.
(label) IMAGE Identifies the current content container as an image. Hover over the image container to see the toolbox.
Settings Settings icon Opens the Edit Image page, where you can change the properties of the image and container.
Hide Hide icon Hides the current image.
Show Show icon Shows the hidden image.
Duplicate Duplicate icon Makes a duplicate copy of the image.
Remove Remove icon Deletes the image from the stage.
Upload New Image   Uploads an image from your local file system to the gallery.
Select from Gallery   Chooses an existing image from the gallery.

Image Settings

Setting Description
Image Adds an image that is intended to be viewed from a desktop computer to the stage. You can add images directly to a row, column, or tab. Maximum size is 4 MB. Supported file types: JPG, GIF, PNG
Upload - Uploads an image file from your local computer to the gallery.
Select from Gallery - Prompts you to choose an existing image from the gallery.
Camera icon - Allows you to either drag the image to the camera tile or browse to the image in your local file system.

Note: The Banner and Slider content types also include Upload Image and Select from Gallery options for desktop images.
Mobile Image Adds an image that is intended to be viewed from a desktop computer to the stage. You can add images directly to a row, column, or tab. Maximum size is 4 MB. Supported file types: JPG, GIF, PNG
Upload - Uploads an image file from your local computer to the gallery.
Select from Gallery - Prompts you to choose an existing image from the gallery.
Camera icon - Allows you to either drag the image to the camera tile or browse to the image in your local file system.
Link Adds a hyperlink to the primary desktop image, and to the mobile image, if available. Options:
URL - Links the image to a URL.
Product - Links the image to a product detail page from your store’s catalog.
Category - Links the image to a category page.
Page - Links the image to a content page.
Open in new tab Determines whether a linked page opens in the same browser tab, or in a new tab. Options:
Checkbox selected - When the checkbox is selected, the page from your store continues to be open on the current tab, and the linked page opens in a new browser tab.
Checkbox cleared - When the checkbox is clear, the linked page opens in the same browser tab as your store, which effectively navigates the visitor away from your store.
Image Caption Specifies the caption that is associated with the image. 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>
Search Engine Optimization Provides additional information to improve the way the image is indexed by search engines. Options:
Alternative Text - Specifies the “alt” text description of the image. The use of alt text is an accessibility best practice, and in some locales is required by law. The alt attribute is a subset of the image tag. <image title="tooltip" alt="description" src="image.jpg">
Title Attribute - Specifies the text for a tooltip that appears when you hover over the image. As a best practice, choose a descriptive, keyword-rich title to improve the way the image is indexed by search engines. In HTML, the title attribute is a subset of the image tag. <image title="tooltip" alt="description" src="image.jpg">

Advanced

Setting Description
Appearance Determines how the background color and/or image appears in relation to the parent container, and the width that is available for content. Options:
Contained - The background color or image is limited to the maximum page width that is defined by the theme.
Full Width - Limits the image to the maximum page width that is defined by the theme. However, the background is not limited, and extends the full width of the row. Full Bleed - Neither the image nor the background are limited, and extend the full width of the row.

Note: Full Bleed can be used only with themes that support the layout.

Background

Setting Description
Background Color Determines the background color and opacity of the row.
Background Image Determines the location of the background image and applies the image to the row. Options:
Upload - Uploads an image file from your local computer to the gallery and then applies it as the background image for the row.
Select from Gallery - Prompts you to choose an existing image from the gallery as the background image for the row.
Background Mobile Image Determines the location of the background image that is to be used for mobile devices and applies the image to the banner. If left blank, the standard desktop background image is used. Options:
Upload - Uploads an image file from your local computer to the gallery and then applies it as the background image for the row.
Select from Gallery - Prompts you to choose an existing image from the gallery as the background image for the row.
Background Size Determines how the background image is scaled in relation to the width of the row. Options:
Cover - The background image covers the full width of the row.
Contain - The background image is limited to the width of the content area.
Auto - Applies the default background size that is specified in the stylesheet of the current theme.
Background Position Determines the anchor point of the image in relation to the row. Options: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right
Background Attachment Determines how the background image moves in relation to the scrolling page. Options:
Scroll - The background image is synchronized to move down as the page scrolls. Use Parallax Background to control the scrolling speed.
Fixed - (Not available for mobile) The background image does not move as the container scrolls over the image and is fixed at the specified background position.
Background Repeat Determines if the background image is repeated. Options:
Yes - The background image is repeated to fill the available space.
No - Uses only a single instance of the background image.
Parallax Background Determines the speed of a scrolling background image in relation to the scrolling of the page. The background can be set to scroll more slowly to create a sense of immersion. Options:
Enable Parallax Background - Enables parallax scrolling of the background image.
Parallax Speed - Determines how fast the background image moves in relation to page scrolling. Accepts values in the range of -1.0 to 2.0.
Layout Determines the minimum height and vertical alignment of the row. Options:
Minimum Height - Determines the minimum height of the row. For example, you might set the minimum height to match the height of a background image to ensure that the full image is visible.
Vertical Alignment - Determines the vertical position of content containers that are added to the row.