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

Collection filter color swatch from metaobject

PreviousContinue selling when out of stockNextQuick Links

Last updated 3 months ago

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 > Custom data > 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