2.12. Image Teaser in Flyout Navigation

Owned by Adnan Krzavic
Last updated: Apr 14, 2022 by Duy Pham
2 min read

 

MageSuite allows to include an Image Teaser in the Flyout Navigation. By doing so you can insert e.g. emotional content and attract the customer for specific products. Also you can add Teasers to promote marketing campaigns.

 

Figure 83 Image Teaser in Flyout Navigation (storefront)

 

In order to insert an Image Teaser in the Flyout Navigation firstly access the Categories configuration in CATALOG / INVENTORY / CATEGORIES. Here scroll down to the IMAGE TEASER section and expand it.

 

Here you can do the following settings:

 

  1. Enter the 

HEADLINE text which will be the most prominent text element on the image teaser (depending on the styling).

  1. Enter the 

SUBHEADLINE text which will be the text element located underneath the headline on the image teaser (depending on the styling).

  1. Enter the 

PARAGRAPH text which will be the text element located underneath the subheadline on the image teaser (depending on the styling).

  1. Insert an 

IMAGE as the Image Teaser using the UPLOAD button.30

  1. Enter a 

BUTTON LABEL text in case you want to include a button on the image teaser.

  1. Enter a URL in the 

BUTTON LINK input in case you want to add a link to the button

 

 

_________________________________________  

30 Allowed file types: png, gif, jpg, jpeg, svg. Max file size 1MB.

 

 

 

 

Figure 84 Image Teaser in Flyout Navigation configuration (admin panel)

When the settings have been made click SAVE on the top section on the right-hand side.31

 

 

 

 

 

 

 

 

 

_________________________________________ 

31 In order to make the changes visible on the storefront you need to flush the cache in SYSTEM / TOOLS / CACHE MANAGEMENT