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
    • How to create product template?
    • Quick order list
    • Recently viewed product
  • Collection Page
    • How to create collection template?
    • 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 2.0.1
    • Version 2.0.0
    • 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. Theme Settings

Badges

PreviousProduct cardsNextSocial media

Last updated 2 months ago

CtrlK

Use this setting to customize the "Badges" Show percentage discount, Show price differance, Corner radius and Badges color scheme.

Block
Description

Position

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

  • On product image

  • Bottom

Fonts

Customization of the "Fonts" in this section is as follows:

  • Use body font

  • Use heading font

Corner radius

Adjust the corner radius (in pixels) to control the roundness of badge corners.

Font size

Adjust the font size (in pixels) for the badge text.

Uppercase text

Toggle to display badge text in uppercase letters, creating a more prominent and bold style.

"Discount badge" customization as is follow:

Block
Description

Discount badge

Show discount as

Customization of the "Show discount as" in this section is as follows:

  • Sale

  • Save amount

  • Save percentage

Background color Choose the background color for the discount badge.

Soldout badge

Background color Choose the background color for the sold-out badge.

Color picker Choose the text color for the sold-out badge.

New Badge

Background color Choose the background color for the new badge. Color picker Choose the text color for the new badge.

Color picker Choose the text color for the discount badge.
Live Chat Support | Webibazaar Template
Logo