Special Promotions (M2) - Widgets - How to Add Banners To The Frontend

How To Show Banners On The Frontend

To add the banners to the Frontend and make them available for the customers, please create the banner mentioned in the previous article.

By using the Special Promotions extension you will be able to add banners to the pages via widgets. Once you configure a necessary widget, add its layout and widget type settings, the banners will appear on the Frontend automatically.

Select The Widget Type

To add the widget, go to Content → Elements and choose Widgets. Click on the button Add Widget on the upper-right corner.

1. In the Settings section, select the type. There are two types of banner widgets:

Special Promotions Banner Rotator - the banners will be displayed as sliders.
Special Promotions Static Banners - the banners will be displayed as static images and texts.

2. Verify that Design Theme is set to the current theme.

In the Storefront Properties section, do the following:

In the Widget Title field, add a unique title visible for the admin only.
Assign to Store Views to “All Store Views”.
Add a number in the Sort Order field to specify the order of the widget block. The top position is 0 (zero).

Add Layout Updates

By default you can Display On to the category, product, or page where you want the block to appear. To place the block on a specific page, do the following:

Choose the Page where you want the block to appear.
Choose the Container that identifies the place on the page where the block is to be placed.

Widget Options

In the Widget Options section, complete the settings different for each Special Promotions Widget Type. When complete, tap Save.

Now let's take a look at each Special Promotions Widget Type and their settings.

Special Promotions Banner Rotator

If you select this type of banner widget, the following settings will be available:

Choose Rotator - select one of the following rotators:

Simple Rotator - this rotator can't be closed or removed by the user.
Closable Rotator - this rotator can be closed or removed by the user by clicking on the Close icon.

Specify the Banners - shows the already existing banners. If you don't see the banners on the grid, click the link Reset Filter.

Additional Classes For Container - if you need to customize the container, enter additional classes here.

Show Paging Dots - show or hide the paging dots. The paging dots will be helpful if you have multiple banners for pagination.

Show Arrows - show or hide the arrows for pagination. The arrows will be helpful if you have multiple banners.

Autoplay speed - specify the speed your banners will change each other. The speed is defined by milliseconds. If 0 is set, the autoplay will be disabled.

This is how the banner rotator will look on the Frontend:

Special Promotions Static Banners

Static Banners show the added images and texts in a static position. If you have multiple banners, you can show a number of them in several rows. To configure this widget, for the following

Specify the Banners - shows the already existing banners. If you don't see the banners on the grid, click the link Reset Filter.
Add CSS - add CSS attributes to customize the container.

Banners Container Height (height css property) - define the container height. For example, 300px.
Banners Container Background Color (In CSS valid format) - choose a background color for the container. For example, #8bc53f
Banners Container Margins (In CSS valid format) - enter container margins. For example, 0 0 1rem 0
Banners Container Paddings (In CSS valid format) - add container paddings. For example, 0 0 0 10px
Additional Classes For Container - the developer can enter additonal CSS classes for container.

This is how the static banner will look on the Frontend:

	Get more information about the Special Promotions extension Find other Magento products at the CreativeMinds Magento Store
	Let us know how we can Improve this Product Documentation Page To open a Support Ticket visit our support center