Content ElementsImage Slider

Image Slider

Sana Commerce 9.2
Your connector

Add Image Slider Content Element

The "Image Slider" content element can be added to a flexi-page, product page, and product list page in Sana Admin. For example, you can add Image Slider to the home page of your web store informing customers and web store visitors about the latest news, discounts, and offers, or you can add a full screen image slider with the expanded height to use it as a web store background.

The tables below provide description of the image slider settings.

Navigation Buttons Settings

 

Field Description
Show navigation Use this option to show or hide navigation buttons in the image slider. Navigation buttons enable user to switch between images.
Previous icon This field is used to add an icon for the 'previous' navigation button.
Next icon This field is used to add an icon for the 'next' navigation button.

 

Dot Navigator Settings

Field Description
Display dot navigator Use this option to show or hide dot navigator for the image slider.
Navigator icon This field is used to add an icon for the dot navigator.
Navigator icon (on hover) This field is used to add an icon for the dot navigator (on hover).
Height of the navigator icon (in pixels) Use this field to set the height of the dot navigator icon in pixels.
Width of the navigator icon (in pixels) Use this field to set the width of the dot navigator icon in pixels.
Display navigator inside the slider Use this option to show the dot navigator inside the image slider. When it is disabled, the dot navigator is shown under the image slider. When this option is enabled, the dot navigator is shown below the image slider.

 

Auto Play Settings

Field Description
Auto play Use this option to enable and disable the auto play of images. When this option is enabled, the images are changing automatically as a slide show.
Rotation delay (in seconds) Specify time interval in seconds to switch between images automatically, when the option "Auto play" is enabled.

 

Height Settings

Field Description
Expand the slider to fill the height of the browser Use this option to expand the image slider in height. If it is enabled, the image slider will expand in height, and will be also shown behind the web store logo, search box, and header.

    If you enable this option, then don't enable the option "Fixed height".

Fixed height Enable this option, if you want to set a fixed height of the image slider.

    If you enable this option, then don't enable the option "Expand the slider to fill the height of the browser".

Height in desktop (in pixels) If you enable the option "Fixed height", then enter the height in pixels for the desktop layout that will be used for all images in the image slider. The width of all images will be automatically adjusted to maintain the aspect ratio.
Height in tablet (in pixels) If you enable the option "Fixed height", then enter the height in pixels for the tablet layout that will be used for all images in the image slider. The width of all images will be automatically adjusted to maintain the aspect ratio.
Height in mobile (in pixels) If you enable the option "Fixed height", then enter the height in pixels for the mobile layout that will be used for all images in the image slider. The width of all images will be automatically adjusted to maintain the aspect ratio.

 

Miscellaneous Settings

Field Description
Inverted logo (Use a lighter-colored logo when a dark slideshow image is displayed) If you enable the option "Expand the slider to fill the height of the browser", and the images in the image slider are of a dark color, you can add a light-colored web store logo, which will be used instead of the default one and shown on top of the image slider.
Images transform as Use this field to define image transition that occurs in slide show view when you move from one image to the next.

There are two types of transitions:

  • Slide - the current slide smoothly transits to the next one.
  • Fade - the current slide gradually dissolves when the next one appears.
Expand the slider to fill the width of the browser Use this option to expand the image slider to the full width of a Web browser. If you enable this option and the option "Expand the slider to fill the height of the browser", the image slider can be used as a web store background, for example.
Expand the image to fill the width of the page Use this option to expand images to the full width of the page.
Number of images to display at a time Enter the number of images which must be shown simultaneously in the image slider. The default number of images is set to 1.

You can also use this option to create image carousel. This might be useful when you need to show logos of different brands you are selling, for example.

   If the number of images set in this field equals to the number of images added to the image slider, then all images will be shown simultaneously in the image slider on a page. The height of the image slider will be adjusted to display all images. The number of images which must be shown at a time must not exceed the number of available images.

Space between the images (in pixels) Use this field to define space between images in pixels, if you set up to show several images at once in the image slider.

 

Image

You can add as many images to the image slider as you need.

Field Description
Title Add an image title. It is shown in the middle of the image and only if the option "Expand the slider to fill the height of the browser" is enabled.
Title color Specify the title color. The default color is white. The image title is shown only if the option "Expand the slider to fill the height of the browser" is enabled.
Subtitle Add an image subtitle. It is shown under the title, in the middle of the image, and only if the option "Expand the slider to fill the height of the browser" is enabled.
Subtitle color Specify the subtitle color. The default color is white. The image subtitle is shown only if the option "Expand the slider to fill the height of the browser" is enabled.
Button text Add the text which will be shown on a button. The button is shown under the subtitle, in the middle of the image, and only if the option "Expand the slider to fill the height of the browser" is enabled.
Button text color Specify the button text color. The default color is white. The button is shown only if the option "Expand the slider to fill the height of the browser" is enabled.
Button link Add an internal web store page or an external URL to the button. Clicking on the button will open the linked page.
Image path Add an image to the image slider.
Link Any internal web store page or an external web site can be linked to the image. If the internal web store page or the external web site is linked to the image, clicking on the image in the image slider will open that page.

To link the internal web store page to the image, you can search for it by title or URL.

You can also create a blank page that will be automatically linked to the image. You can manage this web page later.

Content ElementsImage Slider