Adding a Banner Image

You can display a banner on your website for a number of reasons:

• To advertise a special event such as a sale or a new Online Store arrival.
• To promote a cause that you are supporting, for example, a nonprofit organization.
• To drive sales to your product on third-party platforms, for example, leading to a product in the Amazon store.
• To more color to your page and highlight the new user experience.

There are two ways to add a banner to your website page:

1. Adding a banner HTML code directly to the page as HTML block.

2. Adding the image as a background of the Call to action block.

Which method to choose? This depends on your priorities. 

• Want to add a new banner in few clicks without designing it? Choose Call to action.
• Need one or two clickable buttons? Choose Call to action.
• Have a pre-designed third-party banner? Choose HTML block. 

Adding banner as a Call To Action block

You can transform a Call To Action block into a full-width banner in seconds. All you need is a background image that would support the banner message. Here's how you can add a banner this way:

1. Locate a spot on your page where you would like to place the banner. 

2. Click the + Add block button and enter the Block Library. 

3.  Navigate to Call to action section and choose a banner.

Note: all Call To action block backgrounds are professionally selected to match your template, so you may consider leaving it as is.

4. Click on the chosen block to add it to the page and hover over it to trigger the Block Settings menu. 

5. Click the Block subtitle checkbox to add the subtitle to your banner message or uncheck to remove the extra lines of text.

6. Modify the Call to action title and the subtitle, if using. Enter your event or sale details. Simply click on the title and start typing or copy and paste your content. Here's an example:

7. Modify the button: hover over the button to edit the link:

Enter the name for the button, choose whether it opens in a new page of your website or an external URL, and click Submit to save changes.

8. Optional: change the Call to action block background. Hover over the block to trigger the block editing menu and click on Replace Image icon:

Choose another image from your computer, crop it as needed, and click Submit to replace the background image. Result:

Congratulations! Your full-width banner is ready, no image editor required.

Adding your banner as custom HTML

If you have a block of HTML code from an external URL or a referral banner URL, you can insert it as a block of Other > HTML. Here's how to do that:

1. Locate a spot on your page where you would like to place the banner. 

2. Click the + Add block button and enter the Block Library. 

3.  Navigate to Other section and click on the HTML block to add it to the page.

4. Hover over the line of text where the banner will be added and click on Custom HTML icon:

5. Paste your banner HTML code into the window and click Submit to confirm the changes.

Your banner should appear in the location you have selected.