Please note, this post has not been updated and may contain broken links or outdated information.

When working on the WowweeTechShop, we decided to begin with the free Solo theme, and modify it to our clients needs. One change we wanted was to not use the lightbox on product pages when a product has multiple images. Rather, we wanted something that displayed thumbs of all the product images, and when a user clicks on the thumbs, it replaces the current image. You can view the end result on the Cinemin Slice Product Page. In the end, it was a fairly simple procedure, and should be easy enough to implement for any theme. In this example, we will walk thru modifying the Solo theme. The goal here is to add the functionality while changing as little of the default theme as possible. Uses jQuery 1.4.2 or greater, so if you trying to use this on another theme, make sure you have that. I’ve applied these changes to my sample theme, so you can follow along.

Step 1: Modify templates/product.liquid

Now, we will replace all the code between
( Example) with
{% if product.images.size > 0 %}
    {% include 'product-image-rollover' %}
{% endif %}
( Example) This way, we don’t bother to include the code for the image viewer when a product has no images. Don’t worry that product-image-rollover.liquiddoesn’t yet exist. We’ll make it in the next step.

Step 2: Create a new snippet called product-image-rollover.liquid

Now we make the snippet we included in the last step. This is done to make things a bit more manageable. So, in your snippets folder, create product-image-rollover.liquid (You can copy from below, or get it here)
{% if product.images.size > 1 %} {% for image in product.images %}


{% endfor %} {% endif %}
{{ 'product-image-rollover.js' | asset_url | script_tag }}
The markup will by default show the first image associated with a product, nice and large. If there are any other images, then we generate thumbnails for the images below the main image. Don’t worry if you don’t see them yet - they are hidden by CSS included with the Solo Theme. We’ll be tackling that in Step 4. Lastly, we include a small piece of javascript which to control it all.

Step 3: Create the JS file in assets

Now, you want to create product-image-rollover.js in your assets folder.
$(document).ready(function() {
//Begin Wrapper
$('div#images div#thumbs').delegate('a', 'click', function(ev) {
    var link = this;

    $('div#image img')
        .fadeTo(500, 0.01, function() {
            $(this).attr('src', link.href);
        .bind('load', function() {
            $(this).fadeTo(500, 1).unbind('load');
//End Wrapper
When someone clicks on one of the thumbs, this JS will fade out the current image, load the new product image, and the fade the image back in. It will also add the class of ‘active’ to the link tag wrapping the thumbnail which was just clicked.

Step 4: Adding the CSS

Last but not least, you will need to give a bit of style love. For convenience, I’m not adding this to the main stylesheet. In assets create product-image-rollover.css. You can changes the styles here to dress it up a bit. With this css, we override some styles from Solo Theme.
/* screen.css Overrides - Some defaults set for Solo Theme which we don't want anymore. */
div#images div#thumbs p {
    display: inline;

div#images div#image img {
    float: none;
And then add our own. As you can see, the styles are pretty basic, and should be easy enough to modify.
/*Center the Thumbs and main image. You can change this if desired.. */
div#images div#image {
    text-align: center;

div#images div#thumbs {
    text-align: center;

/* Style the Thumbs */
div#images div#thumbs {
    padding-top: 10px;

div#images div#thumbs a{
    border: 1px solid #000;
    /* so the a tag doesnt collapse. */
    display: inline-block;
    margin-top: 5px;

div#images div#thumbs{
    border: 1px solid #cc0000;

div#images div#thumbs a:hover{
    margin-top: 0;
    vertical-align: top;
Open layout/theme.liquid and add [code lang=\"xml\" gutter=\"false\"]{{ "product-image-rollover.css" | asset_url | stylesheet_tag }} [/code] below
{{ \"theme.css\" | asset_url | stylesheet_tag }}
( Example)

And finally

And that’s pretty much it. I’ve kept the CSS in this example barebones - just the essentials. We did a bit more CSS work for the version on the WowWeeTechShop. You can also fetch all this from my test theme up on github. Most of the instructions here aren’t actually specific to Shopify Themes - you can use it for any page where you need this type of effect.


  • Use the latest version of jQuery (1.4.2). I upgraded the default Solo Theme to jQuery 1.4.2 with no ill effects. The Related Carousel, as well as the Lightbox still work.
Design & Code