Syndicate

Feed

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, and you are avoiding the long dreaded drop-down variant selection box of death:

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. With JavaScript disabled in the browser, your visitors will be unable to pick any attributes other than the default ones chosen for them. This method is a workaround. Jaded Pixel really should implement multiple attributes (most commonly, these are size and color), but they have chosen not to, so we have to make do.

A shop has been created to which the modifications presented in this tutorial have been applied. The theme is based on the sea version of the Vogue theme by Jared Burns. The website is here. Feel free to visit the 11heavens Bags website and view the source.
Last edited by Caroline Schnapp about 8 weeks ago.

Comments

Combing this with Products with a Single Variant

Caroline great tut! Really helpful in all, but I was wondering (perhaps I missed something) if there's a way to the exclude the multiple variants for products that don't have any?

I tried adding an IF statement to the list of option values but I'm not sure if I have the liquid tags correct. Any help would be fantastic!

Yes

I was wondering (perhaps I missed something) if there's a way to exclude the multiple variants for products that don't have any.

Yes, using Liquid. Just don't add a select element for options if there aren't any. You can base your logic on reading a Tag, or by checking if the product is of type x, or belongs to collection y.

Awesome work, Caroline!

Awesome work, Caroline! Thanks for this.

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>.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5 + 8 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.