Koto Documentation
  • Webibazaar Support
  • Koto Shopify
  • Header
    • Announcement bar
    • Header section
    • Mega menu
    • Collection icons
    • Secondary menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Sections
    • Slideshow
    • Promotion card
    • Gallery with text overlay
    • Featured collection
    • Image with text
    • Rich text
    • Logo list
    • Featured product
    • Multiple video with products
    • Blog posts
    • Social media
    • Text with icons
    • Map
    • Collection list
    • Multicolumn
    • Collapsible content with image
    • Newsletter
    • Contact form
    • Video
    • Notice
    • Scrolling promotion
    • Single banner
    • Promotion code
    • Category products
    • Testimonial
  • Footer
  • Theme Settings
    • Logo
    • Colors
    • Typography
    • Layout
    • Advanced
    • Sticky bottom bar
    • Inputs and buttons
    • Carousels
    • Corner radius
    • Product cards
    • Badges
    • Social media
    • Search
    • Currency format
    • Cart
    • Custom CSS
  • Product page
    • Quick order list
  • Collection Page
    • Collection banner
  • Color swatches
  • Page
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Combine listing
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  1. Sections

Slideshow

PreviousSectionsNextPromotion card

Last updated 8 months ago

The slideshow allows multiple slides to display with images and optional text. This section allows you to add a slideshow in full width or grid. There are many options available similar to the slideshow, as you can see in the below screenshot:

Recommendation Size Slideshow image desktop size: 1920x540 Slideshow image mobile size: 767x700

You can add a slideshow section to display a carousel of images on a page in your store.

Setting
Description

Layout

Customization of the "Layout" in the Slideshow section is as follows:

  • Wide

  • Container

Enable center slide

Enable this checkbox to show center slide of this section.

Slide height

Customization of the "Slide height" in the Slideshow section is as follows:

  • Adapt to first image

  • Small

  • Medium

  • Large

Carousel

Transition effect

Customization of the "Transition effect" in the Slideshow section is as follows:

  • Slide

  • Cards

  • Coverflow

Enable loop

Enabling loop will result in the slides continuously looping. Enable autoplay

Enable this checkbox to automatically rotate the images in the slideshow.

Autoplay interval

Use the bar to set the auto-rotate time of the slideshow. You can set a minimum of “3” seconds and a maximum of “9” seconds.

Navigation

Enable arrows

Enable this checkbox to show slider arrow in this section.

Disable arrows in mobile

Enable this checkbox to hide slider arrow in mobile view of this section.

Background color

You can customize the background color of the navigation by using the color option.

Foreground color

You can customize the foreground color of the navigation by using the color option.

Pagination

Position

Customization of the "Position" in the Slideshow section is as follows:

  • Over the image

  • Below the image

Style

Customization of the "Style" in the Slideshow section is as follows:

  • None

  • Dots

  • Bars

  • Counter

  • Numbers

Background color

You can customize the background color of the Pagination by using the color option.

Foreground color

You can customize the foreground color of the Pagination by using the color option.

Animations

Customization of the "Image behavior" in the Slideshow section is as follows:

  • None

  • Ambient movement

By employing the Ambient movement feature, the slider images will exhibit motion.

Mobile layout

By enabling this checkbox, you can view the slide content below the image in a mobile device.

Accessibility

Describe the slideshow for customers using screen readers.

Add Slide

To add slides to the slideshow section, click on the 'Add Slide'. There are many options available similar to the slideshow, as you can see in the below points and screenshot:

Block
Description

Slide

Image

Use "Image" to add the image to the slide.

Mobile image

Use "Mobile image" to add the mobile image to the section. this is optional because it will take desktop image when mobile image will not be added.

Subheading

Text

Enter the text you would like to display as a sunheading before the slide's heading.

Size

Customization of the "Subheading size" in the slide is as follows:

  • Small

  • Medium

  • Large

Heading

Text

Enter text to display as a title in the slide.

Size

Customization of the "Heading size" in the slide is as follows:

  • Small

  • Medium

  • Large

Show border below the heading

Enable this checkbox to show border below the slide heading of this slide.

Description

Text

Enter the text you would like to display as a description of the slide.

Size

Customization of the "Description text size" in the slide is as follows:

  • Small

  • Medium

  • Large

Button

Label

Use "Label" to add a label to the Button in the slide.

Show arrow

Enable this checkbox to show arrow in button slide of this slide.

Link

Use "Button link" to add a link to the Button in the slide.

Style

Customization of the "Button style" in the slide is as follows:

  • Link

  • Outline button

  • Solid button

Desktop content position

To change the position of the content on the slide, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the slide is as follows:

  • Top left

  • Top center

  • Top right

  • Middle left

  • Middle center

  • Middle right

  • Bottom left

  • Bottom center

  • Bottom right

Desktop content alignment

Customization of "Desktop content alignment" in desktop devices is as follows:

  • Left

  • Center

  • Right

Color scheme

In this section, you have the option to modify the background and foreground colors of a slide's content container using the provided color scheme.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

Mobile layout

Mobile content alignment

Customization of "Mobile content alignment" in mobile devices is as follows:

  • Left

  • Center

  • Right

Content position on bottom

Enable this checkbox to show the slide content below the image in mobile view.

Live Chat Support | Webibazaar Template
Logo