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

  • Tap 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

  • Tap Select from Gallery.

  • In the gallery, navigate to the image, and click the thumbnail. Then, tap 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 in the toolbox, choose Settings ( ).

    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:

    • Tap Upload. Then, navigate to the image in your local file system and choose the file.
    • Tap Select from Gallery. Navigate to the image in the gallery. Then, click the thumbnail, and tap Add Selected.
  3. To add a mobile image, do one of the following:

    • Tap Upload. Then, navigate to the image in your local file system and choose the file.
    • Tap Select from Gallery. Navigate to the image in the gallery. Then, click the thumbnail, and tap 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 in the list, click the name of the page.
      • 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, mark 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 style sheet 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, tap 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 in the toolbox, choose Move ( ).

    Move Image

  2. Hold down the mouse button, 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 in the toolbox, choose Remove ( ).

  2. When prompted to confirm, tap OK.

Image Toolbox

TOOLIconDescription
MoveMoves the image to another position on the stage.
(label)IMAGEIdentifies the current content container as an image. Hover over the image container to see the toolbox.
SettingsOpens the Edit Image page, where you can change the properties of the image and container.
HideHides the current image.
ShowShows the hidden image.
DuplicateMakes a duplicate copy of the image.
RemoveDeletes the image from the stage.
Upload New ImageUploads an image from your local file system to the gallery.
Select from GalleryChooses an existing image from the gallery.

Image Settings

SettingDescription
ImageAdds 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: 4 MB Supported file types: JPG, GIF, PNG
UploadUploads an image from your local file system to the gallery.
Select from GalleryChooses an existing image from the gallery.
Allows you to either drag the image to the camera tile, or browse to the image in your local file system.
* 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 mobile device to the stage. You can add mobile images directly to a row, column, or tab.*

Maximum size: 2 MBS Supported file types: JPG, GIF, PNG
UploadUploads an image from your local file system to the gallery.
Select from GalleryChooses an existing image from the gallery.
Allows you to either drag the mobile image to the camera tile, or browse to the image in your local file system.
* The Banner and Slider content types also include Upload Image and Select from Gallery options for mobile images.
LinkAdds a hyperlink to the primary desktop image, and to the mobile image, if available. Options:
URLLinks the image to a URL.
ProductLinks the image to a product detail page from your store’s catalog.
CategoryLinks the image to a category page.
PageLinks the image to a content page.
Open in new tabDetermines whether a linked page opens in the same browser tab, or in a new tab. Options:
When the checkbox is marked, the page from your store continues to be open on the current tab, and the linked page opens in a new browser tab.
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 CaptionSpecifies 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 OptimizationProvides additional information to improve the way the image is indexed by search engines. Options:
Alternative TextSpecifies 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 AttributeSpecifies 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
AppearanceDetermines how the background color and/or image appears in relation to the parent container, and the width that is available for content.
ContainedThe background color or image is limited to the maximum page width that is defined by the theme.
Full WidthLimits 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 BleedNeither the image nor the background are limited, and extend the full width of the row.

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

Background
Background ColorDetermines the background color and opacity of the row.
Background ImageDetermines the location of the background image file, and applies the image to the row. Options:
UploadUploads an image file from your local computer to the gallery, and applies it as the background image for the row.
Select from GalleryPrompts you to choose an existing image from the gallery as the background image for the row.
Background Mobile ImageDetermines the location of the background image file that is used for mobile devices, and applies the image to the row. If left blank, the standard desktop background image is used. Options:
UploadUploads an image file from your local computer to the gallery, and then applies it as the background image for the row.
Select from GalleryPrompts you to choose an existing image from the gallery as the background image for the row.
Background SizeDetermines how the background image is scaled in relation to the width of the row. Options:
CoverThe background image covers the full width of the row.
ContainLimits the background image to the width of the content area of the page.
AutoApplies the background image size from the current style sheet.
Background PositionDetermines 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 AttachmentDetermines how the background image moves in relation to the scrolling page. Options:
ScrollThe background image is synchronized to move down as the page scrolls. See 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 RepeatDetermines if the background image is repeated to fill the available space. Options:
YesThe background image is repeated to fill the available space.
NoOnly a single instance of the background image appears.
Parallax BackgroundDetermines the speed of a scrolling background image in relation to the scrolling of the page. You can set the background can be set to scroll more slowly to create a sense of immersion. Options:
Enable Parallax BackgroundEnables parallax scrolling of the background image.
Parallax SpeedDetermines how fast the background image moves in relation to page scrolling. Accepts values in the range of -1.0 to 2.0.
LayoutDetermines the minimum height and vertical alignment of the row. Options:
Minimum HeightDetermines 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 AlignmentDetermines the vertical position of content containers that are added to the row.