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.

If you want to add the full screen image slider and to use it as a background of your web store on the home page for example, you must select the "Expand the slider to fill the height of the browser" height type in the height settings and enable the option "Expand the slider to fill the width of the browser" in the miscellaneous settings. You can create a flexi-page with only one full-height and full-width image slider, and make it as a home page of your web store. This image slider must be the first content element on the page.

Read the detailed description of all image slider settings below and set up it the way you need.

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 inside 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
Height Type 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 select this option and enable the option "Expand the slider to fill the width of the browser", the image slider can be used as a web store background, for example.

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

Height in desktop (in pixels) If you select the option "Fixed Height" in the "Height Type" field, 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 select the option "Fixed Height" in the "Height Type" field, 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 select the option "Fixed Height" in the "Height Type" field, 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 select the option "Expand the slider to fill the height of the browser" in the "Height Type" field, 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. If you add the inverted logo, make sure that it is of the same size as your default logo.
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. You can apply some styles to the title, but don't add other images to the title using the editor.
Title color Specify the title color. The default color is white.
Subtitle Add an image subtitle. It is shown under the title, in the middle of the image. You can apply some styles to the subtitle, but don't add other images to the subtitle using the editor.
Subtitle color Specify the subtitle color. The default color is white.
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.
Button text color Specify the button text color. The default color is white.
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. You must add images to the image slider of the proper size. If you create the full-width image slider, the width of the images must be not less than 1920px. If you create the image slider of a fixed size, you can create the images of a smaller size.

The size of the images depends on the size of the image slider you are setting up and screen resolution. Keep in mind those points, when you create images for 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