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.

But why stop at that, right? In fact, we went ahead and designed a wide range of product sashes and ribbons for you. They’re all in editable vector format so you can scale them up, flip them to different corners and change their colors to suit your website style.

This work is licensed under the Creative Commons 4.0 so feel free to use it in your personal and commercial work.

Enjoy!

Download E-Commerce Product Sashes and Ribbons (PSD)

E-Commerce Sashes by Stampede Design is licensed under a Creative Commons Attribution 4.0 International License.

The post Freebie: E-Commerce Product Sashes & Ribbons appeared first on Stampede: the strategic design & technology company.

Nowadays, there are quite a number of font icons provider out there. To name a few, they are Font Awesome, IcoMoon and Typeicons. Most of them provided different icon packs.

Out of all font icons available, I’ll easily pick Fontello as my favourite in the pack.

Why Fontello?

I found out that out of all font icons out there, Fontello provides most of the icons from other providers such Fontalico, Font Awesome, Entypo, etc. This gives me a lot of icons variations for use, and I am not the one who believes in the saying do not be spoiled by choice.

With Fontello service, I can even use my own icon as well. What I need to do is just create a svg format icon and drag it on the section provided. Easy peasy.

Another part of Fontello that I love is that the ability to choose just the icons you need. 

Other font icon providers come with CSS that include all icons. Whilst using Fontello, I just need to choose only the icon(s) that I will need to use.

Let’s also say if I need to add new icons in the future, I just need to import config.json (this comes with the file that you’ve downloaded from Fontello) on Fontello and it will highlight the icon that I have chosen on particular project.

Best of all, Fontello is also highly customisable. You can easily change class for your icons and use your own font name with Fontello, as shown in these examples – changing class name followed by changing font name.

What do you think? Do you also prefer Fontello over other font icons or are there some font icons out there that caught your fancy? I am interested to hear all about it. Comments below!

The post Fontello As My Favourite Font Icon Service appeared first on Stampede: the strategic design & technology company.

What are the processes involved?

When I was handed the assignment from project stakeholders, one of the first tasks I had to do was to establish goals and direction of this project.

I decided to tackle this by interviewing Iwan for his Royal Langkawi International Regatta (RLIR) updates experience. From the interview, I managed to gather all the information about the race that I needed. Coupled with the experience of doing the RLIR updates myself afterwards, I found that all the information given was very helpful for me.

Before all the process started, I need to understand the concept:

• The more we know what the audience wants, the more we can help them in searching for the information they are looking for.
• Less time for audience to spend looking for this information would result in happy users.

After understanding the concept, I was to locate the target demographics, the devices in use, etc. This was to specify the visible content based on most clicked area, which helps us in turning the website responsive.

From the targeted demographics, we got to establish specific focus areas according to their importance during the race week.

Finally, based on all existing asset (RLIR website artwork), I proceeded to redesign the layout for 3 different sizes of browser- full resolution desktop, tablet size, and mobile size.

My notes and sketch for the RLIR wireframe.

I also did a research on the best practices for handling dropdown navigation for the responsive. I was to understand the difference between desktop tablet and mobile usability. This way, I managed to identify what it takes to help the users interact better with responsive design.

Once all was done, I was to present the solution to team members. I admit they were very merciless during the reviews process, but this is to ensure that our work is always up to the best quality.

Responsive mobile testing on devices

Once the design part was done, I was to hand over the design assets to front end developer (it’s Iwan, in this case) for him to code it. In the meantime, I was also responsible to oversee the deployment process to make sure my design works in sync with Iwan’s code.

The product

The finished product, in all its glory.

You may also browse it here http://www.langkawiregatta.com.

So, what have I learned from this experience?

Seeing as this was my first experience on designing a responsive website, after going through the processes altogether I am now very much prepared for my upcoming responsive projects.

I also learned that even after the design process and the design is handed to the front-end developer, my responsibility does not stop there. It is important for designers to be involved in every phase of the project and I learned this by having the chance to oversee how my responsive design materialised itself into a finished product right before my eyes – and having so many people praising it too!

In conclusion, I enjoyed this project very much and I look forward for more responsive projects to come.

What do you think? We would love to hear your feedback about our work, so do share in the comments section.

The post Towards responsiveness: Part 2 appeared first on Stampede: the strategic design & technology company.

What is responsive design?

Responsive design has allowed designers and developers to create brand consistent websites that not only look incredible through a computer but will respond to the resolution settings on mobile phones and tablets. It is the ideal solution to creating separate sites.

You have one site, with all products and services and this site will respond to the device where it is being viewed through. It also incredibly clever, time saving and well, in a nutshell – a designer’s dream. It also adds a lot of convenience for users on the go, for they don’t have to go to their laptops or desktops to check the websites, instead they can directly check on their smartphones.

Royal Langkawi International Regatta

My first full-fledged responsive design website is for the upcoming Royal Langkawi International Regatta 2013. It is an annual yacht race event held in the scenic island of Langkawi, with 2013 being their 11th year of running.

This year, more than 35 yachts and over 250 sailors from about 12 countries are expected to participate. Currently the Regatta has a different website dedicated for mobile users, and although it is good enough, it is not exactly streamlined to the current main website.

This is where we step in.

Project Stakeholders

The ‘we’ I am talking about here comprised of:

1. Shaza as the design and user experience consultant
2. Zana as the project manager
3. Syazwan as the project owner

Syazwan has been instrumental in every single Regatta project. He is equipped with 4 years experience managing the website as well as being the on-site developer. Over the years, he has developed a familiar understanding of the event and the participants’ browsing behaviour.

Working closely with them, I am entrusted to update the design for the Regatta’s responsive website.

The project

To enable seamless viewing in all devices, our job is to take the existing design and extend it into a responsive website. Apart from that, we must take into account that it should enable pulling updates from a source throughout the race.

To add up more to the challenge, we are to launch the website two weeks before the race day starts on 7 January 2013, which means – very soon!

Why responsive?

With mobile traffic now accounting for around 12.5% (and rising) of all website visitors it’s high time we must start putting effective mobile design at the top of our to-do list. If we fail to do so, be prepared to be missing out on a huge sector of the market. (Source)

In the case of the Regatta, the participants rely heavily on their mobile devices to check results, race highlights and to log race disputes as they are always on the go on the days of the events. It saves time because they will not have to go do all these on their laptops or desktops.

Turning responsive will also improve the process of updating results and news on our end.

(Coming up – Towards responsiveness: Part 2)

The post Towards responsiveness: Part 1 appeared first on Stampede: the strategic design & technology company.

These are the few things I’ve learned so far:

1. White Space

White Space in Web Design

White space is the spaces around elements in the design to help them stand out or separate from the other elements. Without it, designers will stumble when establishing content hierarchy. A simple example is using white space to distinguish the relation between header and body content, and body content with the next header. White space is therefore very useful in grouping information into clusters and make for easier website reading.

Legibility (micro level)

White space at the micro level (leading, kerning, and tracking) can help improve or destroy the legibility of a Web page. This controls readibility of the text. If a web text is easier to read, the probability of user digesting the information is higher.

Tone (macro level)

White space at the macro level (spacing around the biggest objects on the page) can convey a sense of elegance or down-market quality to a design. We also use white space to naturally control user’s eye-movement and lead them from one information cluster to the other.

2. Drop shadows & Gradient

Drop-shadows and gradients are two of the most common design elements on the web. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

When using drop shadow, always remember – “The subtler, the better”.

What Do Drop-Shadows and Gradients Do?

The illusion of space connects the imaginary to a world we are comfortable living in. Visual metaphors create perceived affordance. Drop-shadows and gradients are basic tools for creating the illusion of space. By mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.

3. Masking layer

A mask is an entity which controls the behavior of a collection of pixels. Generally speaking, this control centers around the relative transparency, or opacity of a given layer or collection of layers. When combined with Photoshop’s ability to stack different layers, masks become an incredibly powerful tool, which helps give designer or digital artist with extremely precise control over the interaction between the different layers.

The Clipping Mask

Clipping mask functions more as a one-to-many type entity, in that it can actually effect multiple layers at the same time. A clipping mask is also, by its very nature, multi-purposed. While a Layer Mask exists as a modification to a layer, a clipping mask actually is a layer, which interacts with one or more of the layers directly above it.

4. Usability

Usability is making your website easy for your visitors to find the information they need, when they need it. It’s a huge ground for discussion but among the things that I’ve learned is to always include a tag for the most obvious element on a web page. Implement a 27 characters wide site search and place it on top of your website. Don’t use extensive graphics and design elements. Include a site map page and register a sitemap XML document in search engines.

Don’t break a user’s workflow. Allow every action to be canceled if necessary. Create easily scannable web content and place the most important information on top of your web page. Don’t design graphic elements that looks like a button, but is not. Present meaningful feedback and don’t forget that feedback works both ways. Use unobtrusive Javascript and graceful degradation. Avoid CAPTCHAs, use more usable methods instead.

5. Typography

I tested a variety of different fonts and sizes, and also the text leading to identify the fonts, sizes and text leading that provide best legibility and viewer readibility when designing websites.. In the process, I have come to understand the difference between font rendering in Photoshop and browsers. I also found it important that every font I use match the right tone to the design themes.

Here is the screenshot of the end result – thanks Shen for the awesome session!

6. Responsive Web Design vs. Mobile Website

Responsive Web Design

Responsive websites “respond” to their environment. It adapts to the browser screen sizes from full-view desktop, tablet and even mobile viewing seamlessly that none of the contents are missing of misbehave.

Why responsive?

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.
– Jeffrey Veen

Mobile Site

Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your business connect with customers and increase sales, but a bad mobile experience can drive your customers to your competition.

Why Mobile?

As time passes, mobile has become one of the largest medium for users to go online. Users expect their mobile experience to be as good as their desktop experience. A bad mobile experience can cost you customers. Mobile users also tend to connect with the businesses in their local area so businesses like yours can drive purchases with a mobile-friendly site.

Responsive Web Design vs. Mobile Site

Things to consider before choosing between Responsive Website or Mobile Website.

All thoughts welcomed!

As you can see, these are all new and exciting stuffs to me. I appreciate everyone’s comments, ideas, corrections and notes. I will also be sharing more web design tips and things I learn along the way at Stampede – so stay tuned. Woohoo!!

Main photo credit: Hellvetica by Rachel Katstaller

The post Things I’ve Learned So Far appeared first on Stampede: the strategic design & technology company.