Magento 2 UB Content Slider


[Magento 2] UB Content Slider is a handy extension that allows you to create and manage unlimited responsive banner slideshows, product carousels (eg. Latest Products, Hot Products etc.), video sliders, (NEW) product image hotspot & lookbook and place them anywhere on your Magento 2 store. The userguide below will walk you through installation and configuration process to set up UB Content Slider module. Let’s get started.

The download package is available via your profile:

DOWNLOAD NOW

  • Step 1. Unzip the download package
  • Step 2. Copy and paste the folder app of the package to your web root
  • Step 3. Open the command window, then go to web root folder and run commands below:
    NOTE: the command php -f bin/magento module:enable -c Ubertheme_Base is required for UB Content Slider v1.1.3 and above.
    • php -f bin/magento module:enable -c Ubertheme_Base
    • php -f bin/magento module:enable Ubertheme_UbContentSlider
    • php -f bin/magento setup:upgrade
    • php -f bin/magento cache:clean

Now your extension has been installed on your web.

3.1 Types of Sliders

UB Content Slider extension enables to create multiple types of content and place them anywhere on your Magento 2 store (on any CMS pages and any CMS static block), including:

  • Banner Slider
  • Video Slider
  • Product Carousel
    • Latest Product Slider
    • New Product Slider
    • Hot Products
    • Random Product Slider
    • Best Sell Slider
  • Product Image Hotspot (available in UB Content Slider v1.1.4)
  • Lookbook (available in UB Content Slider v1.1.4)
NOTE: More info about how to create each type of slider can be found in 4. How-to.

Before you start creating a slider, here you can see some examples of the slider shortcode that we created for demo purpose:

a. Hot Product Slider with single_item = “1”

To display the slideshow above in a selected place (on any CMS pages or in any CMS static block), you can use the following shortcode:

{{block class="Ubertheme\UbContentSlider\Block\Slider" qty="5" name="ub.content.slider2.col.left" title="Hot Products" single_item="1" show_paging="1" show_navigation="1" show_thumbnail="0" show_name="0" show_price="0" show_wishlist="0" show_compare="0" show_review="0" show_desc ="0" show_add_cart="0" show_readmore="0" content_type="hot_products" auto_height="0" slide_transition="fadeUp"}}

b. Uploaded Banner Slideshow

The shortcode to show the Banner Slider above on CMS pages or in any CMS static block:

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.images" title="Image Slider" content_type="slider" slider_key="sl-image" single_item="1" auto_height="1" show_thumbnail="1" thumb_width="160" thumb_height="88" slide_transition="backSlide" addition_class="ub-style-1" show_navigation="1" show_paging="1"}}

c. Bestseller Product Slider

The shortcode to display Bestseller Product Slider on a CMS Page or in a CMS static block:

{{widget type="Ubertheme\UbContentSlider\Block\Widget\ProductWidget" content_type="bestseller_products" show_title="1" title="Best Sellers" category_ids="5" sort_by="created_at" sort_dir="ASC" qty="10" show_name="1" show_price="1" show_desc="0" show_readmore="0" show_review="1" show_wishlist="1" show_compare="1" show_add_cart="1" single_item="0" number_items="5" number_items_desktop="5" number_items_desktop_small="4" number_items_tablet="3" number_items_tablet_small="2" number_items_mobile="1" show_navigation="1" show_paging="1" paging_numbers="1" auto_run="1" auto_height="1" slide_speed="200" stop_on_hover="1" enable_lazyload="1"}}

d. Random Product Slider

The shortcode to display Random Product Slider on a CMS Page or in a CMS static block:

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider1" title="Random Product Slider" content_type="random_products" number_items="4"}}

e. Video Slider

The shortcode to display Video Slider on a CMS Page or in a CMS static block:

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.video" title="Video Slider" content_type="slider" slider_key="sl-video" number_items="2" item_width="480" item_height="270"}}

f. Product Image Hotspot and Lookbook
These are the two new features introduced in UB Content Slider ver 1.1.4. You can check out the demo of both Product Image Hotspot and Lookbook here.

3.2. How to display a slider on a page

UB Content Slider extension supports several ways to insert a content slider in your page as follows:

3.2.1. Using the shortcode / widgets to insert a slider to a CMS page or CMS static block

Option 1: To display a slideshow in a selected place, use the following shortcode:

{{block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slider.video" title="Video Slider" content_type="slider" slider_key="YOUR_SLIDER_KEY_HERE" number_items="2" item_width="480" item_height="270"}}

To insert the shortcode above, go to your Magento 2 admin | Content | click (Elements) Pages or (Elements) Blocks depending on where you want to insert the shortcode | click Select | Edit the page or block you need | Tap Show / Hide Editor to work in WYSIWYG mode. From here, you simply enter the shortcode.

Option 2: Alternatively, you can insert multiple sliders in your pages using widgets:

  • Step 1. Navigate to your M2 admin | Content | Widgets | Add Widget. Then select UB Content Slider type at your choice.
    Slider Widget type
  • Step 2. In the Storefront Properties tab, fill in the widget configuration.
  • Step 3. In the Widget Options, define your own settings.
    NOTE: Make sure that you create a slider in advance, so that you can assign that slider in the Widget Options of this widget.

3.2.2. Adding with XML code
You can call Content Slider with custom XML code following one of the two options below:
(Requires an understanding of XML)

Option 1: Adding via Update Layout XML box
A slider can be defined and positioned by making a layout update in XML code. Here are steps to add insert a slideshow in a specific category page.

  • Navigate to your Magento 2 Admin | Catalog | Categories | Open a category you want, for example Women | under the tab Design, enter the following shortcode into the Layout Update XML box (For example, if you’re working on a fresh Magento 2 instance with sample data, you can append right below the line: <referenceContainer name=”catalog.leftnav” remove=”true”/>)
    <referenceContainer name="content">
    <block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slideshow" as="ub-content-slideshow" >
    <arguments>
    <argument name="content_type" xsi:type="string">slider</argument>
    <argument name="slider_key" xsi:type="string">main-slideshow</argument>
    <argument name="single_item" xsi:type="string">1</argument>
    <argument name="addition_class" xsi:type="string">ub-style-1</argument>
    </arguments>
    </block>
    </referenceContainer>

    NOTE: The sample code above inserts the slider in position ‘content’: <referenceContainer name=”content”>. You can change the ‘content‘ to ‘content.top‘, ‘content.aside‘ or ‘content.bottom‘, according to the layout of your page.

    Make sure you update the ‘slider_key‘ and ‘addition_class‘ of the slider you want to show. Learn more about these parametters here.

  • Then click Save button, clean Magento 2 cache and check your storefront.If you have not created any slider yet, you should see the notice: “No item has been published for the slider yet.”

Option 2: Updating the XML layout file (of your theme or extension)

A slider can be also defined directly in the XML layout file. For the purpose of this userguide, we take the Luma theme as an example:

  • Copy the file vendor\magento\theme-frontend-luma\Magento_Theme\layout\default.xml to your theme directory app\design\frontend\YOUR_BRAND\YOUR_THEME\Magento_Theme\layout\default.xml (For example, our sample XML file: app\design\frontend\Ubertheme\dev\Magento_Theme\layout\default.xml)
  • Open the default.xml file above, add the following code block (you can add right above the line: <referenceContainer name=”footer”>):
    <referenceContainer name="content">
    <block class="Ubertheme\UbContentSlider\Block\Slider" name="ub.content.slideshow" as="ub-content-slideshow" >
    <arguments>
    <argument name="content_type" xsi:type="string">slider</argument>
    <argument name="slider_key" xsi:type="string">main-slideshow</argument>
    <argument name="single_item" xsi:type="string">1</argument>
    <argument name="addition_class" xsi:type="string">ub-style-1</argument>
    </arguments>
    </block>
    </referenceContainer>

    NOTE: The sample code above inserts the slider in position ‘content’: <referenceContainer name=”content”>. You can change the ‘content‘ to ‘content.top‘, ‘content.aside‘ or ‘content.bottom‘, according to the layout of your page.

    Make sure you update the ‘slider_key‘ and ‘addition_class‘ of the slider you want to show. Learn more about these parametters here.

3.3. List of Parametters

While working on pages or CMS CMS static block, you can use the shortcode to display a slider in a selected place. You can learn more about specific parametters of our UB Content Slider module to configure the sliders your way.

The screenshot below represents the way to create a CMS static block and call slider parameters (Your Magento 2 Admin | Content | Blocks | Add New Block, click Show / Hide Editor button to insert the slider shortcode):

UB Content Slider - Shortcode

UB Content Slider Params:

[enable] to enable/disable the block. Value is 0 to disable and 1 to enable
[title] allows to set the module’s title. Valid value : text
[content_type] allows to enable the products carousel with the following types:

  • bestseller_products -- Best Seller Product Slider
  • latest_products -- Latest Product Slider
  • new_products -- New Product Slider
  • hot_products -- Hot Product Slider
  • random_products -- Random Products Slider
  • slider -- this slider will be uploaded manually by admin
[category_ids] allows to set Category ID. The Category ID must exist under the Categories of yourstore. Example: category_ids = “9, 10, 15”
[qty] allows to set the number of products will be displayed in the list. Valid value: number. Default is 10
[slider_key] the key of Slider to show. Only apply for content_type = ‘slider’
[item_width] allows to set the extension block width. Valid value : number. Only apply for content_type = ‘slider’
[item_height] allows to set the extension block height. Valid value : number. Only apply for content_type = ‘slider’
[show_item_title] allows to show or hide the Item’s title. Valid value : 1/ 0. Default is 1. Only apply for content_type = ‘slider’
[show_item_desc] allows to show or hide the Item’s description. Valid value : 1/ 0. Default is 1. Only apply for content_type = ‘slider’
[thumb_width] width of thumbnail (px). Only apply for content_type = ‘slider’ and single_item = 1 and show_thumbnail = 1
[thumb_height] height of thumbnail (px). Only apply for content_type = ‘slider’ and single_item = 1 and show_thumbnail = 1
[show_name] allows to show or hide the product name. Valid value : 1/ 0. Default is 1
[show_price] allows to show or hide the product price. Valid value : 1/ 0. Default is 1+
[show_add_cart] allows to show or hide “Add to cart” button of the product. Valid value : 1/ 0. Default is 1
[show_desc] allows to show or hide the product description. Valid value : 1/ 0. Default is 1
[desc_length] allows to set Max Length of Product Description. Default is 100
[show_review] allows to show or hide the review button. Valid value : 1/ 0. Default is 1
[show_wishlist] allows to show or hide the wishlist button. Valid value : 1/ 0. Default is 1
[show_compare] allows to show or hide the compare button. Valid value : 1/ 0. Default is 1
[show_readmore] allows to show or hide the compare button. Valid value : 1/ 0. Default is 1
[single_item] allows to show only one item or not. Valid value : 1/ 0. Default is 0
[auto_run] allows to auto run or not. Valid value : 1/ 0. Default is 1
[auto_height] allows to auto height by content. Valid value : 1/ 0. Default is 1
[slide_speed] the speed of slider. Default is 200 mini second.
[stop_on_hover] the slider after auto running will be stopped when user hover mouse on slide. Valid value : 1/ 0. Default is 1
[show_navigation] allows to show navigation button or not. Valid value : 1/ 0. Default is 1
[show_paging] allows to show paging or not. Valid value : 1/ 0. Default is 1
[paging_numbers] Paging is number or not. Valid value : 1/ 0. Default is 1
[show_thumbnail] allows show thumbnail. Only apply when single_item = 1. Valid value : 1/ 0. Default is 1
[enable_lazyload] allows to enable/disable lazy load. Valid value : 1/ 0. Default is 1
[show_processbar] allows to show progress bar. Valid value : 1/ 0. Default is 1
[slide_transition] select slide transition: fade, backSlide, goDown, fadeUp. Default is ‘fade’
[number_items] visible Items (width > 1199), default is 6. Only apply when single_item = 0 Example: number_items = 6.
[number_items_desktop] visible Items on Desktop (979 <= width <= 1199), default is 5. Only apply when single_item = 0
[number_items_desktop_small] visible Items on Desktop small (768 <= width <= 979) default is 4. Only apply when single_item = 0
[number_items_tablet] visible Items on Tablet (479 <= width <= 768) default is 3. Only apply when single_item = 0
[number_items_mobile] visible Items on Mobile (width <= 479) default is 1. Only apply when single_item = 0
[addition_class] UB Content Slider extension supports some predefined CSS classes where you can start with.

  • Additional Class for Slider: ub-style-1, ub-style-2
  • Additional Class for Product Image Hotspot: pagination-right, pagination-left (or leave blank to use the default ‘center-bottom’)
  • Additional Class for Lookbook: grid-2-per-row, grid-3-per-row, grid-4-per-row (or leave blank to use the default one column layout)
  • Additional Class for Lookbook items: col-lg (used to merge 2 columns into 1)

NOTE: You can add multiple classes to the Extra CSS Class field by separating each class with a space.

If you wish to add custom CSS styles for a slider, you can do it by adding desired CSS classes and declarations.

3.4. General Configuration

This section refers to the configuration of UB Content Slider admin panel: Ubertheme’s Extensions | [Content Slider] Settings, including:

  • General Configuration
  • Slider Configuration

NOTE: Since UB Content Slider version 1.1.3 and above for Magento 2.3.1+, we implement a new Ubertheme Extension Manager Dashboard as shown in the screenshot below:

Ubertheme Magento 2 Extension Dashboard

3.4.1. General Configuration
Log in to your Admin Panel | Ubertheme’s Extensions | [Content Slider] Settings, you should see the parameters as per screenshot:

UB Content Slider - General Configuration

Parameters explanation:

  • Enabled: Enable or disable UB Content Slider module.
  • Block Title: fill in the title of the slider.
  • Content Type: choose the type of product displayed, including: Best Seller / Latest Products / New Product (From … to … date) / Hot Products / Random Products / Uploaded Images, Videos.
    NOTE: Three fields ‘Select Categories’, ‘Product Sort By’, ‘Product Sort Direction’ are applied for all Slider content types, except for the Best Seller Product.
  • Max Quantity to Show: The maximum number of products shown on product slider. Maximum is 20.
  • Show Name: Display the product name.
  • Show Price: Display the product price.
  • Show Description: Display product description
  • Length of Description: Set the maximum length of product description.
  • Show Read more: Show Read more button.
  • Show Review: Show product review.
  • Show Wishlist: Display Wishlist button.
  • Show Compare: Display Compare button.
  • Show Add to cart: Show Add to cart button.

3.4.2. Slider Configuration
Log in to your Admin Panel | Ubertheme’s Extensions | [Content Slider] Settings, tab the Slider Config section, you should see the parameters like this screenshot:

UB Content Slider - Slider Configuration

Parameters explanation:

  • JS Library: Select the JS library to include. At present, UB Content Slider module supports owl.carousel.js javascript library only.
  • Single Item: Set No to display more than one item on a slider. Set Yes if you want to show a banner carousel that cycling through a series of images. If enabled, you need to configure the following related parameters:
    • Number Items Per Page (on large screen): The number of products shown on one page for the viewport width above 1200px.
    • Number Items Per Page (on desktop): The number of products shown for the viewport width below 1200px.
    • Number Items Per Page (on desktop small): The number of products shown for the viewport width below 980px.
    • Number Items Per Page (on Tablet): The number of products shown for the viewport width 768px and up.
    • Number Items Per Page (on Mobile): The number of products shown for the viewport width below 480px.
  • Auto Run: Enable autoplay for slider items.
  • Enable Process Bar: Display the progress bar (Available when the Slider With Single Item is enabled).
  • Auto Height: Set auto height of the slide items in the slider.
  • Slider Speed: Set the slider speed in miliseconds.
  • Stop On Hover: Stop autoplay on mouse hover.
  • Show Slider Navigation: Show slider navigation buttons.
  • Show Slider Paging: Show slider pagination.
  • Show Paging Numbers: Show numbers inside the pagination buttons.
  • Enable Lazy Load: Delays loading of images. Images outside of viewport won’t be loaded before user scrolls to them.
    Note: The lazy load feature is available for product content types only (Bestseller Products, Latest Products, New Products, Hot Products etc.).
  • Slider Transition: Add CSS3 transition style (works only in modern browsers that support CSS3 translated methods). Slider Transition is available only when the ‘Single Item’ is enabled.

In this section, you will learn about all steps to create a specific type of slider, including:

  • How to create a banner slider
  • How to create a video slider
  • How to create a product carousel
  • How to create Product Image Hotspots
  • How to create a Lookbook page

4.1. How to create a banner slider

    • Step 1: Go to your Magento 2 admin | Ubertheme’s Extensions | [Content Slider] Manage Sliders | click Add New Slider -- see the screenshot below:
      UB Content Slider - Add new slider item
      • Slide Title: Enter the slide title.
      • Slide Key: Enter Slide Key. This key is [slider_key] parameter that will be used in the shortcode to show a slider with images/videos content type when creating a CMS static block.
      • Store View: Select Store to display the slider.
      • Description: Enter the description of slider.
      • Status: To enable/disable slider.
    • Step 2: Create Slider Item for Image/Video SliderGo to your Magento 2 admin | Ubertheme’s Extensions | [Content Slider] Manage Sliders | navigate to the Slider you have just created in previous step and click Select | Manage Slider Items:
      Create slider items

      Then, click Add New Slide Item, you should see the configuration form as follows:

      Manage slider
      • Show In Slider: Assign the slider item to the slider that you want to display in your slider.
      • Link: Enter one of the following:
        • The URL of a page in your store. Example: gear.html
        • The full URL of an external page to be linked
      • Link Target: The target attribute specifies the default target for the link in the page.
      • Content Type: Select content type for slider item, either Image, Youtube video or Vimeo video. If video type enabled, you need to enter the video ID accordingly.
      • Image: Upload the image for the slider.
      • Add Hotspot: Add product hotspot to this banner slider. See 4.3. How to create product image hotspot for more details.
      • Publish time: Set a future date and time for the slider to publish.
      • End time: Set a future date and time for the slider to be disabled.
      • Description: Enter the description of the slider.
      • Status: To enable / disable the slider item.
      • Sort order: Specify the order of the slider item, starting with the position ‘0’.
      • Extra CSS Class: Additional styles for the slider. See 3.3. List of Parameters for more details.
    • Step 3: Assign the slider to your storefront.
      NOTE: UB Content Slider supports a few ways to insert a slider to a CMS page or CMS static block. Check 3.2. How to display a slider on a page for more details.

      You can place the slider anywhere on your Magento 2 store. In this section, we walk you through an example about how to place a carousel image slider in a block, and then position the block on the home page.

      • Go to your Magento 2 admin | Content | (Elements) Blocks | open Home Page Block (You can select any block you want) | and click Select | Edit
      • Tap Show / Hide Editor to work in WYSIWYG mode. Then, position the cursor in the text where you want the slider widget to appear. Next, tap Insert Widget on the editor toolbar.
      • When prompted, choose the UB Content Slider (images/videos uploaded) widget type. The screenshot below shows the widget configuration form after you choose the Widget type:
        Complete the configuration as needed: Insert slider widget
        NOTE: Global settings related to slider configuration can be found in 3.4.1. General Configuration. Global settings can be overriden per slider with the following parametters:
        Below are the sample values used on our demo. You can replace them with your own values.
        • Slider: Choose the slider you want to display
        • Show Block Title: Set to No
        • Width of Item: 1280 (in px)
        • Height of Item: 600 (in px)
        • Show Title of Item: Yes
        • Show Description of Item: Yes
        • Slider With Single Item: Yes (Enabling Singe Item allows to show a banner carousel that cyclying through a series of images)
        • Slider Thumbnail: No
        • Slider Paging: Yes
        • Paging Numbers: Yes (This shows the numbers inside the pagination buttons)
        • Auto Run: Yes (This enables autoplay for the slider)
        • Enable Process Bar: No
        • Auto Height: Yes (This sets auto height of the slider items in the slider)
        • Slider Speed: 200 (in miliseconds)
        • Stop On Hover: Yes (stop autoplay on mouse hover)
        • Enable Lazy Load: Yes (Delays loading of images)
        • Slider Transition: False
        • Additional Class: ub-style-1 (UB Content Slider supports 2 predefined CSS classes for Slider: ub-style-1, ub-style-2. See List of parameters for more details)

        Once you specify your own configuration, clean Magento 2 cache, you should see the slider on your storefront like our demo:

        UB Content Slider - Sample banner slider

      4.2. How to create a video slider

      To create a video slider, you simply follow the same steps and configuration like 4.1. How to create a banner slider. Please note a few specific parameters in the video slider as follows:

      • Step 1: Add New Slider -- refer to 4.1. How to create a banner slider for more details.
        NOTE: Enter Slide Key of your video slider. This [slider_key] parameter that will be used in the shortcode to show your video slider when creating a CMS static block.
      • Step 2: Create video slider items -- refer to 4.1. How to create a banner slider for more details.If you want to a create a video slider like our demo, here is a sample configuration of a video slide item on our demo: sample config
      • Step 3: Assign the video slider to your storefront -- refer to 4.1. How to create a banner slider for more details.When inserting your video slider to a CMS static block, you can configure the parameters that your project requires.In case you want to place the video slider in a CMS static block like our demo, here is a sample widget configuration: sample config.
        • Width of Item: 393 (px)
        • Height of Item: 221 (px)
        • Slider With Single Item: Set to No
        • Number Items Per Page (on large screen): Set to 3 (The number of products shown on one page for the viewport width above 1200px)
        • Number Items Per Page (on desktop): Set to 3 (The number of products shown for the viewport width below 1200px)
        • Number Items Per Page (on desktop small): Set to 2 (The number of products shown for the viewport width below 980px.
        • Number Items Per Page (on Tablet): Set to 2 (The number of products shown for the viewport width 768px and up.
        • Number Items Per Page (on Mobile): Set to 1 (The number of products shown for the viewport width below 480px.
        • Additional Class: ub-style-2 (UB Content Slider supports 2 predefined CSS classes for Slider: ub-style-1, ub-style-2. See List of parameters for more details)

        Once done, clean Magento 2 cache, you should see the sample video slider like our demo:

        UB Content Slider - video slider demo

      4.3. How to create a product carousel

      You can create multiple product carousels and place them anywhere on your store. This option is handy to feature your best seller, latest, or hot products etc., with ease.

      NOTE: UB Content Slider supports a few ways to insert a slider to a CMS page or CMS static block. Check 3.2. How to display a slider on a page for more details.

      You can place the slider anywhere on your Magento 2 store. In this section, we walk you through an example about how to place a product carousel in a block, and then position the block on the home page.

      • Step 1: Select the type of product carousel you want to display:
        • Go to your Magento 2 admin | Content | (Elements) Blocks | open Home Page Block (You can select any block you want) | and click Select | Edit
        • Tap Show / Hide Editor to work in WYSIWYG mode. Then, position the cursor in the text where you want the slider widget to appear. Next, tap Insert Widget on the editor toolbar.
        • When prompted, choose the UB Content Slider (product slider) widget type as shown in this screenshot (You can select between the content types: Latest Products, New Products, Hot Products, Best Seller products, Random Products):
          Complete the configuration as needed: Insert product slider widget

          NOTE: Additional info about the types of product carousels:

          a. New Products Carousel:: displays products which are marked as new in your store. To define the products as ‘New’, go to your Magento 2 admin | Catalog | (Catalog) Products | select a product you want to mark as new in your store, click Edit | navigate to the Set Product as New From field, enter the data range in which the product will be promoted as a new product:

          b. Hot Product Carousel: to define the products as ‘Hot’, you open a product configuration panel (like the ‘New’ product above), set the Is Hot field to Yes:

          c. Best Seller Product Carousel: this shows the best selling products based on your Magento admin statistics during an interval of time or date range.

    • Step 2: Configure the product carousel.The parameters are self-explainatory and almost similar to the section 4.1. How to create a banner slider.Once you complete the configuration, clean Magento 2 cache, you should have your product carousel on your storefront. Here’s an example of the Latest Product block on our demo:

      product slider demo

4.4. How to create Product image hotspots

NOTE: Product image hotspot is a new feature introduced in UB Content Slider ver 1.1.4. It allows to add product hotspots that overlay an image or slideshows. When hovering a hotspot, it reveals essential product info like product thumbnail, title and price. Once clicked, you can directly add the item to cart without opening the product page.
NOTE: Product Image Hotspot requires UB Quick View to be installed & activated.

To add a banner slideshow with product image hotspots, you follow these steps:

      • Step 1: Create a new slider
      • Step 2: Create slider items
      • Step 3: Add product image hotspots to each slider items
      • Step 4: Assign the slider with product hotspots to your storefront

All steps 1, 2 and 4 above are exactly the same like 4.1. How to create a banner slider. Simply follow Step 3 -- Adding product image hotspots to a slider item as follows:

Once you already create a slider item, upload a banner image and hit Save and Continue Edit button, you should see slider item configuration form below:

Manage slider

You can start adding product images right from the Add Hotspot field:

Add product hotspot
      • Click anywhere on the banner image to add a hostpot
      • Enter specific Product’s SKU you want or click Search to search your catalog (On the catalog prompted, find the product you wish to tag and click to automatically create a product hotspot).
      • Then, drag and drop the hotspot to any position you want.
      • In case you need to adjust the hotspot marker’s size, drag the size bar on top of the banner image.

Once you complete Step 3 -- Adding product image hotspot and Step 4 -- Assigning the slider with product hotspots to your storefront, clean your Magento 2 cache, you should see your slideshow with product hotspots on your storefront. Here’s an example:

Slideshow with product hotspot demo

(Optional) Configure Quickview modal

When a user hovers over a product hotspot and click on the product title or product thumbnail, a quick view modal is prompted where he can add the item to cart. You can configure to enable centered quick view modal or right quick view modal:

Navigate to your Magento 2 admin | Ubertheme’s Extensions | (Quickview) Settings | in the Modal Settings, set the Type field to the style you want (Popup, Right To Left, or Left to Right etc.,).

Here’s the sample of Right to Left modal:

Product hotspot - Right quick view modal

Here’s the sample of Popup (centered) modal:

Product hotspot - Centered quick view modal

4.5. How to create a Lookbook page

NOTE: Lookbook page is a new feature introduced in UB Content Slider ver 1.1.4. Creating awesome lookbook page that features multiple banner slideshows with product image hotspots has never been easier.
NOTE: If you add Product Image Hotspot on banner sliders, make sure you have UB Quick View installed & activated.

To create a lookbook page, you can follow these steps:

  • Step 1: Create a new page which is used as Lookbook page
  • Step 2: Insert UB Content Lookbook (images uploaded) widgets in the Lookbook page

For the purpose of this guide, we will take Furniture Lookbook page on our demo as an example. We will create a lookbook page like this screenshot:

Sample furniture lookbook page
  • Step 1: In the Admin Panel, navigate to Content | (Elements) Pages | Add New Page | complete the configurations with some basic settings for now:
    • Page Tile: Enter the Lookbook page title
    • Content: You add the code below first. Once you create sliders, you will get back here to insert sliders to this section.
      <div class="lookbook-page-title">
      <h1 class="header-text">Shop The Furniture</h1>
      <p class="subheader-text">Coming Soon.</p>
      </div>
    • Search Engine Optimization: complete the SEO configuration as needed. Make sure you specify the url key with lowercase characters with hyphens to separate words.
    • Page in Websites: in the Store View list, select the view where the lookbook page is to be available.
    • Design: select the layout you want. At present, predesigned layout packed with UB Content Slider supports 1 column layout only.
  • Step 2: Insert UB Content Lookbook (images uploaded) widgets in the Lookbook page.
    • First, you need to create 3 Sliders which will be inserted into the lookbook page (Please refer to 4.1. How to create a banner slider for more details about how to create a banner slider and it’s associated slider items):
      • Lookbook Furniture Masthead: presents the hero block like this screenshot:
        Manage lookbook slider

        Configuration steps: (1) slider’s configuration -- (2) slider item’s configuration

      • Shop the Headboard: presents the product block with 4 items per row like this screenshot:
        Manage lookbook slider

        Configuration steps: (1) slider’s configuration -- (2) slider items’ configuration (You can create as many slider items as you want)

        NOTE: In the configuration of slider item, if you want to merge 2 items per row into 1, make sure you enter the col-lg in the Extra CSS Class field. Otherwise, simply leave this field blank.
      • Shop the Sofas: presents the product block with 3 items per row like this screenshot:
        Manage lookbook slider

        Configuration steps: similar to the Shop the Headboard above.

        NOTE: In the configuration of slider item, if you want to merge 2 items per row into 1, make sure you enter the col-lg in the Extra CSS Class field. Otherwise, simply leave this field blank.
    • Second, Insert UB Content Lookbook (images uploaded) widgets in the Lookbook page
      • Navigate back to the Lookbook page created in Step 1 (Content | (Elements) Pages), under the Content tab,
      • Tap Show / Hide Editor to work in WYSIWYG mode. Then, position the cursor in the text where you want the slider widget to appear. Next, tap Insert Widget on the editor toolbar.
      • When prompted, choose the UB Content Slider (product slider) widget type. Then select the Slider we created above. Repeat this step to insert each widget in the lookbook page:
        • Inserting Lookbook Furniture Masthead widget: see configuration
          Make sure you set the Template field with ‘Masthead‘.
        • Inserting Shop the Headboard widget: see configuration
          Make sure you enter the Additional Class field with grid-4-per-row.
        • Inserting Shop the Sofas widget: see configuration
          Make sure you enter the Additional Class field with grid-3-per-row.

          NOTE: UB Content Slider supports a few predefined CSS classes for sliders: grid-2-per-row, grid-3-per-row, grid-4-per-row. Default is fullwidth one column.

          Beside those CSS classes, you can define your own CSS classes to define the grid of columns. Refer to 3.3. List of Parameters to learn more about additional CSS classes.

        • Once you complete the configuration, clean Magento 2 cache and check your storefront.

VII. Manual Un-Installation

If you want to have UB Content Slider extension uninstalled, please follow steps below:

  • Step 1:[Important] Remove related widgets if they were created.

Go to your Backend | Content | Widget, delete all created widgets with Widget Type ‘UB Content Slider (products slider)’ OR ‘UB Content Slider (images/videos uploaded)’.

  • Step 2: Disable UB Content Slider module and clean associated database tables.

-- Open your terminal, go to your Magento 2 folder <your magento installation path> and run the following CLI commands:

php -f bin/magento maintenance:enable
php -f bin/magento deploy:mode:set developer
php -f bin/magento module:disable -c Ubertheme_UbContentSlider
rm -rf app/code/Ubertheme/UbContentSlider

-- Open your Mysql cpanel (eg. PHPMyAdmin), and run the following SQL syntax:
NOTE: Make sure you replace with your own <table_prefix>:

DELETE FROM '<table_prefix>setup_module` WHERE `module`= 'Ubertheme_UbContentSlider';
DROP TABLE '<table_prefix>ubcontentslider_slide_item`;
DROP TABLE '<table_prefix>ubcontentslider_slide_store`;
DROP TABLE '<table_prefix>ubcontentslider_slide`;
DELETE FROM '<table_prefix>eav_attribute` WHERE `attribute_code` = 'is_hot';

Step 3:

    Once done, run the following commands:

NOTE: You can still keep the developer mode if you continue development process. Otherwise, run the following commands to switch to production mode:
php bin/magento deploy:mode:set production
php bin/magento maintenance:disable