How to use the Banner section


This article will guide you through the steps to add the Banner section to your page and configure the section in EcomSolid.



What is the Hero Banner section?

On an e-commerce site, a hero banner refers to the large, eye-catching, usually full-width banner that appears above the fold. A well-designed hero banner helps you draw in customers’ attention and convey the very initial message of your store, coupled with contrasted and accessible Call to Action buttons to maximize click-through rate, thus upping your sales.

In EcomSolid, the Banner section comes with 50+ beautiful presets and allows for deep customization, so you can tailor every pixel of your banner for your store, just the way you like it.


Add the section to your theme or page

Step 1: Go to the EcomSolid Dashboard and enter the Editor. Alternatively, you can create a new page using the Page builder.


Step 2: Open the Library and select the Banner tab. You will see all available banner presets.


Step 3: Browse through the presets and hit “Insert” when you find a suitable one.


Just like other sections, you can reposition your banner by dragging and dropping it in the left sidebar, under the Sections tab.


Configure the settings

The Banner section is flexible in that some of its presets are also suitable to fit in the middle of the page’s content, not necessarily exclusively for the above-the-fold space.

The settings of the Banner vary a bit between presets. However, the main configurations are similar and the slight difference depends on the way each preset was designed. 

For example, a banner preset that displays 4 small images will have different settings compared to a preset that displays 1 large image.

All presets allow for deep customization, including:


  • Background banner: Image/Solid Color, Overlay, Image positioning



  • General settings: Banner height, spacing (margin, padding)



  • Up to 19 different entrance animations.
  • Text: Headings and paragraphs: Granular control over text and other atoms inside each banner (for banners that support headings/messages.
  • Call To Action buttons: Ability to link URL to CTA buttons (for banners that support buttons).

Lastly, don’t forget to hit “Save” and refresh your Editor to save the changes. Hit “Update Live”, then “Yes, Update” to bring the changes to your front store! 


And there you have it! Should you require further information, our EcomSolid Support Team is here to help.

We can be reached via email or live chat.

Was this helpful?