Product Slider Manual

In this document, you will find step by step instructions for installing and using this extension. Thank you for paying attention to this manual. If you have more questions please post your question on themeforest item page and our staff will put its best to help you http://themeforest.net/

Product Slider - most simple and cozy way to showcase Hot deals, Specials, Clearance products to your customers and draw clients' attention to certain products. Productslider is cheap but very effective method to manage advertising spaces in the store. Flexible settings will meet the most sophisticated requirements. Visual Builder allow you to customize the smallest of details and change slider settings on the fly, show/hide certain product elements like name, price, action button, choose navigation skins and check it live.

It does support touch devices like iPhone and iPad. You can create custom breakpoints for any screen resolution to design the best look & feel. Support multiple screen resolutions and adapts accordinly.

Widgets allow displaying new, sale, bestseller products collections on any pages. Add multiple product sliders in header, content, footer.

Full features list

Visual Builder - customizing slider has never been so easy
Display each product slider with different navigation, pagination styles, and effects
Add as many sliders as you need
Responsive layout, adapts to phone, tablet etc
Touch devices support, swipe to scroll
Support retina screens
Slider widget
Insert Product Slider anywhere
Multiple sliders on the same page
Support multiple slider types
New Products, On Sale Products, Bestsellers, Recently Added, Wishlist, Category Products
5 predefined skins for navigation
Premium Support and free lifetime updates
Compatible with all the modern browsers
Multi-store supported
No programming skills required
Easy to install and configure
Meets Best Magento programming practices

Navigate to Visual Builder

NWDthemes Product Slider comes with a full-blown Visual Builder tool
Building product sliders from the scratch has never been so easy. Adjust slider settings on the fly.
Fine tune visible product elements like Name, Price, Wishlist & Compare buttons
Apply Settings to Preview slider and watch the result without any additional steps

Create Slider Template

Choose slider type - Category Products, New Products, On Sale, Recently Added or other type
Adjust products count, category ID, slider title and description
Setup Slider Settings. You can control every aspect of your slider like number of visible elements, loop, autoplay, navigation arrows
Save settings as a template and get ready-to-use shortcode. Just paste it in your CMS Page or Block

Add Slider to your Site"

You can easily add Product Slider to any part of your Magento store
You can use pre-generated shortcode for CMS Pages or Static Blocks
Add it via Content > Widgets.Due to greater flexibility and control widgets can be added anywhere on the site
Insert Product Slider via xml layout update or create slider block programmatically via php code

Extension package contain following files and folders

Documentation - documentation in html format
Extension - extension source code

We do recommend to install and test the extension on development server before installing it on live store

Extension upgrade

To upgrade the extension to the latest version, follow the same procedure as for initial installation (which is described in the next chapter). Always test the upgrade on a copy of your Magento before you upgrade your live store. Never go live with the upgrade without testing.

Before start

Important

It is highly recommended to install the theme on a test server before you install it on your live store

Backup

Backup store files and the store database.

Disable the following options: Merge CSS Files, Enable Javascript Bundling, Merge JavaScript Files and Minify JavaScript Files under Stores > Configuration > Developer.
disable Magento cache - Cache Management
Enable Magento maintenance mode. To enable the maintenance mode you can create an empty file named .maintenance.flag in your Magento's var directory. Magento will be offline after that. You will need to disable the maintenance mode after installation by removing this file.
Refer to Magento documentation for more details:
Enable or disable maintenance mode
Log out from magento admin panel ( if you logged in ).

Install

Unzip extension package
Navigation into package/Extension folder
Upload content of package/Extension to your magento root directory.
- package/Extension/app >> magento_root/app
- package/Extension/pub >> magento_root/pub
Productslider does not overwrite any magento core files
Set correct file permissions for all the files which you uploaded to your server.
Refer to Magento documentation for more details:
Ownership and permissions

Enable module:

php bin/magento module:enable Nwdthemes_Base Nwdthemes_Productslider

Run setup upgrade scripts:
```
php bin/magento setup:upgrade
```

Generating static files:
Magento <= 2.1.x

php bin/magento setup:static-content:deploy

Magento >= 2.2.x - add -f parameter

php bin/magento setup:static-content:deploy -f

Flush cache:
```
php bin/magento cache:flush
```
Productslider is now installed on your Magento system.

Common Issues

Site is down

Following steps will help you to disable the extension

php bin/magento module:disable Nwdthemes_Productslider 
php bin/magento cache:flush
php bin/magento cache:clean

If you have other cache services such as Redis, Varnish, please also flush cache of those services.
Deploy your store if needed.

Do not see Product Slider on Frontend

Magento cache (or external cache) was not flushed after changes
Some of the extension files were not uploaded or are broken. Re-upload original extension files to your server (overwrite existing files) and flush the cache
You edited extension files and accidentally removed or changed something in the files. Re-upload original extension files to your server (overwrite existing files) and flush the cach

Extension configuration changes do not appear on the frontend

Flush Magento cache in System > Cache Management
Clear web browser cache/cookies for your store domain
Refresh the page in your web browser

Check this article for a common actions list: Magento 2: Uninstall Module

remove the folder app/code/Nwdthemes/Productslider

remove the config settings

DELETE FROM core_config_data WHERE path LIKE 'nwdproductslider%'

remove the module from database table setup_module

DELETE FROM setup_module WHERE module='Nwdthemes_Productslider'

remove the module from app/etc/config.php
flush cache
```
php bin/magento cache:flush
```
recompile code if you are in production mode
```
php bin/magento setup:di:compile
```

Configuration allow you to set default options for your slider. It will be used if you not override it via shortcode / widget parameters. Navigate to Nwdthemes > Productslider > Configuration to modify extension configuration

Display Settings
- Show Slider Title - Show / Hide Slider Title
- Default Slider Title - Default Slider Title if not overrided in shortcode / widget
- Show Slider Description - Show / Hide Slider Description
- Default Slider Description - Default Slider Description if not overrided in shortcode / widget
- Additional CSS - Add custom css
Item Display Settings
- Show Product Name - Show / Hide Product Name
- Show Product Price - Show / Hide Product Price
- Show Product Rating - Show / Hide Product Rating
- Show Wishlist Button - Show / Hide Wishlist Button
- Show Compare Button - Show / Hide Compare Button
- Show Cart Button - Show / Hide Cart Button
Slider Settings
- RTL - Right to Left mode.
- Number of Slider Items - Default number of items you want to see on the screen. Will be used if responsive option not active.
- Is Responsive - Enable Responsive Mode. Allow to show different number of products for different screen width.
- Responsive Items - Object containing responsive options. Breakpoint set screen width and item set number of items visible starting from breakpoint width
- Loop Slider - Infinity loop. Duplicate last and first items to get loop illusion.
- Stage Padding - Stage padding option adds left and right padding style (in pixels) onto stage-wrapper. Makes side elements partly visible.
- Auto Width - Set non grid content. Try using width style on divs.
- Start Position - Start Item Position. Item index start from 0.
- Lazy Load - Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not img
- Autoplay - Enable Slider auto-scroll.
- Autoplay Timeout - Autoplay interval timeout in milliseconds. ( 1000ms = 1sec ). Default: 5000
- Autoplay Hover Pause - Pause Autoplay on mouse hover.
Slider Navigation Settings
- Navigation Theme - Choose one of skins for navigation arrows and dots.
- Navigation Buttons - Show next/prev buttons
- Navigation Buttons Visibility - Navigation buttons visible on mouse hover or always visible
- Dots - Show dots navigation.
- Dots Position - Define dots position ( top / bottom, left / center / right )
- Slide By - Navigation slide by x. 'page' string can be set to slide by page.

Visual Builder allow you to customize the smallest of details and change slider settings on the fly, show/hide certain product elements like name, price, action button, choose navigation skins and check it live.

Slider Settings

Here you can change any slider option and see it live. Each option has tooltip with description. Comlete list of options can be found in Configuration. Slider Settings contain 4 sections:

Display Settings - allow you to setup slider type, products count, slider title and description
Item Display Settings - control product element like name, price, rating, wishlish button, compare button etc
Slider Settings - allow you to setup various slider options like loop, autoscroll and much more
Navigation Settings - choose navigation skin, enable arrows, dots, adjust its position

Preview

Preview section allow you to check current setup and adjust it according to your needs. Please note that some options like "Slider Type", "Products Count" will not be reflected on preview.

Slider Templates

Here you can save current options set as a template or update existing template.

Templates List contain existing templates.

You can copy shortcode to clipboard and use it in Content Pages or Static Blocks.
You can load template settings and check how it will look in preview section.
You can delete template. Be sure to check that template is not used in any widget.

BestSellers

Navigate to Report > Products > Bestsellers
Refresh Statistics

New Products

Navigate to Catalog > Products
Open edit page for product you want to mark as NEW
Set date range in Set Product as New field. You can set either From or To, or both
Flush cache in System > Cache Management

Recently Added

This block does not require any setup. It will show latest added products.

Sale Products

Navigate to Catalog > Products
Open edit page for product you want to mark as SALE
Click on Advanced Pricing link under Price field
Set Special Price for product in popup
Optionally set date range in Special Price From field. You can set either From or To, or both
Flush cache in System > Cache Management

Wishlist

Wishlist products will be shown only for logged in customers
Customer need to have at least one product in Wishlist

You can insert Productslider slider in any cms page or static block using this code. Most basic shortcode should contain only slider type. All other parameters will be loaded from Configuration

{{block class="Nwdthemes\Productslider\Block\NewProducts" }}

One more example with custom title and disable description

{{block class="Nwdthemes\Productslider\Block\NewProducts" title="New Products" showDescription="0" }}

List of Available Blocks

Nwdthemes\Productslider\Block\BestSellers : Bestsellers products
Nwdthemes\Productslider\Block\Category : Products from certain category
Nwdthemes\Productslider\Block\NewProducts : Products marked as NEW
Nwdthemes\Productslider\Block\RecentlyAdded : Recently Added products
Nwdthemes\Productslider\Block\SaleProducts : Products marked as SALE
Nwdthemes\Productslider\Block\Wishlist : Customer Wishlist products. Block will display only for logged in customers.

List of Available Parameters

Display Settings
- showTitle - Show / Hide Slider Title
  Type: integer
  
  Possible values:
  - 0 : hide title
  - 1 : show title
- title - Slider Title
  Type: string
- showDescription - Show / Hide Slider Description
  Type: integer
  
  Possible values:
  - 0 : hide description
  - 1 : show description
- description - Slider Description
  Type: string
Item Display Settings
- showName - Show / Hide Product Name
  Type: integer
  
  Possible values:
  - 0 : hide name
  - 1 : show name
- showPrice - Show / Hide Product Price
  Type: integer
  
  Possible values:
  - 0 : hide price
  - 1 : show price
- showRating - Show / Hide Product Rating
  Type: integer
  
  Possible values:
  - 0 : hide rating
  - 1 : show rating
- showWishlist - Show / Hide Wishlist Button
  Type: integer
  
  Possible values:
  - 0 : hide button
  - 1 : show button
- showCompare - Show / Hide Compare Button
  Type: integer
  
  Possible values:
  - 0 : hide button
  - 1 : show button
- showCart - Show / Hide Cart Button
  Type: integer
  
  Possible values:
  - 0 : hide button
  - 1 : show button
Slider Settings
- rtl - Right to Left mode.
  Type: integer
  
  Possible values:
  - 1 : enable rtl mode
  - 0 : disable rtl mode
- items - Default number of items you want to see on the screen. Will be used if responsive option not active.
  Type: integer
  
  Possible value: integer number >= 1
- responsive - Enable Responsive Mode. Allow to show different number of products for different screen width.
  Type: integer
  
  Possible values:
  - 1 : enable responsive mode
  - 0 : disable responsive mode
- loop - Infinity loop. Duplicate last and first items to get loop illusion.
  Type: integer
  
  Possible values:
  - 1 : enable loop mode
  - 0 : disable loop mode
- stagePadding - Stage padding option adds left and right padding style (in pixels) onto stage-wrapper. Makes side elements partly visible.
  Type: integer
  
  Possible value: integer number >= 0
- autoWidth - Set non grid content. Try using width style on divs.
  Type: integer
  
  Possible values:
  - 1 : enable autoWidth mode
  - 0 : disable autoWidth mode
- startPosition - Start Item Position. Item index start from 0.
  Type: integer
  
  Possible value: integer number >= 0
- lazyLoad - Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not img
  Type: integer
  
  Possible values:
  - 1 : enable lazy load
  - 0 : disable lazy load
- autoplay - Enable Slider auto-scroll.
  Type: integer
  
  Possible values:
  - 1 : enable autoplay
  - 0 : disable autoplay
- autoplayTimeout - Autoplay interval timeout in milliseconds. ( 1000ms = 1sec ). Default: 5000
  Type: integer
  
  Possible value: integer number >= 0
- autoplayHoverPause - Pause Autoplay on mouse hover.
  Type: integer
  
  Possible values:
  - 1 : enable pause on hover
  - 0 : disable pause on hover
Slider Navigation Settings
- theme - Choose one of skins for navigation arrows and dots.
  Type: string
  
  Possible values:
  - owl-hesperiden
  - owl-gyges
  - owl-hades
  - owl-ares
  - owl-uranus
- nav - Show next/prev buttons
  Type: integer
  
  Possible values:
  - 1 : enable next/prev buttons
  - 0 : disable next/prev buttons
- navHover - Navigation buttons visible on mouse hover or always visible.
  Type: string
  
  Possible values:
  - nav-hover : Show on Hover
  - nav-always : Show Always
- dots - Show dots navigation.
  Type: integer
  
  Possible values:
  - 1 : enable dots navigation
  - 0 : disable dots navigation
- dotsPosition - Define dots position ( top / bottom, left / center / right )
  Type: string
  
  Possible values:
  - pagination-top-left
  - pagination-top-center
  - pagination-top-right
  - pagination-bottom-left
  - pagination-bottom-center
  - pagination-bottom-right
- slideBy - Navigation slide by x. 'page' string can be set to slide by page.
  Type: string|integer
  
  Possible values:
  - page : slide by page
  - >=1 : slide by number of items

<block class="Nwdthemes\Productslider\Block\Bestsellers" name="productslider.bestsellers">
	<arguments>
		<argument name="products_count" xsi:type="number">12</argument>
		<argument name="showTitle" xsi:type="string">1</argument>
		<argument name="title" xsi:type="string">Bestsellers</argument>
		<argument name="showDescription" xsi:type="string">0</argument>
	</arguments>
</block>

Code above will create bestsellers product slider containing 12 products with title "Bestsellers". This code can be used in any layout file on frontend or in any Layout Update XML section.

Comlete list of options can be found in List of Available parameters section

Widget in CMS Editor

To insert Productslider Widget in CMS editor click "Insert Widget" icon or button. Select NWDthemes Productslider widget. In Widget Options select slider template you want to insert and click Insert Widget button.

Widget Instance

To create Productslider Widget Instance

go to CMS > Widget section page
push Add New Widget Instance button
Select NWDthemes Productslider widget type, choose design package/theme and click Continue
Fill Frontend Properties form giving widget instance name, assign store views and sort order
Click Add Layout Update button and select pages and block you want to display widget on
Switch to Widget Options tab and select slider for this widget instance
Click Save to update widget options

The following chapter describes some of the basic Magento settings and features.

Please note that Magento configuration, installation, maintenance, customization etc. is beyond the scope of our support. But since Magento is very popular platform you can find tons of useful tutorials and articles on the web. Here are some resources for start: Useful links

Cache Management

Magento's cache management system is an easy way to improve the performance of your site. Whenever a cache needs to be refreshed, a notice appears at the top of the workspace to guide you through the process. Follow the link to Cache Management, and refresh the invalid caches.

To access the cache management screen, you can also use the link in the admin panel menu: System > Cache Management.

Always refresh the cache after making changes in the configuration of your Magento/themes/extensions or after making any custom changes in the files.

Cache documentation:
http://docs.magento.com/m2/ce/user_guide/system/cache-management.html

Flush cache

Go to System > Cache Management. Click the following buttons to completely clear the store cache:

Flush Magento Cache
Flush Cache Storage

Disable cache

Go to System > Cache Management. Click Select All link, select Disable in Actions field and click Submit button.

Enable cache

Go to System > Cache Management. Click Select All link, select Enable in Actions field and click Submit button.

Refresh cache

If the cache is enabled, after each configuration change, extension installation, upgrade or uninstallation always refresh the cache. Go to System > Cache Management. Click Select All link, select Refresh in Actions field and click Submit button.

Index Management

Magento reindexes automatically whenever one or more items change. Actions that trigger reindexing include price changes, creating catalog or shopping cart price rules, adding new categories, and so on. To optimize performance, Magento accumulates data into special tables using indexers. As the data changes, the indexed tables must be updated—or reindexed. Reindexing is performed as a background process, and your store remains accessible during the processes.

To access the index management screen, go to System > Index Management.

You can reindex in any of the following ways:

using a cron job (preferred)
using console command which reindexes selected indexers, or all indexers, one time only.
```
php bin/magento indexer:reindex [indexer]
```

Indexing documentation:
http://docs.magento.com/m2/ce/user_guide/system/index-management.html

Please read this documentation carefully, it will help you eliminate most of potential problems with incorrect configuration of the extension and Magento. If you don't find the answer to your questions, please refer to this chapter for more information about support policy:
Help & Support > Support Policy.

Magento configuration, installation, maintenance, customization etc. is beyond the scope of our support. But since Magento is very popular platform you can find tons of useful tutorials and articles on the web. Here are some resources for start:

Useful links

Documentation

Basic information about Magento:
https://magento.com/developers/magento2
https://magento.com/products/community-edition
System Requirements:
http://devdocs.magento.com/guides/v2.0/install-gde/system-requirements.html
Magento documentation:
Getting Started
Developer Documentation
Installation Guide:
http://docs.magento.com/m2/ce/user_guide/magento/installation.html

Community

Magento Forum:
https://community.magento.com/
Stack Overflow:
http://stackoverflow.com/questions/tagged/magento2?sort=newest
Magento Stack Exchange:
http://magento.stackexchange.com/

Support Policy

Support hours: 10AM – 6PM GMT+1 time, Monday – Friday. The support response time is 24-48 hours.

Support for our items includes:

Fixing bugs and reported issues
Responding to problems regarding the item and its features
Providing updates to ensure compatibility with new software versions

Item support does not include:

Customization and installation services
Support for third party software and plug-ins
Support for Magento: configuration, installation, maintenance etc.

Product Slider Manual

Features

Full features list

Quick Start

Package

Installation

Extension upgrade

Before start

Important

Backup

Install

Productslider does not overwrite any magento core files

Common Issues

Uninstallation

Configuration

Display Settings

Item Display Settings

Slider Settings

Slider Navigation Settings

Visual Builder

Slider Settings

Preview

Slider Templates

Products Setup

BestSellers

Category

New Products

Recently Added

Sale Products

Wishlist

Shortcode

List of Available Blocks

List of Available Parameters

Display Settings

Item Display Settings

Slider Settings

Slider Navigation Settings

Xml fo Layout

Widget

Widget in CMS Editor

Widget Instance

Magento Configuration

Cache Management

Flush cache

Disable cache

Enable cache

Refresh cache

Index Management

Help & Support

Useful links

Documentation

Community

Support Policy

Support for our items includes:

Item support does not include: