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

Collection filter color swatch from metaobject

PreviousContinue selling when out of stockNextQuick Links

Last updated 23 days ago

CtrlK

display the color swatch using the metaobject in the collection filter, follow the steps below

  • From your Shopify admin, go to Settings > Custom data.

  • Click on "Add definition".

  • Add the desired name if needed and Add field.

  • Select File type.

  • Add the desired name if needed and Accept all file types, then click on Add button.

  • To add a second field, click on 'Add Field' again.

  • Click on "Single line text".

  • Add the desired name if needed and click on "Use as filter in metaobject index", then click on Add button.

  • The metaobject fields you created will be displayed. Then click 'Save'.

  • From your Shopify admin, go to Settings > Metafields and metaobjects > Products.

  • Click on "Add definition".

  • Add the desired name if needed. The name you add here will be displayed in the collection page filter. then click on Select type.

  • Click on "Metaobject".

  • Select the "Reference".

  • Click on created metaobject, then select the "List of entries" and Save.

  • From your Shopify admin, go to Content > Metaobjects.

  • Click on "Add entry".

  • Select the image you want to display in the color swatch filter and add a label, Then Save.

  • Install the "Search & Discovery" app and open it.

  • Click on "Filters" and Add filter.

  • Select the source.

  • Select the metafield for the name that you created in the product here and Save.

  • From your Shopify admin, go to Products and select any one product.

  • Select the entry you added in the metaobject under the content section here and Save.

  • The color swatches created from the metaobject will be displayed within the filter on the collection page.

Live Chat Support | Webibazaar Template
Logo