Options Made Easy: Splitting Variants into Individual Products

Posted: 11/26/2014

The online marketplace is crowded, if your customers can get in and out with a simple click of a button (instead of scrolling down lists of options) they are more likely to buy right now. Luckily, you can make your customers' shopping experience quick and easy with e-junkie.

When you are selling a product that comes in different colors, patterns, etc. you can use our variant feature to set up a product with Variants to allow a single product to handle it, using drop down menus for buyers to select the size and color. But consider having buttons for each option, a button for a small white shirt, a different button for a small black one, etc. This can still be setup with our Variant feature and then just a little extra coding is needed to make each set of options into a single button.

Now we are going to assume you already made the product and you have your code, it should look something like this:

<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=Product3&cl=XXXXX&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8">

Size:<br/>

<select name="o1">

<option value="Small">Small</option>

<option value="Medium">Medium</option>

<option value="Large">Large</option>

<option value="X-Large">X-Large</option>

</select>

<br/>

Color:<br/>

<select name="o2">

<option value="Green">Green</option>

<option value="Red">Red</option>

<option value=”Purple”>Purple</option>

</select>

<br/>

<input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>

</form>

First, you want to go ahead and list the different option by their names. Since we have two sets of options they are named o1 and o2. So, o1 can equal Small, Medium, Large or X-Large and o2 can equal Green or red. For our example we are going to do Add to Cart buttons for the small green product and the large red one; in this case our list will look like this:

o1=Small, o2=Green

and

o1=Large, o2=Red

You will next want to add these to the end of the Purchase URL, using “&”s, within a standard Add to Cart button code, and set the Variant product’s item ID in it as well. Here is an example of a standard Add to Cart button code for another product:

Now you will want to change the Purchase URL so the codes for the two set of options looks like this:

You can then place these codes on your website and have individual buttons for each set of options. You can also use this to sell a small number of a special option, say you want to include a limited release of a special shirt at a lower price. You can remove that option from the standard code to have it as a separate button, Lets use our Purple option from the initial code as the special, only available in medium. You can have a single button for it looking like this:

And then set the original code like this so the Purple option is not there:

<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=Product3&cl=XXXXX&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8">

Size:<br/>

<select name="o1">

<option value="Small">Small</option>

<option value="Medium">Medium</option>

<option value="Large">Large</option>

<option value="X-Large">X-Large</option>

</select>

<br/>

Color:<br/>

<select name="o2">

<option value="Green">Green</option>

<option value="Red">Red</option>

</select>

<br/>

<input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>

</form>