Banner (ps_banner)

Description

This module is responsible for generating and managing the graphical interface element called Banner. Usually, the Banner is displayed in the homepage of the webshop.

Banner User Interface

Common components

• E-commerce logo.

• PrestaShop version number.

• Quick access dropdown.

• Search input.

• Shop switcher with eye icon.

• Bell icon (todo link).

• Trophy icon (todo link).

• Account icon.

• Breadcrumbs navigation - Breadcrumb UI Kit.

• Heading of the page - Headings UI Kit.

• Page header call to action buttons (modules).

• Language dropdown for input fields.

• ​Save button - Buttons basics UI kit.

• Configuration block.

The UI elements

Banner image input

Description	Value	Error message
Mandatory	NO	-
Allowed/Forbidden values	GIF, JPG or PNG	Image format not recognized, allowed formats are: .gif, .jpg, .png
Default value	-	-
Help text	Upload an image for your top banner. The recommended dimensions are 1110 x 214px if you are using the default theme.	-
Tool tips	-	-
Lower limit	-	-
Upper limit	-	-
Behavior	Banner image input behavior	-

Banner link input

Description	Value	Error message
Mandatory	NO	-
Allowed/Forbidden values	-	-
Default value	-	-
Help text	Enter the link associated to your banner. When clicking on the banner, the link opens in the same window. If no link is entered, it redirects to the homepage.	-
Tool tips	-	-
Lower limit	-	-
Upper limit	-	-
Behavior	Banner link input behavior	-

Banner description input

Description	Value	Error message
Mandatory	NO	-
Allowed/Forbidden values	-	-
Default value	-	-
Help text	Please enter a short but meaningful description for the banner.	-
Tool tips	-	-
Lower limit	-	-
Upper limit	-	-
Behavior	Banner description input behavior	-

Behaviors description

Banner image input behavior

Banner image (Forms files UI kit) with Choose a file button with folder icon (Buttons with icons UI kit) - clicking on button Choose a file component will initiate a Browse for file pop-up action, depending on the OS the user has. When hover mouse pointer on it, button color changes.

After those components, there is a Preview block. It displays the latest loaded image.

Banner link input behavior

Banner Link (Forms normal UI kit) - a certain link can be defined, then users will be able to click on the banner and get redirected to the certain place.

Banner description input behavior

Banner description (Forms normal UI kit) - a certain description that can be defined. The description will be displayed as hovered alt text on the image banner.

Multistores functionality

The page is Multistores dependent.