34. TimeCreated with Sketch.
4 minute read

Customizing Products and Options in Volusion with a “Design Your Own” Feature: The Optimum7 AJAX Solution

VolusionIn the past, many Volusion storeowners, operators, and developers have been at a loss on how to create a feature that allows their customers to customize their products. Lamenting the lack of such a feature and the difficulty in creating one, it has long since been delegated to the realm of impossibility.

Yet for the programmers here at Optimum7, the impossible is what we do every day.

With a little ingenuity and a lot of hard work, we’ve created a solution that allows you to define options and types, etc. for your products without actually having to go into Volusion.

How, You Ask?

It’s as simple as editing your XML files. By defining the types and options in your XML file, you can allow your customers to design their own versions of your product within your Volusion store.

While the our solution is extremely versatile and will work for any business, let’s look at an example to get a better idea of what it’s actually capable of and how versatile it really is.

Capability and Versatility

Let’s say your company sells lanyards.

Your lanyards are available in five different colors: red, royal blue, yellow, light green, and black.

Customers can also have an image printed on the lanyard – such as their logo, with text of their choice – maybe their company’s name. The text is also available in four colors: white, back, red, and blue.

To personalize their order, your customer would have had to call or email you to ask for something custom, or you simply would not have been able to offer custom products at all.

Depending on how many different styles of the lanyard they needed, this could have proved time consuming or, if you were not able to do it all, could have cost you business.

With this solution, your customers can personalize your products using the options you offer directly on your site in a matter of seconds.

On the individual product pages, your customer will see a button that says, “Design Your Own,” which will open a popup where they can choose their custom options.

In our case, they would see the following:

  • Lanyard Background Color Swatches
  • A Custom Text Field
  • Custom Text Color Swatches
  • Upload an Image Field
  • Special Instructions Box

Now, you can choose how colors appear. You can either show swatches where the customer can see the actual colors, or you can have a dropdown list with text naming the different color options.

This code is sophisticated enough to recognize non-primary colors, such as your “royal blue” and “light green” options.

So for example, your customer can order 200 royal blue lanyards with “VIP Access” written in white text with an image of their logo affixed on either side of that text.

You can also incorporate a field where your customers can add any special instructions. All they have to do is type in their specifications or request.

If your customer requires several different designs for the same product, they have the ability to design them all at once and store them in the popup where they’re working. They can also define the quantity they’ll need in the popup, create a few different options, choose their favorite, and delete the rest.

Once they reach checkout, they’ll see options to edit or delete any of the designs they created so they won’t have to go back to change anything, which means a better UI experience.

Now, this is just one example of how this solution can be used. Depending on your products and the options available to your customers, you can define as many or as few fields as necessary and each field can have as many options as you offer. Every field in the popup comes from the XML file on your server. There’s no limit to the possibilities because all you have to do is edit the code in your file.

Steps to Customize a Product in Your Volusion Store

  1. Open an account with Optimum7 to receive your API Key
  2. Create an XML file in your server: anyname.xml
  3. Create the options within the file
    1. Dropdowns, check options, text input, file input, textarea, swatch of colors, and option buttons can be used.
    2. On Volusion, add the “anyname” file (without the .xml extension) to product custom field 3.

This will automatically add a customize product button to the product page and the popup will automatically show up with the options you defined in your XML file. You will still need to contact us and we would need to customize the XML template.

The Optimum7 Custom Product Ajax Solution allows you to offer your customers a custom design functionality that heretofore was unavailable on Volusion stores. To see it in action, have a look at our YouTube video!

Contact Us!

Getting access is as simple as creating an account with us and getting an API Key. Give us a call at (305) 477-8960 or send a request through our online form to get yours today!

If you’ve been unable to find a developer to create the functionality you need on Volusion, you should also give us a call. Optimum7 is home to Volusion-certified Experts and will be happy to discuss your options with you.

Editorial by Lisa Sherman.

Share on Social Media