A staple feature of e-commerce websites.

In Shopify, this feature may already comes standard with most of the themes or in an updated version of the current theme you are using, which is great. However in some cases you could be using a heavily customized theme and updating is not going to be a breeze, well, all you need is just a couple of lines of codes and you got yourself an upgraded product slideshow.

The Code

Paste the code below into the bottom of either template file product.liquid or snippet file product-form.liquid.

{% if product.variants.size > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    variantImage_count = 0;
  	//produce mapping between variant image and options
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
         variantImage_count++;
   	   }
    {% endfor %}

    $(function() {

      if (variantImage_count > 0) {
        $('select.single-option-selector').change(function() {
          var selected_color = $(this).val();
          thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
            var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
            if (typeof variantImages[image] !== 'undefined') {
              if(selected_color == variantImages[image]['option-0']) {
                //only check against the first option ['option-0'], which is Color (in my case)
              	$('.flexslider').flexslider(index);
              }
            }
		      });
        });
      }

    });
})(jQuery);
</script>
{% endif %}

The code is a combination of Liquid template tags and JS. It is based on the customization provided by Shopify for enabling customers to select a product variant by clicking its image and modified to work the other way around.

Line 10-30 produces the mapping between variants image and options in a JSON object that is used for comparison against the product thumbnails in the select box event handler function as seen in line 35-46. Line 42 is the actual code that tells the slideshow to jump to a specific slide. As you might have guessed, the code is unique to Flexslider slideshow plugin. You need to determine what slideshow plugin you are using and then figure out how to jump to a specific slide using its API.

I hope you find this guide useful. If you have questions/feedback, let me know in the comments.

Have a nice day!

The post Showing Selected Product Variant Image in Shopify Product Slideshow appeared first on Stampede: the strategic design & technology company.

Real quick, both services offer a wide array of base themes to get user started. It’s also worth mentioning that half of the themes on Shopify are premium themes.

The Common Traits

Both platforms use a system where the template HTML files are organized into views such as layout or snippets. They use different naming conventions but the general idea is layouts are the skeleton of the whole page and snippets are the bits of content loaded into the page. For example, a layout file could be for homepage or product category page, while a snippet is another file controlling the product loop that can be called from both layout files. Each platform has its own syntax for invoking these files and user can add new layouts and snippets. This system makes it easy to reuse repetitive codes and keeping your code tidy. Making little modifications like adding an FB Like box or a Mailchimp signup form is a piece of cake.

Both platforms also has a built-in HTLM/CSS code editor with basic key features such as a file browser and list of recently opened file. However, the BigCommerce editor has an extra handy feature which lists all the files dependent to the currently viewed file for quick access.

Now we shall compare them.

BigCommerce (BC) vs Shopify

Before we go any further, let me just break the news that Shopify hit a home run with this one. The winning formula is Shopify themes are made to be customized in the first place. Two key features that stood out are Theme Settings extension and Liquid programming language.

Theme Settings extension is fairly interesting. It allows the theme developer to tweak the settings or configuration fields of any themes. As an example, if the shop owner decided he needs to use an alternative logo when the website is viewed on a mobile phone, the theme developer can simply add a new upload field into the settings page in addition to the default logo upload field. The new variable will automatically be accessible in the template and the alternative logo can be output and controlled using CSS.

While BC templates only contain static calls to other template files, Shopify has its own template programming language called Liquid. Liquid comes with basic programming functions such as variables assignments, for-loops, conditional statements as well as a handful of cool helper functions. The code can be used both in HTML and CSS files. Here is a very nice cheat sheet.

With Liquid, a certain degree of logic can be implemented into the template such as giving different CSS class to elements based on the page currently in view. A little more advanced example is using product tags to put ribbon/sash on products in category pages. In my recent project, I tagged products with bestseller and used the following code to produce a Bestseller sash. While this can be implemented in BC using clever Javacsript tricks, I found that the tags system in BC to be a bit limited.

{% for mytag in product.tags %}
   {% if mytag == 'bestseller' %} 
      <span class="circle sd-bestseller">Bestseller</span>
   {% endif %}
{% endfor %}

Custom Bestseller product sash. On Sale was built-in.

The next thing I love about Shopify is the dedicated manager for Menus or Navigation in the admin panel. Admins can create as many menu groups as they like in addition to the default Main Menu. Then simply use the Liquid for-loop in the appropriate template file to render the menu (also in any way they like). This is how it looks in its simplest form. Of course, with a little bit more code you can also highlight the active menu item.

<ul>
   {% for link in linklists['footermenu1'].links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
</ul>

Once the menu structures are implemented in the template this way, it will be very easy for store admins to add or remove menu links without having to alter the template file directly.

Another feature that works very well with the menu manager is Smart Collection. A collection is Shopify’s way of saying category. A smart collection is somewhat a dynamic category where products are automatically assigned based on the rules defined to the category for example, if a product has a specific tag or if it falls between a specific price range. A menu can be made to link to the smart collection which gives a “product filter” sense of interaction when it is placed strategically on the page.

The next exciting feature Shopify has to offer is Apps to extend the functionality of your online store. There are hundreds of them but a particular one that has proved to be essential is the meta fields app, which allows the user to define additional generic text fields to products. Outputting these extra text can be done effortlessly using simple template tags. With custom meta fields, designers would have far more design flexibility when customizing the theme.

BC’s Redeeming Features

The one limitation of Shopify that I noticed is the checkout pages are off-limits to HTML modifications. Therefore, you won’t be able to place any special text or move the layout around. This could be due to the fact that a code mistake can cause the whole checkout process to break. CSS changes is still permitted though. BC on the other hand allows their checkout pages HTML structure to be modified.

One little bonus feature of BC is the template files can be accessed via FTPS or WebDAV. This can be really useful in circumstances where you need to make a directory-wide search or batch search and replace task using your local IDE.

Final Words

Working with BC and Shopify have been a great learning experience. But if I had to choose which one I enjoyed more, it has to be Shopify!

The post Customizing BigCommerce and Shopify appeared first on Stampede: the strategic design & technology company.