Banner

Use the Banner content type to create an illustrated, interactive component that engages users with a call to action and button.

Page Builder includes a new “Banner” content type. What was previously the “Banner” option in the Content menu is now “Dynamic Block.”

Banner on Home Page

To add a banner

  1. Open the page where you want to place the banner, and expand the Content section.

  2. In the Page Builder panel on the left, expand the Media section. Then, drag a Banner placeholder to the stage.

    Drag “Banner” Content Type to Stage

  3. Hover over the banner container to show the toolbox.

    In addition to the toolbox, the Upload Image and Select from Gallery buttons are included so you can make quick changes to the banner directly from the stage.

    Banner Toolbox

  4. In the Banner toolbox, choose Settings ). Then, complete the following:

    Appearance

    Banners are extremely easy to set up and maintain, because they are based on one of four predefined templates.

    Under Appearance, choose one of the following settings:

    • Poster
    • Collage Left
    • Collage Center
    • Collage Right

    Appearance

    Background Color

    1. Use one of the following methods to set the background color:

      Method 1: Enter the Value

      In the “No Color” box, enter one of the following:

      • A predefined color name, such as “White”
      • The hexadecimal color value for the color, such as “#ffffff”
      • The rgba value for the color, with opacity percent, such as “rgba(255, 255, 255, 0.75)”

      No Color

      Method 2: Choose the Value

      Click the swatch to the left of the “No Color” box. Then do one of the following:

      • In the color picker palette, choose the color swatch.
      • In the color picker, drag the cursor to the color that you want.

      Choose Swatch

    2. Page Builder supports a transparency layer, or “alpha channel” that you can use to create backgrounds with varying degrees of opacity. Do the following to set the opacity of the background color:

      • Locate the Opacity slider just below the color picker.

      • Drag the slider to the 75% setting. Then, tap Apply.

        The box below the slider shows the current red, green, blue, and alpha values (rgba). The last number indicates the current opacity percentage as a decimal.

        Set Opacity

    Background Image

    • Scroll down to the Background section.

    • At the Background Image field, tap Upload.

      Upload Background Image

    • Navigate to the image in your local file system. Then, choose the file that you want to use.

      The image is uploaded to the gallery, and a thumbnail of the uploaded image appears. The file name, image dimensions, and file size are noted below.

      Background Image for Desktop

    • At the Background Mobile Image field, tap Upload. Then, choose the image that you want to use for mobile devices.

      Background Image for Mobile

    • Scroll up to the top of the page. Then in the upper-right corner, tap Save to close the Edit Banner page and return to the Page Builder workspace.

      The background appears on the stage, and extends the full width of the row.

      Banner with Background Image

    Banner Content

    Notice the placeholder text that appears on the right side of the row. The position of this text reflects the Appearance setting that you specified.

    • Click the placeholder text, and enter the text that you want to appear on the banner. The editor toolbar appears above the text box.

      Edit Content from Stage

    • Use the editor toolbar to format the text as needed.

      Stage with Formatted Text

    • Hover over the banner container. Then in the toolbox, choose Settings ).

    • Scroll down to the Content section.

      You can enter and edit text from the stage or from Banner Settings.

      Message Text

    Banner Links and Buttons

    A banner can have either single, or multiple links and buttons. Use one of the following methods to add links and/or buttons to the banner.

    Method 1: Single Link or Button

    The banner Appearance setting places a single link or button below the text. Simply follow the instructions below to complete the properties of the link or button that you want to add.

    Appearance with Text and Button (or Link)

    Method 2: Multiple Links or Buttons

    Create a separate block with the links or buttons that you want to include.

    To avoid conflict, keep all the links or buttons in the separate block, and do not add a link or button directly to the banner.

    Add a block placeholder to the banner stage. Then, choose the block that you prepared, and place it where you want it to appear on the banner.

    • Scroll down to the Link field below the Message Text box.

    • To link the banner, 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.”

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

        Link to 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 the link points to a URL that is outside of your store, and you want to prevent the visitor from navigating away from your store, mark the Open in new tab checkbox.

      • Set Show Button to one of the following:

        • Always
        • On Hover
        • Never Show
      • In the Button Text field, enter the text to appear on the button.

      • Set Button Type to one of the following:

        • Primary
        • Secondary
        • Link

        The button style from the current theme determines the button format. Typically, a primary button has a more prominent background color than a secondary button.

    Banner Overlay

    You can use an overlay to apply a background color to the active content area that is defined by the Appearance setting. The banner background image continues to be visible for the full width of the banner.

    • Set Show Overlay to one of the following:

      • Always
      • On Hover
      • Never Show
    • In the Overlay Color field, do one of the following:

      • Click the No Color swatch, and choose a swatch.
      • In the No Color field, either enter a valid color name, or hexadecimal value.

      Then, tap Apply.

      Overlay Color

    • In the Overlay Transparency field, the percentage of transparency that you want to apply for the overlay. For example, a transparency setting of 85% is the same as 25% opacity.

    • In the upper-right corner, tap Save. to close the Edit Banner page, and return to the Page Builder workspace.

      The button appears below the banner message on the stage.

      Banner with Text Message and Button

  5. On the Save menu in the upper-right corner of the workspace, click the down arrow. Then, choose Save & Close.

    Save Menu

  6. When prompted, click the Cache Management link in the message at the top of the page. Then refresh any invalid cache.

TOOL Icon Description
Move Moves the banner to another position on the stage.
(label) BANNER Identifies the current content container as a banner. Hover over the container to see the toolbox.
Settings Opens the Edit Banner page, where you can change the properties of the banner and container.
Hide Hides the current banner.
Show Shows the hidden banner.
Duplicate Makes a duplicate copy of the banner.
Remove Deletes the banner from the stage.
Upload New Image Uploads an image from your local file system to the gallery for the banner background.
Select from Gallery Uses an existing image from the gallery for the banner background.
Setting Description
APPEARANCE
Appearance Determines the banner layout. Options:
PosterCenters content and button on the banner. The overlay, if used, extends the full width of the banner.
Collage LeftPlaces content and button in a defined area on the left side of the banner. The overlay, if used, covers only the defined area.
Collage CenterPlaces content and button in a defined area that is centered on the banner. The overlay, if used, covers only the defined area.
Collage Right

Places content and button in a defined area on the right side of the banner. The overlay, if used, covers only the defined area.

Minimum Height Specifies the minimum height of the banner in pixels.
BACKGROUND
Background Color Determines the background color and opacity of the row.
Background Image Determines the location of the background image file, and applies the image to the banner. Options:
UploadUploads an image file from your local computer to the gallery, and applies it as the background image.
Select from GalleryPrompts you to choose an existing image from the gallery as the background image.
Allows you to either drag the background image to the camera tile, or browse to the image in your local file system.
Background Mobile Image Determines the location of the background image file used for mobile devices, and applies the image to the banner. If 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.
Select from GalleryPrompts you to choose an existing image from the gallery to be the background image.
Allows you to either drag the mobile background image to the camera tile, or browse to the image in your local file system.
Background Size Determines how the background image is scaled in relation to the width of the banner. Options:
CoverThe background image covers the full width of the banner.
ContainLimits the background image to the width of the content area of the banner.
AutoApplies the background image size from the current style sheet.
Background Position

Determines the anchor point of the image in relation to the banner. Options:

Top LeftTop CenterTop RightCenter LeftCenterCenter RightBottom LeftBottom CenterBottom Right
Background Attachment Determines how the background image moves in relation to the scrolling page. Options:
ScrollThe background image is synchronized to move down as the page scrolls.
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 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.
CONTENT
Message Text A text box and editor that you can use to enter and edit the banner message.
Link Determines the destination page that appears when the button or link is clicked. Options:
URLLinks to either a relative or fully-qualified URL.
ProductIdentifies the destination page based on the product name or SKU. The product name can be searched for based on either a partial or full name. The product is then chosen from the search results list.
CategoryIdentifies the destination page as a specific category or subcategory in the category tree.
PageIdentifies the destination page as a specific content page.
Show Button Specifies if and when a button appears on the banner. Options:
AlwaysA button always appears on the banner.
On HoverA button appears on the banner only on hover.
Never ShowA button never appears on the banner.
Button Text Specifies the text that appears on the button.
Button Type Determines the button format. Options:
PrimaryApplies the primary button style from the current style sheet.
SecondaryApplies the secondary button style from the current style sheet, if applicable.
LinkCreates a hyperlink rather than a button.
Show Overlay Applies a background color to the text content area that is defined by the Appearance setting. The banner background image or color continues to be visible for the full width of the banner. Options:
AlwaysThe overlay is always visible.
On HoverThe overlay appears only on hover.
Never ShowThe overlay is not visible.
Overlay Color Determines the color of the overlay. To specify the overlay color, choose a swatch, click the color picker, or enter a valid color name or hexadecimal value.
Overlay Transparency Specifies the transparency of the overlay as a percentage. For example, an overlay transparency of 85% is the equivalent of 15% opacity.
Advanced
Alignment Determines the horizontal alignment of the banner in relation to the parent container.
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns the banner along the left border of the parent container, with allowance for any padding that is specified.
CenterAligns the banner in the center of the parent container, with allowance for any padding that is specified.
RightAligns the banner along the right border of the parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the banner container. Options:
DefaultApplies the default border style from the style sheet that is associated with the current theme.
NoneProvides no visible indication of container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
SolidThe container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe container border appears as an outset line.
Border Color Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the container border.
Border Radius Specifies the size of the radius that is used to round each corner of the container border.
CSS Classes Specifies the names of CSS classes from the current style sheet which apply to the banner. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the banner container. Enter the corresponding values in the diagram. Options:
MarginsThe amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the banner container. Options: Top, Right, Bottom, Left
PaddingThe amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the banner container. Options: Top, Right, Bottom, Left