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

Dynamic source of color swatch variant image

PreviousCombine listingNexthow can reset all the changes I made?

Last updated 23 days ago

CtrlK

Follow the steps to add a color entry.

  • In the Shopify admin panel, go to the Content > Metaobjects > Active

  • Click on All definitions > Color

  • Add a new entry from here

  • Here, you can add a Color name along with its Color code, otherwise you can also upload an Image

You can add images to the color swatch using the dynamic source of metafiled. Follow the below steps:

  • Go to the Products

  • Open anyone product.

  • Click on 'Add options like size or color' and select "color"

  • Select/Add required colors.

  • Click on the added color to edit it.

  • Add image here and Save.

  • When there are color swatches on the product cards and product page, the added images will be displayed.

Live Chat Support | Webibazaar Template
Logo