How to display products with effects ?

Hikashop Business gives you the opportunity to display a carousel with plenty of effects for categories and products listings modules.

A six products slider in one column:

First of all, you have to activate it by turning on the option “Enable carousel” in the options of a products listing module that you have already created to display the products you want. You can do that by editing the module via the menu Display-> Content modules of the HikaShop backend.

1. Type Of carousel effect: Slide
2. The selected category (on the left) defines the products to be displayed (here : shoes / kids)
3. Transition effect: Quadratic
4. Carouseleffect duration: 1000

Thanks to two parameters (3+4), you can easily define the speed of the carousel and the way the carousel is sliding.  Please note that the border around the products is made by the option “Item box border” (at the bottom).

Once the effect type is configured, to have an great control over the products organization. You have to defined in the field “Product per slide”. But this field doesn’t work by itself, you also have to choose the number of columns (on the left) to decide how products will be organized. If you choose 2 columns, you will have the same thing as presented. But if you enter “1”, the products will be vertically aligned.

Three products in a fade:

Here, we have a fade effect showing 3 products in 3 columns.

To enable moving automatically functionality, just activate the “Auto-slide” parameter. You can also define the duration between two slides. You can chose here how to display the carousel pagination. We selected here a thumbnail pagination, and put it on the right. As you can see, there is no dimension specified here, so the thumbnail size are 1/8 of the the product pictures. But you can specify a width and a height as in the first example. Note that when the auto-slide is enabled, the selected thumbnails are also changing.

This carousel also have a special effect applied on the product. This effect come from the selected layout. Three animated layouts are available in Hikashop Business, vertical and horizontal slide, and a fade effect. When you select one of these layouts, some new options will be displayed allowing you to configure more precisely the effect.

Infinite slide:

This is an interesting example of what you can do with all the carousel options. To obtain this result, we used the auto-slide options and the effect.

The trick to get this effet of infinite sliding is to set the same duration for the effect and for the auto-slide duration. When the slide effect is done, the auto-slide waiting time is reached and a new slide starts immediately. Note that you have to choose the “Linear” transition to get this result.
Regarding the other parameters of this carousel, you can see that the pagination used here is “dots” (which add these dots at the bottom of the carousel), and that the carousel buttons aren’t enabled.

You can define here the dimension of the pictures which will be displayed on your carousel. As you can see in this screenshot, if one of the fields is empty, the other will be automatically calculated. Thanks to that, you don’t have to choose a perfect dimension for all your pictures. The layout selected is here a simple image, that explains why the classical informations aren’t displayed (price, name…).

One product exposition:

Here, we decided to highlight products one at a time by having only one product displayed per slide. For that, we set the number of columns to 1 and the number of products per slide to 1. Next, we defined the size of the image to get a large picture of our product, and selected the “Pane” layout (which is a simple presentation of the product).

You can also see that the pagination is here “Name”. With this pagination you will get the products name with the slide number before. Note that you can easily modify the CSS class of the product name to get something which match the design of your website. Here is the configuration page

• Author
• Recent Posts

Document Team

Hi,
We're document team, we write document for all products from our company. You can reach our Document Portal. If you have any questions or problem during using our products, feel free drop comment, we will come to help you shortly.

Latest posts by Document Team (see all)

• JS Jobs Data Dictionary: How to Add New Entity? - January 3, 2017
• JS Jobs Categories: How to Add New Categories? - December 30, 2016
• JS Jobs Message System: Front End Messages - December 30, 2016