Gestionnaire de Module

Configure

Top banner

Top banner

Pstopbanner is a lightweight module that allows you to display a banner at the top of your website.

» Developper and SEO friendly :

  • It encourages to use CSS classes instead of dirty inline styles.
  • Pure CSS animation.

» No HTML/CSS skills? No worries... :

  • Use color pickups to customize appearance.
  • Set a banner link easily.

Settings

Activate banner or deactivate banner on your website

By default, the top banner will be attched to the displayBanner hook, located in /themes/YOUR_THEME/_partials/header.tpl. If you encounter display bugs, try to switch to displayAfterBodyOpeningTag, which is located in /themes/YOUR_THEME/layouts/layout-both-columns.tpl right after the body opening tag.

When enabled, the top banner will be fixed at the top of your website. A padding equal to the banner height will be applied to top of body

When enabled, the content of the banner will be animated horizontally from right to left. It allows to display long sentences without using too much screen height.

For a cleaner code, you should rather use CSS classes below. If you do not have skills to use CSS skills, use the color picker.

For a cleaner code, you should rather use CSS classes below. If you do not have skills to use CSS skills, use the color picker.

You should use classes from your theme to style your banner: this is the most clean and SEO friendly way to customize the banner. As Prestashop 1.7 Classic theme uses Bootstrap 4 framework, take a look at Bootstrap documentation to see how easy you can change background color, text color, font-size, spacings and more!

If defined the whole banner will be clickable. Please include complete url with http:// or https://

If enabled, the link will open in a new tab.

Enter the text you want to display within the banner. HTMl allowed. Tip: On PS1.7 with Classic theme or child theme, you can use Material icons by simply adding a few HTML markup