About Banner Slider For Magento 2.

This fully customizable carousel enables you to create and automate visibility for responsive sliders / banners and place them anywhere on your Magento store.

Responsive Banner Slider for Magento 2 is built on top of owl.carousel.js javascript library. It allows you to add banners with images, videos or custom content in your Magento 2 store and automate banners visibility. Sliders are known to increase page engagement and also reduce the bounce rate. Once you add sliders to your pages you can highlight promotions, direct customer attention to special offers, products or pages from your Magento 2 store and attract customers attention from the very first moment.

By using this extension you will be able to:

  • Attract customers right from the very first moments they are on site.
  • Highlight your promotion, campaign or any events by using banner slider
  • Direct customer attention to special offers
  • Easily insert sliders using magento widgets, no coding needed
  • Automate promotions by scheduling banners visibility

Create Banner Sliders with the following content:

  • Images (Separate Mobile and Desktop Image now available in Pro version)
  • Videos
  • Links
  • Buttons
  • Description
  • Custom Content


Banner Slider Features.

  • Responsive design with slider breakpoint control.
  • Banners can be displayed on any CMS, product and category page
  • Banner scheduling - each banner may be scheduled to be activated and deactivated at specific time
  • Feature amazing images and videos - create a unique experience for your customers and grow engagement
  • Full control over Slider behaviour with functionalities as autoplay, lazyload, loop,transition effect, autoplay hover pause.
  • Gesture support – mobile friendly;
  • Add custom CSS and HTML content for each banner
  • Easy to use - insert slider using magento widgets, no coding needed, unlimited banners

About Owl Product Carousel for Magento 2.

OWL Product Carousel is built on top of owl.carousel.js javascript library. It allows you to add product carousels to any section of your store.

Creating and managing products carousels has never been easier. Using carousels is a good way to showcase the latest or hot products. You can create any number of responsive carousels and place them on your homepage, product page or anywhere on your store. OWL Product Carousel allow store owners to control frontend visibility of product price, compare option, add to cart button, enable carousel auto sliding and much more. You can also add catchy labels to each carousel type so that it could stand out among others.

Create OWL Product Carousels with the following products types:

  • New Products
  • Best Sell Products
  • Sale Products
  • Recently Viewed Products
  • Related Products
  • Upsell Products
  • Cross-sell Products
  • Custom Category Products (show products from specific category, now available in Pro version )

OWL Product Carousel Features.

  • 100% Responsive and mobile friendly with support all modern browsers.
  • Advanced settings for enhanced flexibility.
  • Unique settings for each carousel slider.
  • Unlimited products display.
  • Control number of items to display on desktop, tablet and mobile devices.
  • Navigation arrows visibility control on desktop, tablet and mobile devices.
  • Navigation dots visibility control on desktop, tablet and mobile devices.
  • Product Title, Price and Cart button display/hide options.
  • Autoplay with speed control.
  • Mouse over stop.
  • Loop control.
  • Lazy load control.
  • Touch and Swipe enabled so works great on devices like iPhone, iPad, Blackberry, Android etc.
  • Very lightweight.
  • Hover Image - show a second product image on mouse hover (now available in Pro version )


  • Step 1:
    Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.3.1. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
  • Step 3:
    Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
  • Step 4:
    In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
  • Step 5:
    Wooohooo! The extension is now installed on your Magento store! Congrats!


If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

How to Install via SSH.

  • Step 1:
    Before installing Responsive Banner SLIDER and OWL CAROUSEL Extension on a Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.3.1. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
  • Step 3:
    Access the root of your magento 2 project from command line and run the following commands:
    php bin/magento module:enable WeltPixel_Backend --clear-static-content
    php bin/magento module:enable WeltPixel_OwlCarouselSlider --clear-static-content
    php bin/magento setup:upgrade
  • Step 4:
    Flush any cache that you might still have enabled on your server or in Magento.
  • Step 5:
    Woohoo, the extension is installed!

How to Upgrade from FREE to PRO version:

  • Below instructions only apply if using FREE version of this extension.
  • Replace the extension code under 'app/code/WeltPixel/' with the Pro version and run installation Step 3 & 4 again.
  • You will not loose existing banners, sliders and carousels, the upgrade will only activate PRO features of OWL Carousel and Slider.

How to Upgrade the extension.

  • Step 1. Remove extension code under app/code/WeltPixel/OWLCarouselSlider before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
  • Step 2. Follow normal installation instructions above.

Magento Marketplace Installation.

How to create a Banner Slider.

Step 1: Define breakpoints

  • Go to Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders, and set up to four breakpoints for different screen resolutions.
  • In next steps you will be able to set slider item numbers for each breakpoint . For example, you can set to display 2 items on mobile screens, 3 items on tablets and 4 items on desktop.
  • a. Go to WeltPixel > Banners for Sliders settings, click on Add New Banner button to create a new banner.
  • b.1 configure the banner using the Banner Settings:

    • Title - set a title for the banner
    • Show Title [Yes / No] - show the banner title in frontend, it will show on the banner
    • Description - set a description for current banner
    • Status [Enabled / Disabled] - enable or disable current banner
    • Slider - assign current banner to a specific Slider. Slider Note: If no slider is created yet, you can ignore this option and assign the banner later from Slider Manager
    • URL - set the URL where the banner/button should link when clicked on.

      URL Note: set the URL without your store baseurl, ex: /women.html;

      URL Note 2: If ‘Text Button’ option is filled, URL will be linked to the button instead of banner

  • ..Banner Settings:

    • Target [Same Window / New Window Tab] - choose where the banner/button link should open
    • Button Text - fill any text here and it will be displayed on a button on your banner

      Button Text Note: you must set a URL link in order for the button to be displayed on the banner

    • Banner Type [Image / Video / Custom] - banners can be Images (upload mobile and desktop images), Videos (insert embed iframe) or Custom (insert custom HTML).

      Example of banner type: Video

      <iframe id="ytplayer" type="text/html" width="1400"height="900" 
      frameborder="0" allow="autoplay; encripted-media" 
      allowfullscreen> </iframe>
    • Create custom banner here - available and applicable only for Banner type ‘Custom’; Here you can create a custom banner different than Image or Video.
    • Alt Text- set alternative text if the Banner if an Image; it will show on image hover as tooltip.
    • Banner class - here you can view the name of the Wrapper class of the current banner. It can be used in Custom Content field to style each banner from the slider. The name of the class is displayed only after you save the banner.
  • ..Banner Settings:

    • Custom HTML Content - insert your custom HTML Content, applicable for current banner, all banner types.

      Example of custom HTML content:

                      <p class="myclass"> Custom HTML content</p>
    • Custom CSS - insert your custom CSS, applicable for current banner, all banner types.

      Note: Use above ‘Banner Class’ option to apply the CSS only for this banner.

      Note 2: ‘Banner Class’ option is generated only after the first banner save, if not present, please save the banner and continue to edit.

      Example of custom CSS:

                      .banner-6 .myclass{ font-size: 38px; }
    • Banner Valid From - start date for banner to be displayed in Slider.
    • Banner Valid To - end date for banner to be displayed in Slider.
  • C. Save the banner and repeat steps 1.a and 1.b until you have created all necessary banners for your slider.

Step 3: Create and configure your slider

a. Go to WeltPixel > Sliders Manager settings, click on Add New Slider button to create a new slider.

b. configure the Slider using the Slider Settings:

Slider General Configuration

  • Title - set the slider Title
  • Show Title [Yes / No] - if enabled, the slider title configured above will show in frontend
  • Slider Status [Enabled / Disabled] - enable or disable the current slider
  • Next/Prev buttons [True / False] - show slider navigation buttons

    Note: This setting is overwritten by responsive settings

  • Dots [True / False] - show navigation dots in bottom area of the slider
  • Banner Transition Effect [Slide / Fade] - slider transition effect
  • Center Item [True / False] - shows banners on center of the slider and shows neighbour banners

    Note: Center option only available for Banner Transition Effect: Slide

  • StagePadding - shows banners on center of the slider and neighbour banners with specified padding on the sides.

    Note: Only available if Transition: Slide and Center:False

  • Margin - right margin of banners present in slider (in px), by setting this parameter you define the space between banners present in slider.
  • Items - number of items/banners visible at the same time on the slider

    Note: This setting is overwritten by responsive settings

  • Loop [True / False] - control slider banner loop
  • LazyLoad [True / False] - Lazy Load delays loading of images. Images outside of viewport are not loaded until user scrolls to the items.
  • Autoplay [True / False] - activate autoplay for slider items
  • Autoplay Timeout - set time between changing banners (in miliseconds, for ex: 4000, for 4 seconds)
  • Autoplay Hover Pause [True / False] - set the autoplay to pause on mouse hover
  • Auto Height [True / False] - set auto height of the banners in the slider.
Slider Responsive Breakpoints

NOTE: Below responsive settings will overwrite Slider General Configuration

NOTE 2: Breakpoints are already configured in Admin > WeltPixel > OWL Product Carousels > General Configuration for OWL Product Carousels and Banner Sliders.

If necessary you can change default settings with the ones you require in your project.

  • Next/Prev Buttons [True / False] - show slider navigation buttons for each breakpoint configured.
  • Items - number of items/banners visible on the slider for each breakpoint

Step 4. Assign Banners to your Slider

  • Go to ‘Slider Banners’ tab under ‘Slider Information’
  • Click on Reset Filter to display all your banners.
  • Choose the banners you want to display in your slider.
  • Fill in the banners order in the slider, starting with position 0. If not filled, banners will have by default sort order ‘0’.
  • Hit ‘Save Slider’.

Step 5 : How to add slider in magento homepage?

You can insert multiple sliders in your pages. Follow next steps to insert in your pages sliders with images/videos or other custom content, using widgets:

  • Go to Admin > Content > Pages and edit the page where you wish to insert the slider
  • In Content tab Show Editor click Insert Widget button
  • Select WeltPixel - Custom Slider Widget
  • In Widget Options choose the Slider you wish to insert in the page
  • Click button Insert Widget
  • Save the page and check results
Advanced Settings:

Advanced users can insert sliders pages that do not have an admin editor by inserting a custom code in the corresponding phtml file.

Inserting Slider code in phtml file

  • 1. Use the following code to insert the slider in your desired phtml file:
    <?php echo $this->getLayout()->createBlock
    ("\WeltPixel\OwlCarouselSlider\Block\Slider\Custom")->setSliderId('3')->toHtml(); ?>
  • 2. Replace the sample value ‘3’ with the desired existing slider id from Weltpixel > Sliders Manager admin grid.

Change Log.

What’s new in v.1.9.0 - July 18, 2019

  • Fixed a bug related to a missing img tag when the Lazy Load option was used with a Related Products carousel. The bug affected the Free version only.
  • Fixed an issue which caused the Related Products carousel title to display even if the carousel was disabled.
  • Fixed a bug which caused Carousel display issues when inserted as a widget into certain page sections.
  • Confirmed compatibility with Magento 2.3.2.
  • Added HTTPS endpoint for licensing process.

What’s new in v.1.8.5 - June 7, 2019

  • Fixed an issue which caused the Loop functionality not to work when Lazy Loading was applied to product carousels.
  • Fixed a bug that caused product images to disappear on mobile when they had Listing Hover Images applied.
  • Fixed a duplicate id error that occured when using a Best Sell Carousel.
  • Adjusted Next/Prev button arrow positioning on all resolutions.
  • -Corrected a spelling error in the Recently Viewed Products carousel template.
  • Small CSS adjustments.
  • Small performance improvements.

What’s new in v.1.8.4 - April 25, 2019

  • Added PHP version in the WeltPixel Developer Section.

What’s new in v.1.8.3 - April 3rd, 2019

  • Added a new functionality. A thumb image can now be added to each banner and can be used to switch between them. The functionality is similar to Dots, but now images can be added instead. Available only in the PRO version of the module.
  • Fixed an issue related to product page caching when extension was enabled.
  • CSS adjustments.
  • Confirmed compatibility for Magento 2.3.1.

What’s new in v.1.8.2 - January 24, 2019

  • Added the option to upload a new loader image for banners and carousels directly from the Magento Admin.
  • Fixed placeholder for video on owl banner/slider.
  • Fixed a bug in which adding a product to the cart directly from the carousel redirected to a blank page.
  • Custom CSS code added to the banners is now applied all the time, not only when Custom HTML content also added from the admin.
  • Code optimization, removed duplicated code.
  • Helpcenter adjustment, removed Zendesk iframe and added a simple link to our Support Center in order to avoid any potential conflicts with other admin js added by 3rd party extensions.
  • Fix for multiple rewritten ImageFactory classes, rewrite check validity, rewrite checks optimizations.

What’s new in v.1.8.0 - December 8, 2018

  • Added Slide By functionality (PRO Version only) - Single or multiple item slide on Carousel scroll.
  • Fixed a bug where the 'Select All' action in Magento Admin was not applying to Banner Slider grid in Admin.
  • Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
  • PHP 7.2 compatibility added.
  • As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.

What’s new in v.1.7.5 - October 24, 2018

  • Optimization - use the mobile image as fallback if no desktop image is used.
  • Fixed bug - now you can disable slider from slider grid in admin panel.
  • Added cache lifetime parameter to widget in order to avoid out of stock products showing up in carousel - re-add widget to page to receive this fix - it is not enough to update the extension.
  • Added detailed error messages for invalid licenses for an easier identification of the cause.
  • License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.

What’s new in v.1.7.4 - September 25, 2018

  • Fixed carousel and sliders arrows (design) for IE11 and Edge browsers.
  • Admin menu styling to fit screen size 1366px.
  • Fix for production mode with merged JS - missing color pallet display now fixed.

What’s new in v.1.7.3 - August 23, 2018

  • New feature: Banners are now reusable in multiple Sliders (Pro feature).
  • New feature: OWL Best sell carousel - added option to select period for best sell statistics day, week, month, year, all time. (Pro feature).
  • Fixed banner preview in Magento admin, keep original ratio (both Free and Pro).
  • License improvements, adding *.magento.cloud as a valid test domain.

What’s new in v.1.7.2 - August 2, 2018

  • Fixed currency cache issue.
  • Mobile optimizations.
  • Best seller carousel max items limit now working.
  • Fixed admin random logout issue.
  • Licensing improvements, allowing 3 letter domain as valid domain.

What’s new in v.1.7.1 - July 12, 2018

  • Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
  • Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
  • Added licensing compatibility with Magento B2B.

What’s new in v.1.7.0 - July 5, 2018

  • Recently viewed widget optimization, widget loaded even if not added to homepage.
  • Optimized image loading for banners, mobile image not showed anymore in desktop view.
  • Added option to enable/disable WeltPixel admin notifications.
  • Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.
  • Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.

What’s new in v.1.6.4 - May 16, 2018

  • Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
  • Recently viewed products now showing in carousels when full page cache is enabled.
  • Recently viewed products now showing in carousels even for guest users.

What’s new in version 1.6.3 - April 10, 2018

  • OWL Carousel and Slider Pro: Configurable products are now included in OWL Best Sell Carousel.

What’s new in version 1.6.2 - March 23, 2018

  • OWL Carousel and Slider Pro: Banner link click configured in admin now available also on banner title and description.
  • Design and shadow bug fix for cross sell products to match the rest of the carousels..
  • Center Add to cart, wishlist, compare buttons on carousels
  • Redesign for slider and carousel left/right arrows.

What’s new in version 1.6.0 - March 1st, 2018

  • Change image resolution in carousels from 240x300px to 480x600px to avoid image quality loss.

What’s new in version 1.5.8 - January 12, 2018

  • Added version control for installed WeltPixel modules, including latest version check.
  • Fixed visibility of last carousel item if Stage Padding is grater than 0.
  • Fixed Stage Padding save issues.
  • Fixed errors for null config values.
  • OWL carousels, fix for image size generation.
  • Fixed configurable products swatch change and hover image switch.
  • Removed duplicated general carousel config options, now available only on breakpoint level in order to avoid confusion and improve usability.

What’s new in version 1.5.7 - December 14, 2017

  • Added Support Center functionality in Magento Admin.
  • Added Debugger functionality, checks for rewrites and points potential issues.
  • Fix year format of date picker field.
  • Remove 4px banner margin.
  • Fix for banners, now centered on resolutions smaller than 768px.
  • Unused classes cleanup.

What’s new in version 1.5.5 - October 20, 2017

  • Added a smooth first load of OWL PRO Slider, removed the Next/Prev slider effect.
  • Fix for hover image, Prev / Next glitch.
  • Fix for lazy load option enabled.
  • Lazy load OWL functionality fixed for custom and product sliders.
  • Lazy Load implementation for related, upsell, crossel items.
  • Lazy loading OWL bug when lazy load on and items fewer than used items.
  • Lazy load image attribute added only if carousel enabled.

What’s new in version 1.5.3 - September 20, 2017

  • Added Hover Image functionality on listing pages with possibility to select the second image from product image settings. (available in PRO version).
  • Added mobile image & desktop image functionality for banners with frontend cache separation (available in PRO version).
  • Added Custom Category Carousels, show products from specific category (available in PRO version).
  • Added Google Analytics banner tracking per store-view instead of global.
  • Design adjustments for dots.
  • Cache for product blocks added.
  • Next/Prev button admin saving fix.
  • Auto height admin saving fix.
  • Fixed product page carousels box shadow.
  • Compatibility adjustments for Magento Enterprise 2.1.8.
  • Function param doc fixes.

What’s new in version 1.3.4 - May 16, 2017

  • Added translations files under /i18n/en_US.csv.
  • Fixed native bug of OWL carousel, prev / next buttons visibility control on breakpoints.
  • Removed Banner store view selector, not relevant as banner is not configurable per store view.
  • Fixed Banner Slider hardcoded date format, date now working in all international formats.

What’s new in version 1.3.3 - April 05, 2017

  • Fixed OWL carousel loading issues, some times when images were too big slider was not loading properly.

What’s new in version 1.3.2 - March 20, 2017

  • Added possibility to track Banner Click-Through-Rate (CTR) and revenue generated by the banner.
  • Fixed transparency issue - slides now visible on Safari browser, OWL Banner Slider
  • Fixed mobile navigation icons
  • Fixed prev / next navigation out of screen
  • Fixed carousel product picture padding when used in CMS pages

What’s new in version 1.3.1 - 02/21/2017

  • New option - control Dots visibility of product carousels per each configured breakpoint
  • Fixed - recently viewed products collecion fix for product carousel
  • Fixed - not rendering head title html if no title set in backend

What’s new in version 1.2.2 - 01/23/2017

  • Refactoring admin option names, admin hints for a better user experience
  • New documentation, html format, detailed with different structure
  • Small css adjustments and fixes

What’s new in version 1.1.0 - 11/22/2016

  • Renamed from “sell” to “Sale” products
  • Fix for proper product base url fetching
  • Image link bug fix
  • Option added for display to wishlist and compare
  • Time changed for setTimeout
  • Bug fixed to arrows position and ajaxComplete for loading
  • Title tag changed in h3
  • Loader fix
  • Dots and arrows fix

What’s new in version 1.0.4 - 10/12/2016

  • Options to display wishlist and compare on product page slide
  • Fixed loader for banner slider and product page carousel, in some cases loader kept loading
  • Frontend layout fixes
  • Fixed product case url fetching
  • Default config changes, enable product sliders by default
  • Typo changes

What’s new in version 1.0.3 - 08/24/2016

  • Adjusted default settings for banner sliders
  • Added validation for fields that caused confusion when setting up sliders
  • Bug fixed: image lost when saving the banner
  • Added info comments on admin options
  • New design feature: apply a different design for each banner using custom CSS / banner
  • Reorganised admin options for a more intuitive usability

What’s new in version 1.0.2 - 06/05/2016

  • Fix for slider, in some circumstances the images were not loaded
  • Fix for loader which sometimes loaded infinitely
  • Fix for slider, when slider was clicked the homepage refreshed, even if no link was set.