Volusion, every themer’s nightmare

Volusion Logo Recently, I had to convert a PSD into a theme for a Volusion store. I don’t really mind doing something new because I know that you’ll always, always learn something from it. But volusion just made me appreciate WordPress, Drupal and MVC frameworks more.

When I first looked at the code within Volusion’s LiveEditor, I thought “Well this is going to be simple and easy.” But I was so, so, so wrong. It was a nightmare so hard, I’m not used to making the design work for the CMS — I’m used to bending it with my jedi mind tricks (or well, try).

Volusion only has one theme for everything. Ever since I started learning more and more about Drupal, I’ve started to appreciate this one-theme-for-all-page strategy where you update all of the options in the admin panel instead of in the theme itself. It wasn’t easy at first because I was used to how WordPress works but I realized that this way is actually more flexible (and dare I say user-friendly for the clients once they’re used to it), so that’s not really what I dislike dislike about Volusion.

It’s that there really is that one HTML file, and your CSS. With Volusion, you can show the contents of the site by adding <div id="content_area"></div> within your theme, the Volusion script adds the code and content within that div. And boy, do they add codes (read: table, b, font!)! Unfortunately for you, the designer/front-end developer, you can’t edit the codes that’s within it. This means no conditional tags for your menu or sub menu, no includes, nothing. Just your HTML and CSS. :(

The code they add within #content_area doesn’t have a lot of classes or IDs either, having them would have made my life easier because I can select them through CSS. But no, they’re using tables within tables within tables within tabl— well, you get the drift. So in the end, don’t be surprised if your CSS will look something like this:

 table[cellspacing="2"] table table table font { styles }
  table[cellpadding="8"] table table td .classname table { styles }

You can customize how it looks per category but whenever you have to adjust something, let’s say, change a URL in one of the sections or add a new section, it means that you have to edit it in all of the category pages. It’s like editing static HTML files all over again. This makes me sad because I feel that Volusion was left by its CMS counterpart and got stuck in the 90s. What. Is. Up?

Since you can’t edit what goes on in your #content_area div, it also means that if you want a bigger product image, you’ll have to, you guessed it, update all of the product images so it will match the new design’s specified image proportion. When the client said she wanted a bigger image, I initially thought that I’d just select a bigger version of the product image either in the option or code unfortunately though, there’s no option for it. There is an article in their support section on how to change your product thumbnails.

The submit buttons are all in images, too. Call me rigid in my ways or just plain lazy, but I’d like to have the option of just creating one background image to apply on all text-based buttons. And if I ever decide that images make a better experience for the users then I’d like to have that option, too.

I wonder what’s going on with them, with the advent of hosted ecommerce solutions like shopify and bigcartel, just to name a few, you’d think they’d do everything they can to make theming and updating the sites easier and more flexible for their clients. I do know that you have to make your app backwards compatible for all of those who can’t be bothered to update their design since whenever; but isn’t it also the service provider’s responsibility to make sure that what they have is at par with what’s out there? I’m really curious with what’s cooking in the Volusion HQ, will they be updating their backend’s design (that doesn’t work that well with webkit-based browsers), etc?

15 Responses

  1. Aaron Thursday, July 15th, 2010 05:48 am GMT +8 / 5:48 am

    I just started working with a client that has a Volusion website. The client wants to do a full revamp of his design and I was somewhat lost until I stumbled upon your article. Volusion template’s are very frustrating, do you have any other tips on designing for Volusion?

  2. mae Friday, July 16th, 2010 12:16 am GMT +8 / 12:16 am

    What I did was I wrote my own HTML and just replaced my code with the right tags from Volusion (like for the dropdowns, navigation, etc). Debugging it is depressing, though because of all those tables you can’t select, etc.

    This poses a problem for you later on, though because if you ask them about not being able to do this and do that, they might say, “we can’t help you because you changed the code of your site drastically” meaning they expect you to just edit the free themes available. :(

    In terms of the design, I think it’s best that you make the design as simple as possible. Take not that all of the elements except of course the cart, product description page, etc will be static. So if you want a particular look per category or per page, you’ll have to add their codes in manually.

    But lol, I think the easiest way to go about this is to shift to another (hosted) e-commerce software like shopify or bigcartel. :P

    Good luck!

  3. Aaron Friday, July 16th, 2010 12:30 am GMT +8 / 12:30 am

    Thank you for your reply! I have already started to do what you described including recommending my client switch to another hosted or open source cart solution.

    Does Volusion offer a reference or any documentation for designers? I can’t seem to find any solid information on their website or information via third parties.

    Hopefully I can convince my client otherwise, but in the mean time I plan to make do with Volusion.

    Thanks again!

  4. Mae Friday, July 16th, 2010 12:43 am GMT +8 / 12:43 am

    No problem! I’m glad I could help :)

    Their documentation isn’t really as informative as you’d expect (but maybe that’s just me, heh), I ended up chatting with their live support and emailing their design team (I think it’s design @volusion.com) more than once.

    Re: moving to another platform, I’ve seen their export feature, I’m not sure you can export everything in just one file, I may be wrong though. Hope all goes well :D

  5. Bill Tuesday, July 27th, 2010 12:31 am GMT +8 / 12:31 am

    you are absolutely right when it comes to Volusion templates.
    However i found easier to use a non-table template like the v-rising template and tweek it to conform to your design.

    It’s an all CSS template that offers a lot of flexibility. With all that said and done i try to gear my costumers to use Magento or Mcommerce which offer a lot more functionality.

  6. Mae Tuesday, July 27th, 2010 06:20 pm GMT +8 / 6:20 pm

    @Bill: Oh, I wasn’t aware of that template! I just gave up looking at their gallery of templates because I find their system really frustrating :(

  7. Numbers Moravek Friday, August 20th, 2010 07:07 pm GMT +8 / 7:07 pm

    I really enjoy what you blog about here, very refreshing and intelligent. One issue though, I’m running Firefox on Debian and parts of your layout pieces are a little off. I realize it’s not a common setup, but it’s still something to watch out for. Just giving you a heads up.

  8. Mae Saturday, August 21st, 2010 01:37 am GMT +8 / 1:37 am

    Hi! Do you mind sending me a screenshot of what you’re seeing so I can fix it? :)

    You can email me at mae [at] tech-hive.com. Thanks!

  9. Tom Saturday, November 6th, 2010 02:05 am GMT +8 / 2:05 am

    HI, can anybody help me with Volusion template? I need to add price discounts. It’s opend as a popup window when you click on button below add to cart. I need to show the dicsounts at product detail page. Thanks. Tom

  10. Mae Sunday, November 7th, 2010 03:14 pm GMT +8 / 3:14 pm

    The best bet is to ask them directly through live chat. Sorry..

  11. Kayla Thursday, March 31st, 2011 06:12 am GMT +8 / 6:12 am

    I also looked at the code in the live editor & thought it should be easy. However, I also quickly discovered that it’s far from easy. Makes me wish I would have stumbled upon your post a long time ago & saved myself some headaches!

  12. Mae Monday, April 4th, 2011 05:52 pm GMT +8 / 5:52 pm

    Hi Kayla! heh, when I was working on the Volusion site, I wished someone wrote about how to do stuff in Volusion. It’s like the entire community is very much intent on selling other people services, that they have forgotten to teach and share knowledge with each other.

    Thanks for dropping by! :)

  13. monaye Monday, April 18th, 2011 01:51 am GMT +8 / 1:51 am

    Same here. I suggested my client based on it’s rich features. When it come to themeing, I was assuming, should be able to control all content..
    I was sooooo wrong, now I have to google if there is the way to add product detail template page.

    So far I found your page and this maybe useful for other
    http://support.volusion.com/article/creating-page-specific-css-style-or-html-code

  14. Michelle Saturday, May 14th, 2011 02:40 am GMT +8 / 2:40 am

    Hi there. I can’t find the v-rising theme mentioned here. I found a theme called “rising” bit it seems to use mostly tables like all of the others. Can you point me in the right direction? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>