cookie

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 →

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

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 →

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 →

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 →