How to set up Slideshow


Web Content > Slideshow

Slideshow is usually being placed at the top portion of the store's homepage. Slideshow is commonly used for showcasing sales promotions, new arrivals and festive greetings.

To create a Slideshow,

  1. Go to Web Content > Slideshow
  2. Click New



You will then be shown the following page.


Descriptions :

  1. Slider Name
    • Give a name for this Slideshow
  2. Slider Width
    • Refer here for the banner width before creating any new banners so that the banners fit properly
  3. Slider Height
    • Refer here for the banner height before creating any new banners so that the banners fit properly
  4. Flat Slider
    • Choose yes for flat styled slider 
  5. Show Bullet
    • Select either Bullet, Thumbnails or None. This will be shown at the centre bottom of the Slideshow.
      • Bullet

      • Thumbnails

  6. Show Nav. Arrow
    • Select Yes if you want to display the navigation arrow on the Slideshow
  7. Slideshow Speed (ms)
    • Adjust the Slideshow presentation speed here
  8. Layout Type
    • Determine whether the horizontal length of this Slideshow (Fixed or Full Width)
      • Fixed

      • Full Width

  9. Save
    • Click to save and continue
  10. Add Slide
    • Click here to add banners to this Slideshow


Upon clicking Add Slide, the following page will be displayed.


Descriptions :

  1. Status
    • Turn the Status to On when you want to display this banner in the slideshow
  2. Image Display
  3. Transition Slider Effect
    • Determine the animation effect on how this banner is going to be presented in the Slideshow
  4. Sort Order
    • Arrange the display sequence of banners in the Slideshow by assigning numbers in ascending order
  5. URL Link
    • Enter the last part of the website link here (e.g. www.storename.com/men, you just key in "men" in the field), if applicable
    • Check the box if you want to open the link in a new window
  6. Add Elements To The Slider (This is optional, see image and description below)
  7. Click Save

Descriptions :

  1. Click (+) to add a new elements to this banner
  2. Turn the Element Status to On to enable this element on the banner
  3. Select the desired Element Type (Text/HTML or Image)
  4. Input the content according to the selected Element Type
  5. Define the horizontal position of the element in Position X
  6. Define the vertical position of the element in Position Y
  7. Determine the type of Animation Class 
    • This will determine the moving direction and length of movement for this element.
    • For example, if you choose Long From Right or Short From Right
      • For other type of classes, be it left, top or bottom, it will work the same way (just from different direction).
  8.  Determine the type of Animation Easing
    • This will determine how the element will move in the first half of its journey.
    • Preview and compare different type of Easing : Reference 1 and Reference 2
  9. Determine the type of Animation EndEasing
    • This will determine how the element will move and stop in the second half of its journey.
  10. Define the Animation Speed in ms
  11. Define the Animation Delay in ms
  12. Advanced Element Styling is only for those who are familiar with CSS coding. This is used to further enhance the style of the element.
  13. Click Save to save all the changes
  14. Repeat the steps above to add more banners to the Slideshow

 

 

Then click Slideshow positions to configure the slider position



Upon clicking Slideshow positions, the following page will be displayed.



Description:

  1. Slider
    • Choose which slider to configure its position
  2. Layout
    • Choose which page to display the slider
  3. Position
    • Determine the position of the slider in the chosen page
  4. Sort Order
    • Arrange the display sequence of banners in the Slideshow by assigning numbers in ascending order
  5. Status
    • Turn the Status to On when you want to display this banner in the slideshow
  6. Delete
    • Click to delete
  7. Add Item
    • Click to add more sliders to configure their position 
  8. Manage Slideshow
    • Click to go back to Slideshow setting page
  9. Click Save

 
Sample Screenshot of Slideshow Banners in the store




Was this answer helpful?

 Print this Article

Also Read

What are Banners

Web Content > Banners Banners are usually used for advertisement and promotion purposes, as...

How to create Product Slider

Web Content > Product SliderTo create a Product Slider, Go to Web Content > Product Slider...

What can you do with Text Block

Web Content > Text BlockText Block is a very versatile advanced feature. It is advisable to be...

How to set up Instagram Gallery

Web Content > Text Block & Settings > Theme Options Before setting up the Instagram...

How to create an Image Gallery

Web Content > Image GalleryTo create an Image Gallery, Go to Web Content > Image Gallery...

Powered by WHMCompleteSolution