Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
mageplaza.com

How to Add Banner in Magento 2 in Three Ways

Vinh Jacker | 04-01-2024

The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

One of the key reasons why Magento 2 stands out as a top choice for entrepreneurs worldwide is its unmatched customization options. From the appearance of your online store to various features and extensions, Magento 2 empowers you to tailor every aspect to your liking, ultimately enhancing your understanding of sales-driving factors.

Today, we’ll explore one of the most popular customization methods for Magento 2 themes: adding banners. Banner sliders offer an effective way to showcase promotions, new products, essential information like schedules and contact details, and other announcements to grab your customers’ attention promptly.

While adding a banner in Magento 2 isn’t overly complicated, it does require attention to detail, especially in the beginning stages. Let’s briefly outline the steps you’ll need to follow.

Add Banner in Magento Using Blocks and Widgets

To add banners in Magento using the simplest method, follow these steps:

  1. Navigate to Content > Blocks and click on the Add New Block button.

  2. Enable the block, provide a Block Title and Identifier, and choose the Store View where you want to display it.

Add new block

  1. Use the Image Insert tool in your Edit with Page Builder to add the banner, then remember to save the CMS block.

Edit with Page Builder

Now that you’ve created your banner using the CMS block, you’ll need to display it through a widget. Follow these additional steps:

  1. Head to Content > Widgets and click on Add Widget button.

  2. Fill in all the necessary widget settings

Widgets Settings

Select CMS Static Block as the Type, specify the Design Theme, and click Continue.

Storefront Properties

Complete the Storefront Properties:

  • Provide a Widget Title for the CMS block.

  • Assign to Store Views where it will be visible.

  • Set the Sort Order (lower numbers indicate higher priority in the list of widgets).

Note: Once the CMS Block Type and Design Theme are chosen, they cannot be modified at this stage.

  1. Set the Layout Updates to specify where your banner should appear.

Layout Properties

  1. In the Widgets Options section, choose the corresponding banner (CMS block) and save the widget.

Finally, you can view the newly added widget on the storefront pages, such as in the Tops category.

Add Banner to Magento CMS Page

Another method to add banners in Magento is by directly adding them to the CMS page. Here’s how:

  1. Navigate to Content > Elements > Pages and choose the page where you want to place your banner.

  2. Use the Image Insert tool to add the banner to the page content, then save the page.

Edit home page

This way, your banner will be displayed on the CMS page without the need for widgets.

Add Banner in Magento Using Third-Party Extension

This approach involves utilizing a specialized Banner Slider extension, which offers greater control over how banners are displayed and provides additional functionalities depending on the extension’s features.

Here are some key features of such an extension:

  • Fully responsive design with breakpoint control.

  • Display banner sliders on any CMS, product, and category pages.

  • Ajax scheduling for banners, allowing activation and deactivation at specific times.

  • Comprehensive control over slider behavior, including autoplay, lazyload, loop, transition effects, and autoplay hover pause.

  • Mobile-friendly gesture controls for enhanced usability.

  • Option to add custom CSS and HTML for each banner.

  • User-friendly interface, allowing insertion of sliders using Magento widgets without the need for coding.

Check out the Magento 2 Banner Slider extension by Mageplaza, a robust marketing tool available for free. With this extension, store owners can effortlessly integrate unlimited eye-catching banner sliders, enhancing visual appeal and user experience. Elevate your promotional campaigns with enhanced CTR, courtesy of the Banner Slider extension.

Banner Slider

FREE Banner Slider for Magento 2

Increase customer awareness and grow click-through rates with eye-catching banner sliders

Check it out!


Final Words

With the aforementioned 3 methods in mind, you can select the most suitable option to implement in your store. Regardless of the approach you take, incorporating banners in Magento is undeniably beneficial for capturing customer attention.

Jacker

With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.



Related Post

Website Support & Maintenance Services

mageplaza services

Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.