The ultimate descrambler for Shopify variants

The goal of this tutorial is to show how to “descramble” a long list of variants in Shopify using JavaScript.

The code will work for any number of variants. It will also work for any number of categories of variants. For example, you could sell a pen with these three categories of “variation”: quantity, precision in points (fine, extra-fine, etc.), and color. Other products you sell may hold a different list of options for quantity, type and color — and that's all good. Some other products may have different categories of variants altogether, or just more categories. Still all good. The code will actually parse through the variants titles and create select elements based on what is available on a per-product basis.

The following is not a screenshot. Pick something.

Hard to find anything in there. JavaScript will simplify that.

We want to present visitors with one drop-down select box per hard attribute your product has (for example, one for quantity, and one for color...). By hard attribute, I mean an attribute that justifies the creation of Shopify variants — any attribute that affects pricing. In our little example case, we assume that the color does affect pricing. But it is also possible to add to the mix a pure JavaScript attribute for color, as I explain in this other tutorial.

Here is a way to select a variant that is much easier on the eye:

This method uses JavaScript and is cosmetic. With JavaScript disabled in the browser, your visitors will still be able to pick any variant they want but will need to locate it in your list. If you do have a long list of variants, this tutorial may prove useful. If not... what are you doing here? ;-)

A shop has been created to which the modifications presented in this tutorial have been applied. The theme is based on the caramel version of the Vogue theme by Jared Burns. Feel free to visit the 11heavens Popsicles website and view its source. If you use Firefox and have the Firebug add-on, type the word Descrambler in your console. This object holds a lot of information and will help you debug your own code. We will create and use the Descrambler object in this tutorial. If you do not know what a JavaScript object is, don't worry. It will all become clear as you read along.

 Read more →


Adding a note to your cart and modifying email templates

Adding a special instruction field to your cart page

Users who browse without JavaScript have been instructed to specify their chosen options in a special instruction text box on the cart page. Now, we will add this special instruction box. Read more →


Working on the cart page

Now that we've covered what needed to be done on product pages, we will move our attention to the cart page. Read more →


Working on the product pages

There shouldn't be a radio button next to that single variant

The Vogue theme (the one I am basing this tutorial on) is good to go for several variants. It presents a list of options on the product page, to buy either variant 1 or variant 2 etc. of a product. The problem with that XHTML is that you are still presented with a radio button when only one variant of the product is available for purchase, as is the case here. If there is no option for you to choose from, there ought to be no radio button to tick. We will clean that up. Read more →


Using the jQuery library

I will be using the jQuery library in this tutorial, but you should use any JavaScript library you know well. Work with what you know and love. Read more →


A store that sells bags

Let's start with a context, as a context makes the whole process fun. You want to sell bags and you signed up for a Basic Plan. That plan gives you 100 SKUs. 100 SKUs means 100 variants. That's a little restrictive for you as you have 80 bags to sell, but that'll do. However, each of your bags come in 3 different types of 'material' and 4 different colors, so what to do? Read more →


Multiple attributes without variants in Shopify

As promised over there, I will present you with the algorithm and the JavaScript code needed to implement multiple attributes for products in Shopify without variants. With this method, you are not squandering any of your precious SKUs.

You will present your visitors with one drop-down select box per attribute your product has (for example, one for size, and one for color...). The method works for an unlimited number of attributes, ie. two, three, whatever. The chosen options for the cart items attributes will be stored in a web cookie and submitted to Shopify's 'back-end' during the checkout process. This method uses JavaScript. Read more →


Free DOM scripting for XHTML ebook

This PDF book contains 53 pages. The book is now free, as of December 6th 2007.

Source code, table of content and sample pages are available here.

File Type Size Last update
DomScripting.pdf PDF 2.2 MB 07-02-2007

One file is attached to this posting. Login or register to download this file.


No problem with jquery

The “onclick event-handler return false” bug as described in this article does not show up in Internet Explorer 7 when ones uses the DOM scripting library jqueryRead more →

One file is attached to this posting. Login or register to download this file.


IE7 preliminary bug report: the onclick event-handler

In Internet Explorer 7 (final release, build 7.0.5730.11), we cannot, using Javascript, cancel the browser’s default action for an anchor element by setting this element’s onclick event-handler to false. One way to solve the problem is to remove the href attribute, yet let the cursor that hovers over the element remain pointy (i.e. keep the white hand with the pointing forefinger), using CSS. Read more →

Because you are not logged in, you cannot see the 2 files attached to this posting. Login or register to download these files.