{"id":6412,"date":"2014-03-27T06:37:10","date_gmt":"2014-03-27T06:37:10","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=6412"},"modified":"2025-12-03T10:57:34","modified_gmt":"2025-12-03T10:57:34","slug":"magento-color-swatches","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento-color-swatches\/","title":{"rendered":"Magento (OpenMage) Color Swatches"},"content":{"rendered":"<p>Magento Color Swatches is the useful tool for the configurable product where it shows the swatches with option. It will work with configurable product and work for all attribute added as swatches.<\/p>\n<div class=\"panel panel-success\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">Installation Of\u00a0Magento Color Swatches<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>Its pretty easy you just need to move all folder (app, js, media) into Magento root that\u2019s it.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/120.png\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/120.png\" loading=\"lazy\" \/><\/a><\/p>\n<p>After moving both the folder flush the cache from Magento admin module. Under <b class=\"black\">System &gt; Cache management<\/b>.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/29.png\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/29.png\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\"><i class=\"fa fa-arrow-right\"><\/i>Admin Configuration For\u00a0Magento Color Swatches<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<p>It&#8217;s pretty easy to set the color swatches setting. You have to enter those attribute in which you want color swatches.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/38.png\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/38.png\" loading=\"lazy\" \/><\/a><\/p>\n<p>After saving configuration edit those attributes.<\/p>\n<p><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/411.png\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/411.png\" loading=\"lazy\" \/><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\">Magento Color Swatches At\u00a0Front End<\/h3>\n<\/div>\n<div class=\"panel-body\">After adding it to admin move to front end. Here a product having the swatches attribute it looks like this screenshot.<a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/56.png\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/56.png\" loading=\"lazy\" \/><\/a><br \/>\n<a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/66.png\"><img decoding=\"async\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/66.png\" loading=\"lazy\" \/><\/a><\/p>\n<p>That\u2019s all for the <strong>Magento Color Swatches<\/strong>, still have any issue feel free to add a ticket and let us know your views to make the module better <a href=\"http:\/\/webkul.uvdesk.com\" target=\"_blank\">webkul.uvdesk.com<\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Magento Color Swatches is the useful tool for the configurable product where it shows the swatches with option. It will work with configurable product and work for all attribute added as swatches. Installation Of\u00a0Magento Color Swatches Its pretty easy you just need to move all folder (app, js, media) into Magento root that\u2019s it. After <a href=\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":17,"featured_media":22785,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,599,1149,302],"tags":[],"class_list":["post-6412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-magento-1-8","category-magento1-9","category-magento2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento color swatches<\/title>\n<meta name=\"description\" content=\"Magento color swatches useful extension for providing color option for your ecommerce website products image. This module support all magento version.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento color swatches\" \/>\n<meta property=\"og:description\" content=\"Magento color swatches useful extension for providing color option for your ecommerce website products image. This module support all magento version.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-27T06:37:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T10:57:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vipin Sahu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vipin Sahu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\"},\"author\":{\"name\":\"Vipin Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fa4c40a8db600fcc1a577383d8cffb23\"},\"headline\":\"Magento (OpenMage) Color Swatches\",\"datePublished\":\"2014-03-27T06:37:10+00:00\",\"dateModified\":\"2025-12-03T10:57:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\"},\"wordCount\":169,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png\",\"articleSection\":[\"magento\",\"Magento 1.8\",\"magento1.9\",\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\",\"name\":\"Magento color swatches\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png\",\"datePublished\":\"2014-03-27T06:37:10+00:00\",\"dateModified\":\"2025-12-03T10:57:34+00:00\",\"description\":\"Magento color swatches useful extension for providing color option for your ecommerce website products image. This module support all magento version.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento-color-swatches\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento-color-swatches\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento (OpenMage) Color Swatches\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/fa4c40a8db600fcc1a577383d8cffb23\",\"name\":\"Vipin Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6314b14f75289e2f7427a6d2fa4f23107bc96adadf9dd7db99164ad4e82932c5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6314b14f75289e2f7427a6d2fa4f23107bc96adadf9dd7db99164ad4e82932c5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vipin Sahu\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/sanchit\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Magento color swatches","description":"Magento color swatches useful extension for providing color option for your ecommerce website products image. This module support all magento version.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento-color-swatches\/","og_locale":"en_US","og_type":"article","og_title":"Magento color swatches","og_description":"Magento color swatches useful extension for providing color option for your ecommerce website products image. This module support all magento version.","og_url":"https:\/\/webkul.com\/blog\/magento-color-swatches\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2014-03-27T06:37:10+00:00","article_modified_time":"2025-12-03T10:57:34+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png","type":"image\/png"}],"author":"Vipin Sahu","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Vipin Sahu","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/"},"author":{"name":"Vipin Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fa4c40a8db600fcc1a577383d8cffb23"},"headline":"Magento (OpenMage) Color Swatches","datePublished":"2014-03-27T06:37:10+00:00","dateModified":"2025-12-03T10:57:34+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/"},"wordCount":169,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png","articleSection":["magento","Magento 1.8","magento1.9","Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento-color-swatches\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/","url":"https:\/\/webkul.com\/blog\/magento-color-swatches\/","name":"Magento color swatches","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png","datePublished":"2014-03-27T06:37:10+00:00","dateModified":"2025-12-03T10:57:34+00:00","description":"Magento color swatches useful extension for providing color option for your ecommerce website products image. This module support all magento version.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento-color-swatches\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2014\/03\/Color-Swatches-Blog-Banner.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento-color-swatches\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento (OpenMage) Color Swatches"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/fa4c40a8db600fcc1a577383d8cffb23","name":"Vipin Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6314b14f75289e2f7427a6d2fa4f23107bc96adadf9dd7db99164ad4e82932c5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6314b14f75289e2f7427a6d2fa4f23107bc96adadf9dd7db99164ad4e82932c5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vipin Sahu"},"url":"https:\/\/webkul.com\/blog\/author\/sanchit\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/6412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=6412"}],"version-history":[{"count":30,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/6412\/revisions"}],"predecessor-version":[{"id":515177,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/6412\/revisions\/515177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/22785"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=6412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=6412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=6412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}