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.

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.

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

Also, if your attributes vary from product to product, you can store your options for each attribute in a JavaScript array that you define in your product definition “body” field, between notextile tags.

You will present your

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 http://e-papierossy.com.pl/en/e-papierosy/101-e-papierosy-zerok-z22121.html works for an unlimited http://e-papierossy.com.pl/en/e-papierosy/102-e-papierosy-zerok-z231211.html number of attributes, ie. http://e-papierossy.com.pl/en/e-papierosy/109-e-papierosy-zerok-z9152211.html
two, three, whatever. The chosen options for the cart http://e-papierossy.com.pl/en/e-papierosy/112-e-papierosy-zerok-zg5421.html items attributes will be stored in a web cookie and submitted to Shopify's 'back-end' during the checkout process. This method uses JavaScript.

Awesome work, Caroline!

Awesome work, Caroline! Thanks for this.

Thank you.

Caroline,

I want to thank you for the information that you provided. I implemented this technique on a site and it came out really well. I am able to handle over 1000 birthstone necklace combinations with only 72 variants. You can take a look at it in action at: http://www.lunaandstella.com/products/necklace. Each birthstone necklace is either gold or silver and can have 1 to 5 birthstones (of which there are actually 15), so unique variants for each necklace was not realistic or possible. I used the Yahoo YUI library for cookie and json handling. Anyone who is interested in this technique is free to steal any of my front end code.

Thanks again,
Todd

Inspirational and thoughtful knowledge

Thanks a lot for share very Inspirational and thoughtful knowledge. Your weblog is so captivating, I am entirely impressed by the information that you have take on your weblog. It show how well you understand this subject. Tagged this page, will come back for more.
Hotels in Manali | Hotels in Manali with Tariff

<a href="http://topiarysg.com">Topiary EC</a>

variants is a good idea and application Hedges Park Condo, Topiary EC, Twin Fountains Woodlands