Tech Hive | Front End Development, etcetera

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?