All Blogs
How to Create Individual 'Buy' Buttons for Variant Products
Sometimes your buyers want to go to your page, purchase a product and go - without any of the trouble of having to choose from the options you offer. Luckily, you can make your customers' shopping experience quick and easy with our variant products feature.
When you are selling a product that comes in different colors, patterns, etc. you can use our variant feature to handle a lot of specifications. That way, buyers can use drop down menus 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, a button for a medium white shirt, a button for a medium black shirt, etc.) because limited choice and speedy checkout can be appealing to customers. You can use our variant products feature to create these specific buttons. You’ll just need a little extra coding to make each set of options into a single button.
Now we are going to assume you already created 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&cl=XXXXX&i=XXXXX&ejc=2" method="POST" target="ejejcsingle" 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”>Xlarge</option>
</select><br>
Color:<br>
<select name="o2">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select><br>
Cuff:<br>
<select name="o3">
<option value="Standard">Standard</option>
<option value="Turnback">Turnback</option>
<option value="French">French</option>
</select><br>
<input type="image" src="https://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>
Now, go ahead and list the different option by their names. We have three sets of options that are named o1, o2 and o3. So, o1 equals Small, Medium, Large or X-Large, o2 can equal Blue or Green and o3 can be Standard, Turnback and French. For our example we are going to do Add to Cart buttons for the small blue standard cuff and the large green turnback cuff; in this case our list will look like this:
o1=Small, o2=Blue, o3=Standard
and
o1=Large, o2=Green,o3=Turnback
Then, you will 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:
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=XXXXX&cl=XXXXX&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
Change the Purchase URL so the codes for the two set of options looks like this:
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=Product3&cl=XXXXX&ejc=2&o1=Small&o2=Blue&o3=Standard" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=Product3&cl=XXXXX&ejc=2&o1=Large&o2=Green&o3=Turback" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
You can then place these codes within the source code of your website wherever you want the buttons to appear, and have individual buttons for each set of options instead of dropdown menus.
Do you have a question about how to setup variant products with individual buttons? Shot an email to our support staff.
When you are selling a product that comes in different colors, patterns, etc. you can use our variant feature to handle a lot of specifications. That way, buyers can use drop down menus 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, a button for a medium white shirt, a button for a medium black shirt, etc.) because limited choice and speedy checkout can be appealing to customers. You can use our variant products feature to create these specific buttons. You’ll just need a little extra coding to make each set of options into a single button.
Now we are going to assume you already created 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&cl=XXXXX&i=XXXXX&ejc=2" method="POST" target="ejejcsingle" 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”>Xlarge</option>
</select><br>
Color:<br>
<select name="o2">
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select><br>
Cuff:<br>
<select name="o3">
<option value="Standard">Standard</option>
<option value="Turnback">Turnback</option>
<option value="French">French</option>
</select><br>
<input type="image" src="https://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>
Now, go ahead and list the different option by their names. We have three sets of options that are named o1, o2 and o3. So, o1 equals Small, Medium, Large or X-Large, o2 can equal Blue or Green and o3 can be Standard, Turnback and French. For our example we are going to do Add to Cart buttons for the small blue standard cuff and the large green turnback cuff; in this case our list will look like this:
o1=Small, o2=Blue, o3=Standard
and
o1=Large, o2=Green,o3=Turnback
Then, you will 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:
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=XXXXX&cl=XXXXX&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
Change the Purchase URL so the codes for the two set of options looks like this:
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=Product3&cl=XXXXX&ejc=2&o1=Small&o2=Blue&o3=Standard" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=Product3&cl=XXXXX&ejc=2&o1=Large&o2=Green&o3=Turback" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
You can then place these codes within the source code of your website wherever you want the buttons to appear, and have individual buttons for each set of options instead of dropdown menus.
Do you have a question about how to setup variant products with individual buttons? Shot an email to our support staff.