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

Category products

PreviousPromotion codeNextTestimonial

Last updated 8 months ago

Ideal for sales displays a collection of products such as new arrivals or adding products to any area of your store.

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 this section is as follows:

  • Wide

  • Container

Heading

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

Spacing around heading

"Spacing around heading" is to customize the spacing around heading on the desktop screen. You can set spacing around heading as a minimum of “0px” and a maximum of “30px”.

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

Description

Enter text to defines the description of the section.

Description size

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

  • Small

  • Medium

  • Large

View all button

Label

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

Style

Customization of the "View all" style in the Category products section is as follows:

  • Link

  • Outline

  • Solid

Collection

Select a collection to display products in the section.

Maximum products to show

"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.

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 “2” and a maximum of “4” products.

Product 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.

Banner

Image

Use "Image" to add the banner image to the section.

Heading

Use text to display as a banner heading in the section.

Heading size

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

  • Small

  • Medium

  • Large

Description

Enter text to defines the banner description of the section.

Description size

Following is the font size customization of the banner description of the section:

  • Small

  • Medium

  • Large

Button

Label

Use "Button label" to add a label to the Banner Button in the section.

Link

Use "Link" to add a link to the Banner button in the section. Style

Customization of the Banner button style in the Category products section is as follows:

  • Link

  • Outline

  • Solid

Content alignment

Customization of the "Banner content alignment" in this section is as follows:

  • Left

  • Center

  • Right

Show content background

Enable this checkbox to show content background.

Content background opacity

Using this settings, you have the ability to change the content background opacity. Modify the "Content background opacity" setting to increase or decrease the opacity level of the overlay on the banner content.

Content 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

Mobile layout

Number of columns on mobile

"Number of columns on mobile" is used for the customization of columns in Mobile devices.

  • 1 Column

  • 2 Columns

Live Chat Support | Webibazaar Template
Logo