Content ElementsImage Slider

Image Slider

Sana Commerce 9.3
Your connector

Select all
Back Next

Add Image Slider Content Element

The "Image Slider" content element can be added to the web pages (flexi-pages, product and product list pages) and system pages of the Sana web store. 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 (only to flexi-pages) 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 and enable the option "Expand the slider to fill the width of the browser" in the Size settings. To create a full screen image slider, you must meet the following conditions:

  • The image slider must be added to the flexi-page.
  • The image slider must be the first content element on the flexi-page.
  • You should add only one full screen image slider to the flexi-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.

  You should enable this option, if you need to set up navigation button settings and if you have several images in the image slider.
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.

  You should enable this option, if you need to set up dot navigator settings and if you have several images in 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. 13 pixels is a recommended height. 
Width of the navigator icon (in pixels) Use this field to set the width of the dot navigator icon in pixels. 13 pixels is a recommended width.
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.

   You should enable this option, if you need to set up auto play settings and if you have several images in the image slider.
Rotation delay (in seconds) Specify time interval in seconds to switch between images automatically, when the option "Auto play" is enabled.

 

Size 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 height type, the option "Expand the slider to fill the width of the browser" will be automatically enabled, and the height input fields will be disabled. This image slider can be used as a web store background, for example.  If you are using this height type, the image slider must be the first content element on the page. Check also the "Inverted logo" in the "Miscellaneous settings", so it nicely fits the full-screen image slider.

    We don't recommend to use this option if you add Image Slider content element to a system page.

Fixed Height - Use this option, if you want to set a fixed height of the image slider. If you select this height type, you will be able to use either the option "Expand the slider to fill the width of the browser" or "Expand the image to fill the width of the page".
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 use the height type "Expand the slider to fill the height of the browser", this option is always enabled.
Expand the image to fill the width of the page

Use this option to expand images to the full width of a page.

    This option is available, when you select the height type "Fixed height".
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 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.
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. You should create images of a proper size, which will meet your needs.
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.

   If there is only one image in the image slider, this option will be disabled.

 

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.

     We recommend to add the title which does not exceed two lines on the image to be nicely shown.

     If you are using the <h1> or <h2> HTML tag for the title, the style from the web store theme will be applied.
Title color Specify the title color. The default color is white.

     You can change the title color, if no HTML tags are used for the title. You can use inline styles in the title to change the font color of the title with HTML tags.
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.

     We recommend to add the subtitle which does not exceed two lines on the image to be nicely shown.

     If you are using the <h1> or <h2> HTML tag for the subtitle, the style from the web store theme will be applied.
Subtitle color Specify the subtitle color. The default color is white.

     You can change the subtitle color, if no HTML tags are used for the subtitle. You can use inline styles in the subtitle to change the font color of the subtitle with HTML tags.
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.

     We recommend to add the text which does not exceed one line on the button to be nicely shown.

     The button will be shown only if there is a button text.
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.
Navigation 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.

Back Next
Content ElementsImage Slider

Sitemap

Installation

Product Versions

Links

Sana Commerce does not accept any liability for the content of this website, or for the consequences of any actions taken on the basis of the information provided. The information below should be interpreted as an example. No rights can be derived from this information.

Sana Commerce – the integrated e-Commerce solution for Microsoft Dynamics and SAP
© 2021 Sana Commerce. All rights reserved
Updated: January 2021