How to use Magento 1.9.1.0 Configurable Swatches in Default package theme (or a custom theme)?

  • UPDATE: My answer now supports automated change of the product base image after swatch. You can also find a more detailed tutorial on how to do this including more images here.

    Magento CE 1.9.1.0 comes with a very nice new feature: Configurable Swatches. Unfortunately, this is only available for the RWD package, that comes with the default Magento installation. This is a self answered question on how to make the Magento Configurable Swatches available for the Default package. For anyone who wants to integrate the Configurable Swatches into a custom theme, this info may come in handy as well.

    Note 1: This is meant to be an introductional guide on how to make the Configurable Swatches available for Magento's Default package. This could (but may not) work for every custom theme. Always backup your original files (and database) before making any changes.

    Note 2: The swatches do work (screen shot below), but I did not yet get the product image to change automatically along with the swatches. I will try and look into this when I find some time.

    enter image description here

    Feel free to contribute by commenting and make suggestions!

  • ForMat

    ForMat Correct answer

    7 years ago
    1. Copy the folder

      app/design/frontend/RWD/default/template/configurableswatches/
      

      and its content to

      app/design/frontend/DEFAULT/default/template/
      

      (or your package template folder)

    2. Copy the file

      app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml
      

      to

      app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/
      

      (or your package template folder)

    3. Copy the file

      app/design/frontend/RWD/default/template/catalog/product/view/media.phtml
      

      to

      app/design/frontend/DEFAULT/default/template/catalog/product/view/
      

      (or your package template folder)

    4. Copy the folders

      skin/frontend/RWD/default/js/configurableswatches/
      skin/frontend/RWD/default/js/lib/
      

      and their content to

      skin/frontend/DEFAULT/default/js/
      

      (or your package skin folder)

    5. Copy the files

      skin/frontend/RWD/default/js/app.js
      skin/frontend/RWD/default/js/minicart.js
      skin/frontend/RWD/default/js/slideshow.js
      

      to

      skin/frontend/DEFAULT/default/js/
      

      (or your package skin folder)

    6. Copy the file

      app/design/frontend/RWD/default/layout/configurableswatches.xml
      

      to

      app/design/frontend/DEFAULT/default/layout/
      

      (or your package layout folder)

    7. Create the file

      app/design/frontend/DEFAULT/default/layout/local.xml
      

    If your package layout folder already contains a local.xml file, then do not overwrite it. Have a look at the changes in the next step and copy them to your version of the local.xml file.

    1. Open up local.xml and add the following code:

      <?xml version="1.0"?>
      <layout>
      
          <default>
      
              <reference name="head">
      
                      <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
                      <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
      
                      <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
                      <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
              <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
      
              </reference>
      
          </default>
      
          <catalog_product_view>
      
              <reference name="head">
      
                  <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
      
              </reference>
      
              <reference name="product.info.media">
      
                  <block type="core/text_list" name="product.info.media.after" as="after" />
      
              </reference>
      
          </catalog_product_view>
      
          <PRODUCT_TYPE_configurable>
      
              <reference name="product.info.options.configurable">
      
                  <block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers">
                              <block type="configurableswatches/catalog_product_view_type_configurable_swatches" template="configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml" />
                  </block>
                  <block type="core/text_list" name="product.info.options.configurable.after" as="after">
                  <block type="core/template" template="configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml" />
                  </block>
      
              </reference>
      
          </PRODUCT_TYPE_configurable>
      
      </layout>
      
    2. Add the following css to your styles.css file:

      /* ============================================ *
       * Configurable Swatches
       * ============================================ */
      /* Clears */
      .clearfix:after,
      .configurable-swatch-list:after,
      .product-view .product-options .swatch-attr:after {
        content: '';
        display: table;
        clear: both;
      }
      
      /* General Swatch Styling */
      .swatch-link,
      .swatch-label {
        display: block;
        border-radius: 3px;
        font-size: 14px;
        text-align: center;
        color: #636363;
        text-decoration: none;
        box-sizing: content-box;
      }
      
      .swatch-link {
        border: 1px solid #cccccc;
        margin: 0 0 3px;
      }
      .swatch-link img {
        border-radius: 2px;
      }
      .swatch-link:hover {
        cursor: pointer;
        text-decoration: none;
      }
      .swatch-link .x {
        display: none;
        text-indent: -999em;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url(../images/bg_x.png) center no-repeat transparent;
        z-index: 10;
      }
      .swatch-link.has-image .swatch-label {
        position: relative;
      }
      .swatch-link.has-image img {
        position: absolute;
        top: 0;
        left: 0;
      }
      
      .swatch-label {
        border: 1px solid #fff;
        margin: 0;
        white-space: nowrap;
        background: #f4f4f4;
      }
      
      .configurable-swatch-list {
        margin-left: -3px;
        zoom: 1;
        clear: both;
        -webkit-transform: translateZ(0px);
      }
      .configurable-swatch-list li {
        float: left;
        zoom: 1;
        margin: 0 0 0 3px;
      }
      .products-grid .configurable-swatch-list li {
        display: inline-block;
        float: none;
        margin: 0;
        vertical-align: top;
      }
      .configurable-swatch-list .not-available .x {
        display: block;
      }
      .configurable-swatch-list .not-available .swatch-link {
        border-color: #ededed;
        position: relative;
      }
      .configurable-swatch-list .not-available .swatch-link.has-image img {
        opacity: 0.4;
        filter: alpha(opacity=40);
      }
      .configurable-swatch-list .not-available .swatch-label {
        color: #aaa;
        background: #fff;
      }
      .configurable-swatch-list .wide-swatch .swatch-label {
        padding: 0 6px;
      }
      .configurable-swatch-list .not-available a:focus {
        outline: 0;
      }
      
      #narrow-by-list dd .configurable-swatch-list li {
        margin: 0 0 0 3px;
        width: 47%;
      }
      #narrow-by-list dd .swatch-link {
        border: none;
        line-height: 25px;
        margin-right: 2px;
        text-align: left;
      }
      #narrow-by-list dd .swatch-link.has-image {
        line-height: inherit;
      }
      #narrow-by-list dd .swatch-link:hover .swatch-label {
        border-color: #3399cc;
      }
      #narrow-by-list dd .swatch-label {
        background: #f4f4f4;
        border: 1px solid #cccccc;
        border-radius: 3px;
        display: block;
        float: left;
        line-height: 1.5em;
        margin: 0 5px 0 0;
        padding: 1px 5px;
        white-space: nowrap;
      }
      #narrow-by-list dd .swatch-label img {
        border: 1px solid #fff;
        border-radius: 3px;
        box-sizing: content-box;
      }
      #narrow-by-list dd .has-image .swatch-label {
        padding: 0;
      }
      
      @media only screen and (max-width: 770px) {
        #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
          clear: left;
        }
      }
      .currently .swatch-current {
        position: relative;
      }
      .currently .swatch-current .btn-remove {
        margin-top: -10px;
        position: absolute;
        right: 0;
        top: 50%;
      }
      .currently .swatch-current span {
        display: block;
        float: left;
      }
      .currently .swatch-link {
        display: inline-block;
        margin: 0 0 0 3px;
      }
      .currently .swatch-link:hover {
        border-color: #cccccc;
        cursor: default;
      }
      
      /* Other Swatch States */
      .configurable-swatch-list .hover .swatch-link,
      .configurable-swatch-list .selected .swatch-link,
      .swatch-link:hover {
        border-color: #3399cc;
      }
      
      .configurable-swatch-box {
        background: none !important;
      }
      .configurable-swatch-box select.swatch-select {
        display: none;
      }
      .configurable-swatch-box .validation-advice {
        margin: 0 0 5px;
        background: #df280a;
        padding: 2px 5px !important;
        font-weight: bold;
        color: #fff !important;
        float: left;
        display: block;
        border-radius: 3px;
      }
      .product-view .product-img-box .product-image img {
          max-width: 100%;
          max-height: 750px;
          margin: 0px auto;
      }
      .product-view .product-img-box .product-image-zoom {
          z-index: 0;
      }
      .product-view .product-image-thumbs img {
          max-width: 100%;
          max-height: 100%;
      }
      
    3. Copy the file

      skin/frontend/RWD/default/images/bg_x.png
      

      to

      skin/frontend/DEFAULT/default/images/
      

    How would you add the swatches to the individual products on Catalog/Product/List? Within default RWD you are able to select the different swatches straight from here without having to click into the product. Of course, you have to have the setting enabled in the backend: "Product Attribute to Use for Swatches in Product Listing" first.

    In addition, I would recommend adding `.product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }` to the CSS' end, as without it, you will see the last added product image when visiting a product, but when hovering, you will see the main image.

    Gallery Image is not changing on click of swatch color, can you please tell me what how to make it work?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM