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

Promotion card

PreviousSlideshowNextGallery with text overlay

Last updated 8 months ago

Koto theme provides a section, namely "Promotion card" in this section, you can show the offer and sale. You can display a maximum of Eight Offers in this section.

Setting
Description

Color scheme

In this section, you can change the background and foreground color of a section using the color scheme.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

Layout

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

  • Wide

  • Container

Heading

Text

Enter text to defines the main heading of the section.

Text color

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

Size

Following is the font size customization of the heading of the section:

  • Small

  • Medium

  • Large

Alignment

Customization of the "Alignment" in this is as follows:

  • Left

  • Center

View all button

Label

Use "Label" to add a label to the Button in the 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

Stretch image to fill

Enable this checkbox to zoom image of this section.

Background color

You can customize the background color when image is not strech.

Display type

Customization of the "Display type" in the promotion card is as follows:

  • Grid

  • Carousel

Number of columns on desktop

"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “3” and a maximum of “6” columns.

Image ratio

In the section, Image size customization is as follows:

  • Adapt to image

  • Portrait

  • Square

Banner number

Show number over the image

Enable this checkbox to show number on image of this section.

Background color

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

Foreground color

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

Border color

You can customize the border color of the number by using the color option.

Corner radius

"Corner radius" is to customize the radius of number in the section. You can set radius minimum “0” and a maximum “40” px.

Text

Size

Customization of "Text size" is as follows:

  • Small

  • Medium

  • Large

Alignment

Customization of "Text alignment" as follows:

  • Left

  • Center

  • Right

Carousel

Style

This feature specifies the design and appearance of carousel controls like below:

  • None

  • Dots

  • Arrows

Disable arrows in mobile

Enable this checkbox to hide arrow in mobile view.

Enable autoplay

Enable this checkbox to automatically rotate the images in the logo list.

Autoplay interval

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

Add Image

To add image to the promotion-card section, click on the 'Add Image. There are many options available similar to the image, as you can see in the below points and screenshot:

Block
Description

Image

Used image to add to the image in the block.

Link

Use "Link" to add a link to the block image.

Heading

Enter text to defines the image heading of the block.

Live Chat Support | Webibazaar Template
Logo