Promo Banner

Similar to Promo Bar, the next extension of Mageplaza - Promo Banner helps admin advertise store promotions or major upcoming events. Moreover, it allows customers to catch news and events of the store more quickly and conveniently. The extension let the admin display one or more banner at different locations and multiple pages, they can also set the display time for each banner. More specifically, Promo Banner also displays in various forms such as image, slider, floating, popup, text.

In addition, Promo Banner is fully compatible with One Step Checkout, Free Shipping Bar, Banner Slider, Promo Bar.

How to Configure

I. Configuration

Login to the Magento Admin, go to Marketing > Promo Banners > Configuration.

https://i.imgur.com/KDMa95t.png

Admin can also access Stores > Configuration > Mageplaza > Promo Banner to configure module.

https://i.imgur.com/LdcYjmN.png

1.General

https://i.imgur.com/VVZMNg7.png

  • Select Enable = Yes to enable the module
  • Promotion Category:
    • Category Name: Admin enters a name for the promotion category. This is a required field.
  • Action:
    • Delete: Click on the trash icon when you want to delete promotion category.
    • Add: Click Add button when you want to create a promotion category.
    • Allow Customer to Close Promo Banner: Select Yes to allow customers to turn off promo banner.
    • Auto Close Promo Banner After: Admin sets the auto-closing time for promo banner.
    • Auto-reopen schedule: Admin set time to reopen the promo banner after being closed.
      • Note: Auto-reopen will be run again if customers click Close button.

2. Slider Banner Settings

https://i.imgur.com/Sm1zSQ9.png

  • Show Next/ Prev Buttons: select Yes to display the Next/ Prev button. You can click these two buttons to see more banner or return to the previous banner.
  • Switching Time: Enter the displaying time for each slider.

4. Floating Banner Settings

https://i.imgur.com/7xCq2Ms.png

  • Floating Block Width: Enter the width for floating block.
  • Floating Block Height: Enter the length for floating block.

II. Manage Promo Banner

https://i.imgur.com/xcyGRmL.png

  • Here saved all the Promo Banner created.
  • At form grid, admin can view all basic information of Promo Banner such as ID, Content, Name, Status, Promotion Category, Position, Start Time, End Time, Priority, Action.
  • Admin can perform some of the following actions:
    • Edit: Select Edit in the Action column to edit the information on the Edit Promo Banner page.
    • Delete: Select promo banner to delete Action > Delete.
    • Change Status: Change the status of promo banner.
    • Add New Promo Banner: Create new Promo Banner.

1. General

https://i.imgur.com/jTBJe6E.png

  • Name: Admin names the promo banner
  • Select Status = Enable to allow promo banner to be applied
  • Store Views: Admin choose a store to display promo banner
  • Customer Groups: Select groups of customers who can view banner.
  • Promotion Category: Select the applicable promotional category.
  • Start Date: Select the start date for the promo banner being shown.
  • End Date: Select the end date for the promo banner being closed.
  • Priority: Enter the priority for promo banner. The lower the input value, the higher the priority.

2. Conditions

Admin chooses the conditions for promo banner displayed in the checkout page.

https://i.imgur.com/INPmsi1.png

3. Design

3.1. Single-Image Banner

https://i.imgur.com/Jrca8gh.png

  • Choose Promo Banner Type = Single-Image Banner: The display promo banner in images form.
  • Select Image: Click Choose File to download images for promo banner.
  • Direct URL: Insert a link to redirect customers to when they click on promo banner image at frontend.
3.2. Slider Banner

https://i.imgur.com/r4SLsOd.png

  • Select Promo Banner Type = Slider Banner: The display promo banner in slider type ( multiple images).
  • Select Image(s):
    • Add New Image: Click this button, the system will automatically display the new image creation section for slider.
    • Image: Click Choose File to upload the image for the slider.
    • Direct URL: Insert a link for visitors to be redirected to when clicking on the promo banner image at frontend.
    • Sort Order: Enter the priority for the image of the slider. The smaller the input value, the higher the priority.
    • Action: Click on the trash can icon to delete the image of the slider.
3.4. Floating Banner

https://i.imgur.com/MdECF8A.png

  • Select Promo Banner Type = Floating Banner: The display type of promo banner is floating.
  • Select Floating Banner: Click Choose File to upload image for Floating banner.
  • Direct URL: Insert a link for visitors to be redirected to when clicking on the promo banner image at frontend.
3.5. HTML Text

https://i.imgur.com/OnylqZu.png

  • Choose Promo Banner Type = HTML Text: The display style of promo banner is HTML Text.
  • Text Content:
  • Show/ Hide Editor: Enter the content displayed for promo banner.
  • Insert Image: Download photos for promo banner.
3.6. CMS Block

https://i.imgur.com/aCFOXHu.png

  • Select Promo Banner Type = CMS Block: Promo banner is shown in CMS block
  • Select CMS Block: Select CMS to make promo banner.

4. Display

4.1. Apply to Design is Single-Image Banner, Slider Banner, CMS Block, HTML Text

https://i.imgur.com/EX8TWMf.png

  • Display Position: Select the place to show promo banner

https://i.imgur.com/2IOngds.png

  • Top of the content: Promo banner is displayed above the content
  • Top of the page: Promo banner is displayed at the top of the page
  • Main Sidebar: Promo banner is shown in the main sidebar
  • Additional Sidebar: Promo banner display in the additional sidebar
  • Under Add To Cart button (Product Details Page): Display promo banner under the Add to Cart button on the Product Details Page when choose Select page (s) = Specific Pages
  • Under Total Order (Cart View Page): Display promo banner under the total order in the view cart page.
  • Customize position using Widget: The promo banner displayed at the position is customized in the widget.
  • Customize position using Snippet Code: Promo banner can be displayed at any store position by insert commands into CMS page/ Static Block, template.phtml file and Layout file.

https://i.imgur.com/yFk4RCC.png

  • Select Page(s):
    • All Pages: Promo Banner displayed on all pages.
    • Specific Pages
      • Display on Page(s): Select the page that you want to display promo banner.
      • Display on Category Page: Select the position at category page to display promo banner.
      • Display on Product Page: Select Yes to allow promo banner to be shown on the product page.

https://i.imgur.com/glsF10O.png

4.2. Apply to Design as Floating Banner

https://i.imgur.com/5cXY2NI.png

  • Display Position: Select the display position for floating promo banner. There are 2 options: Left Floating and Right Floating.
  • Select Page(s): Select the page to display promo banner. (Same as Point 4.2)
4.3. Apply with Design as Popup Banner

https://i.imgur.com/coI5Y1J.png

  • Display Position: Promo Banner displays in popup.
  • Select Page (s): Select the page to display promo banner. (Same as Point 4.2)

5. Trigger

https://i.imgur.com/Qpy7Fy6.png

  • Auto-close after: Admin selects the time to automatically close the Promo Banner. If you select Use Config, promo banner will be shown following the time in the Configuration section.

https://i.imgur.com/Flimw3a.png

  • Auto-reopen schedule: Admin choose the time to display the Promo Banner again. If you select Use Config, promo banner will be re-shown following the time in the Configuration section.

https://i.imgur.com/8MWE1vw.png)

III. Frontend

1. Design

1.1. Single-Image Banner

https://i.imgur.com/MTMkjNW.png

1.2. Slider Banner

https://i.imgur.com/PPnIWGr.gif

1.3. Popup Banner

https://i.imgur.com/CNa8xAQ.gif

1.4. Floating Banner

https://i.imgur.com/XpJIWQ2.png

1.5. HTML Text

https://i.imgur.com/0p4O4w5.png

1.6. CMS Block

https://i.imgur.com/Vj6NBge.png

2. Display

2.1. Top of the content

https://i.imgur.com/Or0w3Pk.png

2.2. Top of the page

https://i.imgur.com/0ojfGrj.png

2.3. Main Sidebar

https://i.imgur.com/g85gLy4.png

2.4. Additional Sidebar

https://i.imgur.com/IYrj2jN.png

2.5. Under Add To Cart Button (Product Details Page)

https://i.imgur.com/zHYDCct.png

2.6. Under Total Order (Cart View Page)

https://i.imgur.com/Lw21gZa.png

2.7. Checkout Page

https://i.imgur.com/QsisM4v.png

2.8. Mageplaza One Step Checkout Page

https://i.imgur.com/Htn9WpH.png

3. Snippet Code

3.1. CMS Page / Static Block

For example: Admin wants to display Promo Banner on the About us page, follow these steps:

  • Step 1: Go to the backend, click Content > Pages and select Edit at About us.

https://i.imgur.com/3PUmAc1.png

  • Step 2: Insert the code into the page content About us.

https://i.imgur.com/8xkBXUt.png

  • Step 3: Save and check on the frontend

https://i.imgur.com/G99Rvfk.png

3.2. Template .phtml file

If admin wants to insert a Promo Banner into a certain location in the .phtml Template file, follow these steps:

  • Step 1: Admin go to the server and find the directory with the path of vendor/magento/module-catalog/view/frontend/templates

Below are the folders in the templates file.

https://i.imgur.com/nraTZPZ.png

  • Step 2: Select the folder then choose the file with the format of .phtml

For example: I select the product folder, continue to select listing.phtml file to perform the action

https://i.imgur.com/z504XgX.png

  • Step 3: Open the selected .phtml file and insert the code

https://i.imgur.com/a5tL0L1.png

Save and check at the frontend

https://i.imgur.com/0KWkWYd.png

3.3. Layout file

If admin wants to insert a Promo Banner into a certain location at the Layout file, please follow these steps:

  • Step 1: Admin go to the server and find the directory with the path as vendor vendor/magento/module-catalog/view/frontend/layout

https://i.imgur.com/E6jcZF1.png

  • Step 2: Select any file and insert the code into the file

For example: I selected the file catalog_category_view.xml

https://i.imgur.com/Bbf9v5n.png

Save and check at the frontend.

https://i.imgur.com/A2asIc2.png

4. Widget

Admin can set Promo Banner to display at any location with Widget. To create a widget, you need to do the following:

  • Step 1: Go to Admin page, select Content > Elements > Widgets, continue to select Add Widget
  • Step 2: Select Type = Mageplaza Promo Banner, Design Theme = Magento Luma. Then choose Continue.

https://i.imgur.com/56xkmw0.png

  • Step 3: Enter the required information.

https://i.imgur.com/pc3fDyB.png

  • Step 4: Click Add Layout Update to set the location for the widget.

https://i.imgur.com/jmdfkJh.png

  • Step 5: Select which Promo Banner to display the widget.

https://i.imgur.com/Hc3Ll9Q.png

  • Step 6: Save and check at the frontend.