The HTML Page Peel banner is a type of banner that is displayed in a top corner of a webpage and when hovered over it unfurls to reveal the image. Upon clicking, the user is redirected to the specified destination URL.
To activate the feature, navigate in the merchant panel to Configuration > Features and search for the "Page Peel Banner" feature. After reloading the page, you can create a new HTML Page Peel banner in the Banners > Banners manager section of the menu by clicking on Add banner > Page Peel HTML.
To configure the banner fill in every mandatory field marked with *.
Apart from the default banner settings in the General Banner Information section, you can define the following settings in the Banner Parameters section:
- Open destination url in - determines if the banner's destination URL opens in a new tab or in the same browser tab
- Banner position - sets the banner's placement to the top right, top left, or both top corners of the webpage
- Quickness - defines the speed at which the banner unfolds - Fast (0.5s), Normal (1s), or Slow (2s)
- Image - banner's displayed image in both its folded and unfolded states
- Background color of closed banner - background color used if the image is transparent or smaller than the closed banner size
- Closed size - size of the banner in closed (folded) state
- Background color of opened banner - background color used if the image is transparent or smaller than the open banner size
- Opened size - size of the banner in open (unfolded) state
After saving the banner settings, you can preview the banner by clicking on the "Show banner preview" button. This will show you how the banner will look both when folded and unfurled.
The HTML code for the banner includes also a CSS code, which should be placed in the header/styles of your webpage.