Syndicate

Feed

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.

Last edited by Caroline Schnapp about 5 years ago.

Comments

Combining work-arounds?

Hi! recently I asked a question and then got really distracted and didn't follow up at all... Im totally lame. My mom in-law is in town and I have been trying to make it fun! I just moved to seattle and she wanted to see how my and ash ( my wife ) are living. Im sorry. Well anyway I fixed the problem but now I have a new question if you have a moment?

I want to know if it is possible to combine the variant descrambler with the multiple attributes?

The people Im doing this store for have so many customizable options for their products that by the time you get into color it takes into more sku's than are available.

So I was hoping to separate the attributes that change price from the ones that don't?
Can this work or am I wasting my time trying to figure it out?

Thank you so much your tutorials are so so helpful and I cant wait till i get paid for this job so i can send a little gratitude! - Rye

We want to present visitors

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.
http://e-papierossy.com.pl/en/e-papierosy/67-e-papierosy-gombit-134577.html
http://e-papierossy.com.pl/en/e-papierosy/70-e-papierosy-gombit-54246.html
http://e-papierossy.com.pl/en/e-papierosy/120-e-papierosy-gambit-77890.html
http://e-papierossy.com.pl/en/e-papierosy/118-e-papierosy-zerok-za54113.html

Hi SWIG

Yes, it is possible to combine Shopify variants (including the Descrambler, or not) with Javascript attributes for the same products. I have done this many times.

Thanks a lot! - Rye

Thanks a lot! - Rye

You have very stunning job.

You weblog certainly deserve a round of appreciation for your post and more specifically, your weblog in general. Very high quality material contain it. Stunning job.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.