Magetop Product Slider Extension Guide

Magetop Product Slider Extension Guide will give you solid understanding of how to use Extension. These Magento 2 tutorials cover back-end and front-end development.

I. Introduction

Magetop Product Slider Extension

Product Slider for Magento is the best plugin allows you to create easily attractive product slider carousel on your site or shop and increase conversions & sales. You can display product slider in pages, posts, custom template, and even widget. It comes with built-in intuitive Shortcode Generator to easily control the look and function of the product slider.

Highlight features:

  • Responsive sliders.
  • Released for Developers only (Merchant version will release soon).
  • Supports: Featured products, New Products, Most views, On-sale, Bestseller, Recent viewed, Wishlist, Category ID.
  • Casual OWL slider options.
  • Insert product slider anywhere on your store.
  • Easy to install and setup.

II. How to Configure

To configure Product Slider, choose STORES -> Settings -> Configurations -> MAGETOP.COM -> Product Slider Setting.

2. Product Slider Settings

1. Configuration

1.1. General Configuration

General Configuration has 2 fields:

3. General Configuration
  • Enable: Select Yes to enable the module.
  • Default displayed additional info: Allows the option of one or more display options on the product slider.

1.2. Slider Design Configuration

4. Slider Design Configuration
  • Responsive:
    • Yes: Select Yes will display the Max Items slider table. You can customize Number of items when the browser window resizes with Screen size max.
    • No: If you select No, the number of products shown on the default slider is 3.
5. Responsive Default 3 Items
  • Loop Slider: Select Yes to allow products on the slider can slide infinite loop.
6. Loop Slider
  • Margin Between Items: allows you to set the distance between products on the slider. We recommend it as 10.
  • Next/Prev buttons: Select Yes to display the Next and Prev buttons. And vice versa.
  • Show Dots Navigation: Select Yes to display the dots corresponding to the page number on the slider.
7. Show Dots Navigation
  • Lazy Load Images: Select Yes to display lazy load while loading images on the slider.
  • Autoplay: Select Yes to enable the slider to move the product. Displays 2 fields: Autoplay TimeOut, Autoplay HoverPause.
  • Autoplay TimeOut: Set the time for the slider to move the product. 1000 ms = 1s, instead of pressing the next button, after a set time the slider will automatically move the product.
  • Autoplay HoverPause: Select Yes to stop the slider when the mouse pointer moves to the area of the slider.

2. Manage Slider

2.1 Grid

8. Manage Product Slider Table
  • This section display all Product Sliders created.
  • Admin can tick Product Slider and choose Action with Delete, Change Status.
    • Delete: Remove the Product Slider from the table and it will be disabled from the frontend.
    • Change Status: Status will change. Enable Product Slider in frontend or Disable Product Slider in frontend.
9. Manage Action In Product Slider
  • If you own a lot of Product Slider, you can use Filters to filter products by ID, Status, Name, Slider Type, Slider Location. Then select Apply Filters to apply it.
10. Product Slider Filters

2.2. Add New / Edit Form

  • To Add New a Product Slider, select the orange Add New Slider button in the upper right corner of the screen.
11. Choose Add New Slider
  • To Edit a Product Slider you select the Edit in the Action column on the table.
12. Choose Edit Slider

2.2.1. General Information

13. General Information
  • Name: Name of the Product Slider. It will be displayed in the table.
  • Status: Select Enable to turn on Product Slider.
  • Position: Choose where the sliders appear on the frontend. We offer the following available placements:
14. Position of Product Slider will display in frontend
  • Type: Select the Product Type you want to display on the slider.
15. Type of Product will display in slider
  • Custom Specific Products: When you choose Custom Specific Products, a Select Products tab will appear. Here you can choose the products to show up on your slider.
16. Select Products tab
  • Store View: Select the Store View where the sliders are displayed. With the store view unselected, the slider never appears.
  • Customer Groups: The slider is visible only for selected customer groups.
  • Cache Lifetime: To refresh immediately, clear the cache of Blocks HTML Output. If you leave this field blank, the default is 86400 seconds.
  • From Date: Allows you to set the date when you started using the slider. The sliders will not appear on the frontend if the displayed date has not yet arrived.
  • To Date: Allows to set the end date for which the slider is used. After this date, the slider will be hidden from the frontend.

2.2.2. Design Tab

17. Design Product Slider
  • Title: The content that fills in this field will be the name of the slider displayed on the frontend.
  • Description: Description of the slider and also displayed on the frontend.
  • Limit number of products: is the maximum number of products on the slider.
  • Display additional information: Allows the option of one or more display options on the product slider.
  • Is Responsive:
    • Yes: Select Yes will display the Max Items slider table. You can customize Number of items when the browser window resizes with Screen size max.
    • No: If you select No, the number of products shown on the default slider is 3.
    • Use Config: Use Responsive in the Configuration.

3. Widget

To create the Product Slider Widget, you need to do the following steps:

  • Go to CONTENT -> Elements -> Widgets.
Go to CONTENT -> Elements -> Widgets
  • Select Add Widget.
  • Select Type is Magetop Product Slider, Design Theme is Magento Luma. After, choose Continue.
19. Settings of Widget
  • Fill in the information in Storefront Properties.
20. Widget Storefront Properties
  • Choose a display location for the Widget.
21. Choose a display location for the Widget
  • Fill in the information in Widget Options tab.
Widget Options
  • Then choose Save, Clear cache and check it in the frontend.

III. Conclude

Above is our guide for Magetop Product Slider Extension. If you have any questions please boldly contact us. We will help you. Thanks for reading.

It comes to the end of the blog: Magetop Product Slider Extension Guide.

You can read more useful articles like Magetop Quick Order Extension Guide.

Follow us for the more helpful article!

We hope this is a useful series for you.

Thank you for reading!

5 1 vote
Article Rating

Aaron LX

Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.

Leave a Reply or put your Question here

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x