Can I integrate an Internal zoom on my products in my big cartel store?

Question

I've got a platinium plan in Big Cartel. I'm happy with the design of the site but would like to integrate an internal zoom on each product when mouse rolls over the product. I've found Wordpress options but I was wondering if it's possible in Big Cartel and what was the process to follow?

Answer 1

Since you have a store on the Platinum plan that allows for code editing, you have quite a few options here. Most of the default Big Cartel themes have jQuery included so finding a plugin that uses jQuery would probably be your best bet.

Here's one example of a plugin: http://www.elevateweb.co.uk/image-zoom

With this example, you'd just need to upload their jquery.elevatezoom.js file to a separate server, and include it in your store's Layout file.

You can then edit the code on your individual Product page (using the Luna theme code as an example):

<img src="{{ image | product_image_url: "fullsize" }}" class="fade_in" alt="Image of {{ product.name | escape }}">

Can be changed to:

<img id="product_zoom" src="{{ image | product_image_url: "fullsize" }}" data-zoom-image="{{ image | product_image_url: "fullsize" }}" class="fade_in" alt="Image of {{ product.name | escape }}">

Then just use the following code to activate:

$("#product_zoom").elevateZoom();

Hope that helps!