{"id":255,"date":"2014-05-30T10:59:49","date_gmt":"2014-05-30T10:59:49","guid":{"rendered":"http:\/\/mage-extensions-themes.com\/wiki\/?page_id=255"},"modified":"2017-05-11T12:26:06","modified_gmt":"2017-05-11T12:26:06","slug":"shop-by-color-installation","status":"publish","type":"page","link":"http:\/\/global-ecommerce-services.com\/wiki\/shop-by-color-installation\/","title":{"rendered":"Shop By Color Installation"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Table of Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Overview\"><span class=\"toc_number toc_depth_1\">1<\/span> Overview<\/a><\/li><li><a href=\"#How_to_install_Shop_by_Color_Extension\"><span class=\"toc_number toc_depth_1\">2<\/span> How to install Shop by Color Extension<\/a><\/li><li><a href=\"#How_to_uninstall_the_Shop_by_Color_Extension\"><span class=\"toc_number toc_depth_1\">3<\/span> How to uninstall the Shop by Color Extension<\/a><\/li><\/ul><\/div>\n<h2><span id=\"Overview\">Overview<\/span><\/h2>\n<p>Shop by Color is a nice feature for your Online Store. This feature will give customers a new look on your Online Store products. It adds value to the customers when the customer is able to shop by color and select their products.<br \/>\n<a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color_mage-site.png\"><img decoding=\"async\" loading=\"lazy\" class=\"extlogo alignright wp-image-256\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color_mage-site.png\" alt=\"Shop by Color\" width=\"178\" height=\"185\" \/><\/a><\/p>\n<h2><span id=\"How_to_install_Shop_by_Color_Extension\">How to install Shop by Color Extension<\/span><\/h2>\n<p>1. Take a backup of the Magento files before replacing<\/p>\n<p>2. Extract the files inside Magento Installation Root<\/p>\n<p><em>Magento_App_Root<\/em> folder is same as your Magento Installation directory<\/p>\n<p>3. Folder structure for default theme<\/p>\n<p>\\Magento_App_Root\\app\\design\\frontend\\default\\&lt;default&gt;\\template<\/p>\n<p>Where &lt;default&gt; folder is based on default theme. Please copy the template folder into your specific theme folder<\/p>\n<p>For Magento 1.4.x, 1.5.x, 1.6.x, 1.7.x the template folder structure would be:<\/p>\n<p>Magento_App_Root\/app\/design\/frontend\/base\/default\/template\/catalog\/layer<\/p>\n<p>Once the Extension files have been moved to your server,<\/p>\n<p><strong>Refresh the Cache in Cache Management<\/strong> in admin panel<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-11.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-435\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-11.jpg\" alt=\"shop-by-color-1\" width=\"966\" height=\"317\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-11.jpg 966w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-11-300x98.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-11-150x49.jpg 150w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Note: <\/strong>For \u201cDrop down\u201d and \u201cMultiple Select\u201d Attribute Type Attributes, we can upload the Option Images.<\/p>\n<p><strong>Steps to be followed in admin panel to setup Attribute Option Image<\/strong><\/p>\n<p><strong>Step 1:<\/strong> Catalog &#8211;&gt; Attributes &#8211;&gt; Manage Attributes<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-2.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-436\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-2.jpg\" alt=\"shop-by-color-2\" width=\"966\" height=\"512\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-2.jpg 966w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-2-300x159.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-2-150x79.jpg 150w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 2: <\/strong>Select the Attribute <strong>\u201cColor\u201d<\/strong> in Manage Attributes<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-3.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-437\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-3.jpg\" alt=\"shop-by-color-3\" width=\"952\" height=\"630\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-3.jpg 952w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-3-300x198.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-3-150x99.jpg 150w\" sizes=\"(max-width: 952px) 100vw, 952px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 3: <\/strong>Select <strong>\u201cManage Label \/ Option\u201d<\/strong> tab in Left Side. Here you can find the \u201cImage\u201d text to upload images for each options. Using this Browse button of \u00a0Image, you can upload the images<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-4.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-438\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-4.jpg\" alt=\"shop-by-color-4\" width=\"963\" height=\"630\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-4.jpg 963w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-4-300x196.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-4-150x98.jpg 150w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/a><\/p>\n<p><strong>Upload the images of your options<\/strong><\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-51.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-440\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-51.jpg\" alt=\"shop-by-color-5\" width=\"948\" height=\"630\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-51.jpg 948w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-51-300x199.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-51-150x99.jpg 150w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><\/a><\/p>\n<p>After uploading the images for options. \u00a0for each Option Insert the image.<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-6.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-441\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-6.jpg\" alt=\"shop-by-color-6\" width=\"906\" height=\"587\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-6.jpg 906w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-6-300x194.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-6-150x97.jpg 150w\" sizes=\"(max-width: 906px) 100vw, 906px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 4:<\/strong> Finally,Your option Images will get added to each Options, By inserting the uploaded Image.<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-72.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-full wp-image-444\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-72.jpg\" alt=\"shop-by-color-7\" width=\"961\" height=\"587\" srcset=\"http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-72.jpg 961w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-72-300x183.jpg 300w, http:\/\/global-ecommerce-services.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-72-150x91.jpg 150w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/><\/a><\/p>\n<p><strong>Step 5:<\/strong> In Frontend of website in Layered Navigation \u201cShop by\u201d box, You can view the Option Images<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-8.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-445\" src=\"http:\/\/mage-extensions-themes.com\/wiki\/wp-content\/uploads\/2014\/05\/shop-by-color-8.jpg\" alt=\"shop-by-color-8\" width=\"856\" height=\"608\" \/><\/a><\/p>\n<p><strong>Step 6:<\/strong> Add the below code in <strong>style.css<\/strong><\/p>\n<p>.optionimage\u00a0 { width: 35px; height:35px; }<\/p>\n<h2><span id=\"How_to_uninstall_the_Shop_by_Color_Extension\">How to uninstall the Shop by Color Extension<\/span><\/h2>\n<p>Please follow the instructions below to uninstall Shop by Color extension and remove from your website.<br \/>\n<strong>Step 1:<\/strong> Go to the location <strong>app\/etc\/modules\/ Globalecom_AttributeOptionImage<\/strong> file<br \/>\nFind the line of code <strong>true<\/strong><br \/>\nand change it to<br \/>\n<strong>false<\/strong><br \/>\nRefresh the Cache in admin panel-&gt;System-&gt;Cache Management<br \/>\n<strong>Step 2:<\/strong> Remove the file filter.phtml in the following location. This Path may vary as per the website theme\/template used.<br \/>\n<strong>app\/design\/frontend\/base\/default\/template\/catalog\/layer.<\/strong><br \/>\nIf there is Theme template folder then please follow this location<br \/>\n<strong>app\/design\/frontend\/default\/(Your Theme Folder)\/template\/catalog\/layer<\/strong><br \/>\nRefresh the Cache in admin panel<strong>-&gt;System-&gt;Cache Management<\/strong><\/p>\n<p>If you have any questions or issues, please contact technical support team via\u00a0<a href=\"http:\/\/mage-extensions-themes.com\/support\/\" target=\"_blank\">http:\/\/mage-extensions-themes.com\/support\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents1 Overview2 How to install Shop by Color Extension3 How to uninstall the Shop by Color Extension Overview Shop by Color is a nice feature for your Online Store. This feature will give customers a new look on your Online Store products. It adds value to the customers when the customer is able ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"http:\/\/global-ecommerce-services.com\/wiki\/shop-by-color-installation\/\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/pages\/255"}],"collection":[{"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":10,"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/pages\/255\/revisions"}],"predecessor-version":[{"id":1231,"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/pages\/255\/revisions\/1231"}],"wp:attachment":[{"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/media?parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/categories?post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/global-ecommerce-services.com\/wiki\/wp-json\/wp\/v2\/tags?post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}