So Grid Slider

View demo More detail

This guide will help you install SO Grid Slider step by step.

1REQUIREMENT – Back to top

At the basic level, this module will require the following conditions:

Compatible with version OpenCart: OpenCart 2.x
Have responsive

2INSTALLATION – Back to top

2.1 FTP Configuration

There are two ways to configure FTP

Option 1:

Step 1: Please go to System >> Settings >> Your Store >> Click “Edit” button

Step 2: Click FTP tab and enter the FTP username & password…

Option 2:

Step 1:Please go Here to dowload file XML of “Quick Fix”

Step 2: Please go to Extensions >> Extension Installer >> Click Upload and select file XML which you just dowloaded

Then You should see the message Success

Step 3: Go to Extension >> Modifications >> Click “Refresh” button

2.2 Module Installation

Prepare your module package

In your Administrator page, go to Extensions >> Extension Installer >> Click Upload and select file so-grid-slider.ocmod.zip.
Then You should see the message Success

In this page, choose module “SO Grid Slider”, click Install button

Please wait for module being installed, usually within several seconds

To Create the name of this module, please go to Extensions >> Modules >> Choose module “SO Grid Slider” >> Click “Edit” button

Enter the name of the Module and fill the fields in the tabs. Then click “Save” button

To Edit the module you have created, there are two ways

Options 1: Choose the module you have Created >> Then Edit it

Options 2: Please go to Extensions >> Modules >> Choose the module you have Created >> Click “Edit” button

After you have installed and configured a module you can add it to a layout: Please go to Design >> Layouts >> Choose the layout you want to display

For Example: we choose “Home” layout

3MODULE CONFIGURATION – Back to top

3.1 Module Demo

3.2 Module Configuration

SO Grid Slider are configured in 6 groups of parameters following:

General Options
Source Options
Product Options
Image Options
Effect Options
Advanced

General Options.

Module Class Suffix – Allow you to choose another CSS class that suits your module.
Open Link – Allow to set target for links:
- New Window.
- Same Window.
Select Theme – Allow you to select theme for the module.
# Column – Allow to set number of column for each device:
- For devices have screen width from 768px to greater.
- For devices have screen width from 480px up to 767px.
- For devices have screen width less than or equal 479px.

Source Options.

Category – Allow to choose categories which you want to show.
Child Category Products – Allow to include or exclude products from child categories.
Category Depth – The number of child category levels to return.
Product Order By – Allow to choose 1 of 8: Name/Model/Price/Quantity/Rating/Sort Order/Date Add/Bestseller.
Ordering Direction – Allow to select ordering direction: Ascending/Descending.
Limitation – Allow to enter the number of products to display. The default value of “0” will display all products

Product Options.

Display Title – Allow to display title of product OR not.
Title Maxlength – Max length of title by characters. Enter value 0 if you want to show all. Please enter integer number >= 0.
Display Description – Allow to display Description of product OR not.
Description Maxlength – Max length of Description by characters. Enter value 0 if you want to show all. Please enter integer number >= 0.
Display Price – Allow to show/hide price of product.
Display Add to Cart – Allow to show/hide Add to Cart button.
Display Wishlist – Allow to show/hide wishlist button.
Display Compare – Allow to show/hide Compare button.
Display Rating – Allow to show/hide rating for product.
Display Sale – Allow to display sale button or not.
Display New – Allow to display image New or not.
Date day New – Allow to enter number day of product new.
Product Image Number – Allow to show number image for product.

Image Options.

Product Image – Allow to display Product Image or Not.
Get Image From Tab Data – Allow to get image product from tab data image .
Get Image From Tab Image – Allow to get image product from tab image .
Width – Allow to set width of image.
Height – Allow to set height of image.
Place holder Path (or Url) – The path or URL of Default Image.
Width (for class one item) – Allow to set width of image.
Height (for class one item) – Allow to set height of image.

Effect.

Auto Play – Allow to Enable/Disable autoplay mode.
Auto Interval Timeout – Allow to set the speed of timer. Larger = Slower.
Pause On Hover – Allow slideshow effect stop when hover OR NOT .
Auto Play Speed – Allow to set speed of auto play.
Scroll Per Page – Scroll per page not per item. This affect next/prev buttons and mouse/touch dragging.
Mouse Drag – Allow to Enable/Disable the mouse drag OR not.
Touch Drag – Allow to set the touch drag on the smart devices OR not.
Show Pagination – Allow to Show pagination or not.
Pagination Speed – Allow to set Navigation Speed.
Show Navigation – Allow to Show Navigation or not.
Rewind Speed – Allow to enter rewind speed in milliseconds.
Effect – Allow to choose the effect for the module.
Duration – Allow to set how long animation will run (Lager = Slower).
Delay – Allow to set a timer to delay the excution of the next item in the queue (Lager = Slower).

Advanced

Pre-text – Allow to enter intro text of the module.
Post-text – Allow to enter footer text of the module.
Caching – Select whether to cache the content of this module.
Cache Time – The time in seconds before the module is recached.

4SUPPORT – Back to top

Thank you so much for purchasing this module. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

Thanks so much!