Flexslider v2.x Installation and User Manual

This is the installation and user manual for the Magento Flexslider v1.x extension created by Solide Webservices. Although great care has been taken to ensure the accuracy and completeness of this manual, Solide Webservices is unable to accept any legal responsibility concerning errors or ommisions in this document.

You are not allowed to copy or edit the content or the layout of this document. If you would like to redistribute the content of this document please contact Solide Webservices.

If you purchased the extension through the Magento Marketplace, please follow the steps to install the extension as described in the Magento Docs here: https://docs.magento.com/marketplace/user_guide/buyers/install-extension.html

The zip package you have downloaded from the webshop of Solide Webservices contains a link to this manual and a folder called upload. This upload folder contains the files of the extension and will be used to install the extension through (s)FTP.

• Magento version 2.x or higher
• PHP version 5.6.0 for 2.x or 2.1 or PHP 7.1 for Magento 2.2

Installing modules is a little different in Magento 2 and requires some technical knowledge. If you are unfamiliar with this please read the Magento2 documentation.

Follow the steps below to install the extension for the first time.

1. Backup your web directory and webshop database;
2. Disable caching;
3. Extract the zipfile you have downloaded after your purchase and copy the content of the 'upload' folder to the root of your webshop (for instance using an FTP client);
4. Navigate to your webshop root in the console of your SSH client and execute the following command:

   php -f bin/magento module:enable SolideWebservices_Flexslider --clear-static-content

5. Then run the following command:

   php -f bin/magento setup:upgrade

6. Flush the cache en reenable it. Log out from the backend and log in again to refresh autorisations for the new transactions.

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

1. Backup your web directory and webshop database;
2. Disable caching;
3. Extract the zipfile you have downloaded after your purchase and copy the content of the 'upload' folder to the root of your webshop (for instance using an FTP client);
4. Navigate to your webshop root in the console of your SSH client and execute the following command:

   php -f bin/magento setup:upgrade

5. Flush the cache en reenable it. Log out from the backend and log in again to refresh autorisations for the new transactions.

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

Installation of modules is done through the command line as well, for more information please have a look at the Magento2 documentation.

1. Backup your web directory and webshop database;
2. Disable caching;
3. Navigate to your webshop root in the console of your SSH client and execute the following command:

   php -f bin/magento module:disable SolideWebservices_Flexslider --clear-static-content

4. Flush the cache en reenable the cache again.
5. Remove the folder called 'Flexslider' located at /app/code/SolideWebservices/. If you have no other extension of Solide Webservices installed you can also remove the folder called 'SolideWebservices' in /app/code/.

In this section you can see most of the functionality how it can be shown on the frontend of your Magento webshop. These are just examples but will give you a good idea of the endless posibilities.

Below is an example of a basic slider as shown on the frontend. All elements can be modified to your needs and theme.

1. Image and video slides: all slider groups can have unlimited image and/or video (Youtube and Vimeo) slides.
2. Progress Bar: a slider group can have a progress bar indicating the time until the next slide. This can be positioned and styled to your needs.
3. Captions: every slide can have it's own caption with HTML styled text. Each captions can be positioned and styled to your needs.
4. Navigation arrows: a slider group can have navigation arrows which can be hidden, always shown or only shown upon hover. There is a wide selection of arrow types to choose from and the arrows can be styled to your needs.
5. Pagination: a slider group can have pagination dots which can be hidden, always shown or only shown upon hover. The dots can be positioned and styled to your needs.

1. Multiple slider types: there are several types of sliders to choose from, there is a basic slider, a carousel, a basic slider with carousel navigation and basic slider with overlay navigation as seen below.
2. Carousels are configurable: the carousels can be configured to your needs, you can set the number of images, the size of the thumbnails, the way it scrolls, etc.

1. Overlay navigation: add an overlay navigation based on your slides to easliy navigate between them.
2. Responsive: all sliders are completely responsive meaning they will scale down based on the users viewport. Not only will it scale, it will also load optimized images based on this viewport to make sure the sliders also load fast on devices that have low bandwidth.
3. Themes: there are several themes you can choose from but you can easily add your own theme if you know your way around CSS. You will not even have to touch the files but can do this straight from the options.

The extension settings for the Flexslider v2.x extension can be found through the Magento backend menu under either “Content > Flexslider > Flexslider Settings” and “Stores > Settings > Configuration > Solide Webservices > Flexslider”. These settings control some general settings.

In the advanced settings you are able to tweak the extension to optimize it based on your needs. The position settings can disable/enable positions for the slider groups. Enabled postions will add extra database queries to the frontend. Positions that arent in use should be disabled for optimal performance.

This Magento Flexslider v2.x extension allows you to add groups that consist of a collection of slides where each slide can be an image or a video. Each group has it's own configuration like effect settings and a selection of pages and/or categories where the group should be displayed. This chapter explains how to add, edit and delete groups and how this is displayed on the frontend.

To add, edit or delete a group select the menu option “Content > Flexslider > Manage Groups”. A grid is loaded with the existing groups. To add a new group click the “Add New Group” button. To edit an existing group select the group you want to edit from the grid by clicking on it. If you want to delete a group select the delete action from dropdown in the action column in the row of the group you want to delete.

You can also enable, disable or delete a selection of slider groups with a mass-change action by selecting these groups and choosing the right action from the actionbox in the grid header.

For some changes to take effect it might be necessary to refresh your Full Page Cache under “System > Cache Management” or even re-deploy the static files with the following command.

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

When adding or editing a slider group these options are available.

Caption Default Text Color|Colorpicker|Here you can set the default text color of the captions of this group. This setting can be overridden with the rich text editor used for adding the caption on individual slides.| Caption Background Color|Colorpicker|Set the background color of the caption.|

On this tab you can select the CMS pages on which to display the group you are currently adding or editing. When adding the slider through XML Layout update or template tags don't select any pages here.

On this tab you can select the catalog categories on which to display the group you are currently adding or editing. When adding the group through XML Layout update or template tag don't select any categories here.

On this tab you can select the products on which to display the group you are currently adding or editing. Due the limitations of Magento it is only possible to add a slider before or after a product on the product page.

This tab shows all slides that are added to this group as reference information. Editing the slides is done through the slide management but you can use the edit link to get there quickly.

This tab gives information on how to add a slider to a page, category or static block using XML Layout Update code or template tags. This will give you even more flexibility on where to display sliders in your webshop.

This chapter explains how to manage slides. After adding a group you can now add slides to this group. Each group can have unlimited image and video slides which are managed from the menu option “Content > Flexslider > Manage Slides”. Here a grid is loaded containing the existing slides.

To add a new slide click the “Add New Slide” button. To edit an existing slide select the slide you want to edit from the grid by clicking on it. If you want to delete a slide select the delete action from dropdown in the action column in the row of the slide you want to delete.

You can also enable, disable or delete a selection of slides with a mass-change action by selecting these slides and choosing the right action from the actionbox in the grid header.

For some changes it might be necessary to refresh your Full Page Cache under “System > Cache Management” or even re-deploy the static files with the following command.

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

When adding or editing a slide the following options are available.

For more flexibility on where to position a group you can use a Layout XML update or template tag to add a group to any page or static block. If you are unfamiliar with the Magento XML Layout Update functionality you can catch up on some reading here .

You can use the code inserts tab available when editing a group to get the right code. The “Information” block on this tab explains the functionality in further detail.

The use of the CMS template tag is pretty straight forward. Just copy the code and paste in inside the content editor of a CMS page or static block where you want to add the slider. The template code can be copied into a phtml template file of your current template. Both contain the parameter start_slide_id which allow you to set the first slide in the group.

The XML code contains a couple of parameters that allow you to position the slider group exactly where you want as well. These parameters are explained below.

Follow these steps to add a group with the use of the XML Layout Update functionality.

1. Copy the XML code to the clipboard from the tab for code inserts;
2. Open the CMS page or category where you want to add the group;
3. For CMS pages go to the tab “Design” and paste the code in the “Layout Update XML” textarea;
4. For categories go to the tab “Custom Design” from the category management page and paste the code in the “Custom Layout Update” textarea;
5. Edit the parameters (as explained before) to your needs to position the slider group exactly where you like and save the CMS page or category, save it and you are done.

In this section you will find answer to common issues.

This is a common issue when installing Magento extensions. It is caused because the permission for using the new extension havent been set for the currently logged in admin user. The solution is to logout and login again in the admin backend.

Make sure you have followed the installations steps and every one of them. Check if the extension has been installed under “System > Tools > Web Setup Wizard > Component Manager”. The extension should be listed as registered and enabled under this list. If this is not the case and you did upload the extension files as described in the installation steps you could try to run the following commands through a SSH client.

php -f bin/magento module:enable SolideWebservices_Productimageenhancements --clear-static-content
php -f bin/magento setup:upgrade

For some changes it might be necessary to refresh your Full Page Cache under “System > Cache Management” or even re-deploy the static files with the following command.

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