To add a Hero Image Banner to your site, open the Site Designer feature by clicking the Site Designer icon in the Left Navigation Menu on your store's Dashboard.

You can add the Hero Image Banner Block to any Page on your site. Using the Page: Home dropdown menu at the top left of the Site Designer Page, choose the page to which you will add your Hero Image Banner. In this example, we will be adding them to the Returns Page by clicking Returns in the dropdown. This will show the Hero Image Banner on the Returns Page any time it is accessed.

Locate a spot on your page to display the Hero Image Banner Block. We decided to add them at the bottom of the page, above the Footer. Navigate to this spot and mouse over the location until the blue Plus Sign icon appears. Your Hero Image Banner Block will appear below the Plus Sign icon. Click the icon to add your block. The Add a Block menu will pop-out on the left side of the page. Scroll down through the Default Blocks and click on the Hero Image Banner Block. There are 3 versions of the Hero Image Banner currently available, choose the one that best fits your needs. Click on the Add Block button to add it to your Page.

The block has now been added to the Returns Page. To personalize the block, mouse over it and click the Edit button that appears at the top left corner of the block.

Edit options for the block include deleting it or moving its position on the page. The banner image can be changed, and a mobile-only version of the image can be added as well, to decrease page load time on mobile devices. The size of the text overlay and its position can be changed. The primary button can be enabled or disabled, its link changed, as well as its alignment and style. A secondary button can also be added. The text and overlay colors can be edited as well. To save any edits, click the Done button at the bottom of the edit popout.

The edit the Hero Image, click the Change Image button in the edit popout. This will open your site's Image Gallery. Click on an image to choose it, and then click the blue Use This Image button at the bottom right of the popup. If you do not already have the image you want to use in your Image Gallery, you can use the Upload Image button at the bottom left to add new images to your Image Gallery.

You can change the text of your Hero Image Banner if needed by typing new information in the text overlay. To edit the text, click the blue Edit Text button. An Edit Text popup will appear, allowing you to add and edit your text. The text editor includes functionality for changing fonts and font sizes, changing font style, adding lists, embedding files, adding images, and editing paragraph style. When your field is edited, save your changes by clicking the Update button at the bottom right of the popup.

The text overlay's button can be edited by changing the information in the Text field and by adding a URL to the Link field. A slider also allows the linked page to open in a new window.

When your edits to the Hero Image Banner are complete, click the Done button at the bottom of the Hero Image Banner Edit Block popout.

Your final step should be to click the green Publish button at the top right of the Site Designer page. Until this button is clicked your changes will not be visible on your storefront.

Viewing The Returns Page on the storefront and scrolling to the bottom of the page will show your Hero Image Banner Block.

Did this answer your question?