We’ve upgraded all stores to SolidShops version 1.4.1

Posted by SolidShops on January 29, 2012 at 06:32 PM

In this first update of 2012, we have made a couple of improvements for you. First of all, our template language is now more consistent by following a specific coding convention. This will make it easier for all of you who are using the language to build  flexible designs for your clients by providing a consistent way to code up themes.

We’ve decided to make small adjustments to the syntax of some of the variables and methods used in the template language. These changes will apply to our API later down the road as well, so that you will always have one clear way of coding things on SolidShops.

The following is a list of changes that have been made. Of course we’ve also updated our documentation, as well as all store templates, email templates and invoice templates where necessary.

Changes to the template language

• old: stripwhitespace / new: strip_whitespace
• old: striptags / new: strip_tags
• old: charlimit / new: char_limit
• old: random / new: random_number
• old: orderby / new: order
• old: shopname / new: shop_name
• old: shopurl / new: shop_url
• old: assetsurl / new: assets_url
• old: productscount / new: products_count
• old: firsturl / new: first_url
• old: previousurl / new: previous_url
• old: lasturl / new: last_url
• old: currenturl / new: current_url
• old: nexturl / new: next_url
• old: taxpercentage / new: tax_percentage
• old: taxsetting / new: tax_setting
• old: trackstock / new: track_stock
• old: alwaysavailable / new: always_available
• old: parentid / new: parent_id
• old: paymenttext / new: payment_text
• old: productid / new: product_id
• old: taxpercentage / new: tax_percentage
• old: firstname / new: first_name
• old: lastname / new: last_name
• old: postalcode / new: postal_code
• old: countrycode / new: country_code
• old: datemodified / new: date_modified
• old: trackstock / new: track_stock
• old: thumb / new: thumbnail

In short, the most important change here is that we are consistently using underscores in our variables and filters whenever a new word starts.

Additional image formats

When you upload a product image, we now generate three different versions of that image:

• .thumbnail (this is the cropped thumbnail with a height of 200 pixels and a width of 200 pixels
• .full (the original image, compressed and optimized for faster loading, recommended in most cases)
• .original (the original image, uncompressed in full quality)

Other updates and improvements

The following improvements have also been made to the SolidShops application.

• CSV export of orders now includes all details like name, address (thanks David)
• linking Facebook stores can now be done without navigating away from your store backend
• you can now sort products by stock in your store backend
• theme name is added to the browser tab’s title for easier editing (thanks Pascal)
• new payment method: “pick up in store without charging shipping costs” (thanks Jill)
• you can now show “related products” in your store based on product tags (thanks Peter)
• sometimes, thumbnails would be 199 pixels high instead of 200 pixels. This has been fixed (thanks Samir)

Happy New Year, Friends!

Posted by SolidShops on December 31, 2011 at 01:30 PM

We want to wish everyone a happy New Year. Thanks for building stores with SolidShops, thanks for your trust, your feedback and for recommending SolidShops to your friends the past year.

You can expect more great features from us in 2012 so keep your feedback coming! Be safe and we hope to build a lot of great stores with you together in the coming year.

We’re off to see the fireworks right outside of the office. See you all in 2012!

Picture © by Andhi

All stores have been upgraded to SolidShops version 1.4

Posted by SolidShops on December 30, 2011 at 07:33 PM

Version 1.4 of the SolidShops application brings a number of improvements to your stores. Here’s what’s new.

Managing products with different combinations or options just got easier

Do you have products that come in different styles or variations such as color, size, fabric, … ?
Then you probably want an easy way to keep track of your stock and pricing for those variants.

Let’s say you are selling T-Shirts in different sizes and colors. That new fancy shirt you’ve got in store comes in the following options:

• color green / size XL: 2 in stock, costs $ 11.99
• color red / size XL: 2 in stock, costs $ 11.99
• color green / size small: 2 in stock, costs $ 9.99
• color red / size small : 3 in stock, costs $ 9.99

You can now easily track these stock and pricing combinations as follows (documentation is right here if you need it)

SolidShops JavaScript framework for better product templates

Let’s take the T-shirt example we discussed above. When a product has multiple product options, you’ll probably want to show them in different select boxes to your users. That’s great, but you’ll also want to print out the correct price for your user. The problem is you can only do that once a user has selected the options he or she wants.

That’s where our Javascript library come in. We’ve created a simple Javascript library that you can use to update pricing and stock info live on your product pages, whenever a users selects an option. The advantage of doing this client-side with Javascript, is that there is no need to submit a form or refresh a page in order to update the price and stock info.

You can even hook in your own functions by using a custom callback, in case you want to e.g. use jQuery or another library to throw in some effects when showing price or stock info to your user.

Documentation for the Solid Javascript library can be found right here. New stores are automatically configured with the new Javascript library. Existing templates don’t need to be updated, unless you want to make use of this new functionality. In that case, simple go over the documentation and get in touch if there would be any problems. We’d love to help out wherever necessary.

Oh, before I forget: your product pages will still work without Javascript as well. If a user blocks or does not have Javascript, he or she will see the following fully working alternative (right side of the screen shot):

Other improvements include:

• google sitemaps are again automatically generated (thanks David)
• you can now use a contact form in any of your theme templates
• we added a json filter so that you can more easily implement AJAX functionality
• the SolidShops application is now responsive and ready for use on tablets or other smaller screens

Musth: rocking hard on SolidShops!

Posted by SolidShops on December 18, 2011 at 04:39 PM

Saturday morning, 11 a.m; we’ve arranged a little interview with Tim, lead singer of postrock band Musth at Kaffee Ine, a fine espresso bar in the city of Mechelen. Tim is a rocker at night, but a SolidShops store owner by day. Let’s ask him some questions at this early hour, which is without doubt unbearably early for him.

Hi Tim! Would you mind telling us where the name of your band ‘MUSTH’ actually comes from?

Musth is a periodic condition in bull elephants, characterized by highly aggressive behavior, accompanied by a large rise in reproductive hormones – testosterone levels in an elephant in musth can be as much as 60 times greater than in the same elephant at other times. Off course, we’re not elephants nor are we selling them. Musth is the name of our postrock/sludge/metal band. The vibe of the music can be compared to the state of the elephants, being really calm with outbursts of anger and emotion.

How does SolidShops help you to grow Musth?
Well, since we’re a band, we carry merchandise such as t-shirts, cd’s etc. Most of the time you can buy our merch at a show, but since we’re not (yet) playing all over the world, it’s hard for some people to buy our merch. And that’s where SolidShops comes in as an extremely handy tool that is accessible to anyone anywhere in the world.

What do you like most about SolidShops?
I like the fact that everyone can design the shop however they want to. You can give it the layout you always wanted for your shop! Also the facebook app and the iPhone app are amazing!

What would you like us to change or improve?
For now, I can’t think of anything, I remember having a few remarks when we were designing the shop, but you guys are so fast in handling those, that every issue is solved extremely fast!

Your are also running a SolidShops store on Facebook. What made you decide to do that?
Since we have quite some people liking us on facebook, it’s handy to also be able to show them our merchandise through that forum… and it’s extremely easy to add!

Anything else you’d like to add?
I’d love to say that I really enjoy working with you guys, because like I said: whenever there is an issue anywhere, you guys pick it up asap and deal with it asap, which is great! So big up for that! And off course, keep it up and I wish you all the best for the future! Hope to see all of you on a Musth show!

Cool! Thanks a lot for the interview. Let’s have another coffee and we’ll definitely see you again at one of your next shows!

Tim by day

Tim at night

Photography © wannabes.be

Musth Live at AB club Brussels

Hitting the nail on the head

Posted by SolidShops on December 10, 2011 at 09:40 AM

When doing support for SolidShops, we often receive interesting feedback from our users. Today, I had the chance to have a short conversation via email with the very friendly Jessa B who was looking for a solution to power her fabrics store. When I asked her about what she didn’t like about her current e-commerce solution (we won’t name names), she sent us the following feedback:

It’s such a heavy piece of software that upgrades and simple customizations become big nightmares that have to be outsourced even though I have a pretty good handle on CSS and HTML. It’s also not as speedy and responsive as I’d like it to be — particularly in the backend/admin side. And because I’m on the Community version, some basic functions — like good control on shipping costs, use of gift certificates and a search function that actually works to help customers find products — seem to be lacking without paying for 3rd party extensions that may or may not ‘break’ or be compatible with my already existing site. — Jessa B

The feeling I had after reading that mail was: wow, she really hits the nail on the head. I’ll never claim that SolidShops is the perfect solution for every single business in the world, far from it, but this email exactly describes why we started building SolidShops in the first place. We think that most e-commerce software is too complex and limitative, especially for web designers.

The takeaway point here is to always ask your clients what they don’t like about their current solution. Ask why they prefer your solution instead of going with a much more well-known application. You probably think you know why clients prefer your software – you’ve built it after all – but until a client tells you the exact reason why, you’re just guessing and hoping you’re right.

This time, Jessa hit the nail on the head and confirmed our beliefs but sometimes user feedback will give you insights into the strenghts of your application that you might not even have thought about. Your clients won’t lie, don’t be a fool by not listening to them. If you know what frustrates them, you can focus on creating a real solution for them.

Thanks for sharing your opinion with us, Jessa.

How to: Convert your store prices to multiple currencies with money.js + accounting.js + jQuery

Posted by SolidShops on November 30, 2011 at 05:19 PM

When building stores, you will sometimes want to display the prices of your products in different currencies. Even if you will charge your customers in your own currency only, it’s never a bad idea to show an estimate of what a product would cost in your customer’s own local currency. It gives the customer a more secure feeling about a purchase and will take away a bit of uncertainty when they see an item they want to buy.

In this blog post I’ll show you an easy way to do just that: currency conversion with a few simple javascript libraries and a free exchange rate provider.

What you need to do to get started:

1 – first, add jQuery to your web page and grab a copy of the money.js library

2 – this step is optional but I highly recommend it: grab a copy of the accounting.js library so that we can easily format our prices matching the selected currency format. In Europe we use comma’s after all as a decimal mark while in the States there’s a dot in that very same place. The accounting.js library takes the pain out of formatting that kind of fun stuff.

3 – you’ll need a web page (what else?) where we can experiment or show different currencies for a product

Step 1: Link money.js to your web page

Start your engines! Add jQuery and the money.js library to your web page. We’ve used the minified version of the library to speed up the loading of the store. If you don’t need to look at the source of the library, go for the minified version as well. Make sure to also link up jQuery before anything else. We are using the Google CDN to quickly service jQuery to our users worldwide.

Here’s the code we used.

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/money.min.js"></script>

The money.js library itself is no more than 1.1 kb in size, which is – well – not much to load.

Step 2 (optional): Link accounting.js to your web page

As I said before, this step is optional, but I would suggest using the accounting.js library to format currencies in a correct manner.

<script type="text/javascript" src="js/accounting.min.js"></script>

Step 3: Convert your price into different currencies

This step is actually easier than one might think, so bear with me and let me try to explain how to build this up.

First, we will tell jQuery to start working once the page has finished loading by wrapping our code in the .ready() event.

$(document).ready(function(){
  //load this code once the page is loaded
});

Then, we will tell the money.js library what our default currency is. In other words, we need to tell the library what the currency of the price is we want to convert, so that it knows what exchange rates to apply.

fx.base = "EUR";
fx.settings = {
    from : "EUR"
};

Then comes the cool part. We’ll query the open source exchange rates API to get current representative exchange rates for all currencies. After grabbing the json-feed, we’ll add the exchange rates to the money.js library.

$.getJSON(
          'http://openexchangerates.org/latest.json',
          function(data) {
              // Check money.js has finished loading:
              if ( typeof fx !== "undefined" && fx.rates ) {
                  fx.rates = data.rates;
                  fx.base = data.base;
              } else {
                  // If not, apply to fxSetup global:
                  var fxSetup = {
                      rates : data.rates,
                      base : data.base
                  }
              }
          }
);

Once we have those rates, we can start converting our price into any exchange rate we want:

var USD = fx.convert(amount, {to: "USD"});

We’ll also format that currency into a nice recognizable format:

USD = accounting.formatMoney(USD, "$ ", 2, ",", ".");

That’s it, now we can show this estimate to our users by appending it to our page, in a list if you want:

 $("ul.currencies").append("<li>USD estimate: " + USD + "</li>");

The complete code and example could look more or less like this:

<!DOCTYPE html>
<html>
<head>
<title>Currency Conversion Tutorial</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/money.min.js"></script>
<script type="text/javascript" src="js/accounting.min.js"></script>
<script type="text/javascript">// <![CDATA[
    $(document).ready(function(){
      fx.base = "EUR";
      fx.settings = {
        from : "EUR"
      };

      var amount = 9.99; //in SolidShops, you could use: {{ product.price }}
      // Load exchange rates data via the cross-domain/AJAX proxy:

      $.getJSON(
          'http://openexchangerates.org/latest.json',
          function(data) {
              // Check money.js has finished loading:
              if ( typeof fx !== "undefined" && fx.rates ) {
                  fx.rates = data.rates;
                  fx.base = data.base;
              } else {
                  // If not, apply to fxSetup global:
                  var fxSetup = {
                      rates : data.rates,
                      base : data.base
                  }
              }

             // now that we have exchange rates, add a few to our page
             var USD = fx.convert(amount, {to: "USD"}); //13.22784197768393
             var GBP = fx.convert(amount, {to: "GBP"}); //8.567532636985659
             var JPY = fx.convert(amount, {to: "JPY"}); //1028.1670562349989

             // we can now use the accounting.js library to format the numbers properly
             USD = accounting.formatMoney(USD, "$ ", 2, ",", ".");
             GBP = accounting.formatMoney(GBP, "£ ", 2, ",", ".");
             JPY = accounting.formatMoney(JPY, "¥ ", 2, ",", ".");

             $("ul.currencies").append("<li>USD estimate: " + USD + "</li>");
             $("ul.currencies").append("<li>GBP estimate: " + GBP + "</li>");
             $("ul.currencies").append("<li>JPY estimate: " + JPY + "</li>");
          }
      );
    });
// ]]></script>

</head>
<body>
      <h1>€ 9,99</h1>
      <ul class="currencies"></ul>
</body>
</html>

The output of the final currencies list looks like this:

I hope this gives you at least a little bit of inspiration to get started with converting your prices in your store.

Please post a comment if you have any questions or if you have used these amazing libraries to build better stores for your clients. I’d love to see what you come up with!

Deployment Day: Version 1.3.5 is now live

Posted by SolidShops on November 25, 2011 at 05:14 PM

Hello everyone. As you will probably know we made a promise last year that we would consistently deploy a new version of the SolidShops software every two weeks.

We haven’t missed one deployment since then and after one year of implementing new features and bug fixes, we’re going to tweak our deployment process a bit. More about this later in this post, let’s first see what has been improved in SolidShops version 1.3.5.

New feature: customizable PDF invoices

We have one clear goal: to be the most flexible and user friendly e-commerce platform out there for anyone who’s building professional online stores. We keep that goal in mind all the time when we evaluate wether or not to include a new feature in the software. PDF invoices have been requested by a number of users in the past few months and we agreed that this was a very nice feature to offer.

There was only one side-note: we wanted the PDF invoices to be 100% flexible and customizable, since we’re here for web designers and other creative creatures. Anyone can now build an invoice in HTML and CSS. Combined with our Solid template language you have a 100% flexible way of automatically generating PDF invoices from within your admin panel.

To customize the layout of your PDF invoices you can log in to your store and go to “Design” / “Invoice PDF”. There you can use all the available variables from the template language, together with your own CSS and HTML. Just try to keep things simple as the process of generating a PDF is not a simple task to do. One big drawback is that the “float” CSS property is currently not supported (sorry about that, but PDF’s aren’t shiny new browsers to say the least), but other than that, you will see that you can get some pretty invoices printed quickly.

To generate the PDF itself, just open up one of your orders in your store and click the “download PDF” link. That will generate a PDF invoice based on the current order data and your invoice html template. Simple, yet flexible.

Some minor features and bugfixes have also been implemented in this release:

• support for Indonesian language in the checkout process
• we found a bug in the code editor’s “toggle fullscreen” option, this has been resolved
• for easier template editing, we now show the theme + template name (Thanks Pascal)

We’re changing our deployment frequency

What we’ve learned in the past year is that a bi-weekly deployment promise forces you to get your bug fixes and new features out there on a predictable basis. We’ve been able to release and deploy features that were most important, while pushing other features to a future date. The ability to focus on what matters is truly the most important advantage we’ve experienced from practicing this deployment habit.

Now that we have implemented the core functionality we need for the future, we are stopping the bi-weekly release cycle and will deploy new versions of the software when the time is right. This doesn’t mean that we’ll be deploying less or less frequent. This does mean that we’re making a mental switch to now focus on a number of larger improvements to the software that will require more than two weeks of work before we can actually release them for our users.

Keep filing bugs if you can find one and keep letting us know what you guys and gals need to improve the software. We’ll continuously make the software better  like we’ve done from the beginning and that’s a promise. It’s been an amazing first year and there’s plenty more to come.

Until next time friends!

Deployment Day: Version 1.3.4 is now live

Posted by SolidShops on November 11, 2011 at 12:39 PM

Exactly one year ago, we started our bi-weekly deployment promise. This means that today, we have consistently upgraded and improved the SolidShops application 26 times.

As you know, we fix bugs and add new features based on your feedback. We couldn’t have done this without you!

This release is a maintenance release where we re-worked the subcategories functionality that we launched a few weeks ago. Let me explain:

When you or your client add a product to your store, you need to select one or more categories that product belongs to. When you have multiple categories and subcategories like in the screenshot below, you now need to select all categories where you want to product to show up when a user is browsing your store.

In the screenshot above, you can see that we have selected “Shoes” and “Men”. This means that the product will show up when a user is browsing “Men’s” products and also when browsing “Shoes”. Some of you have reported that it would be nice to be able to only show a product in a subcategory and not when browsing the parent categories. This can now easily be done by just selected the subcategory, without selecting the parent category.

We are convinced that this is the best and most flexible solution for all stores running on our platform. Please note that we have updated all stores automatically with this new category structure. This will not cause any downtime for your store.

The following features and bug fixes have also been  implemented in this release:

• if you log in to our mobile app, we remember you for 30 days, so that you don’t have to log in over and over again (thanks Tim)
• support for Indian Rupee (INR) has been added (thanks Peyusha)
• support for Indonesian Rupiahs (IDR) has been added  (thanks Carpus)
• we added an extra permission in the “manage staff accounts” screen so that other staff logins can also manage user accounts (thanks Tam)
• when trying to reach a page to manage your store (e.g. add a page) when you aren’t logged in, we now remember where to send you after logging in again
• when filtering on category nicename or id in our template language, not all subcategories would be returned. This has been solved. (thanks Mark)

We hope you will enjoy these updates. Please let us know if you have any feature requests or if you find any bugs and we’ll hunt them down!

Thanks again for the feedback and support everyone, you’re the best crowd we could wish for here at SolidShops. Keep building better stores!

Deployment Day: Version 1.3.3 is now live

Posted by SolidShops on October 28, 2011 at 12:53 PM

Every month, we get several feature requests from our passionate users. Thanks for that!
In this release, we’ve implemented the following much requested features:

• easier product management with search filters and sort options
• easier order management with search filters and sort options
• easier content pages management with sort options

To use this feature, just navigate to your products, orders or pages in the backend of your store and use the filter options on top to refine your search. If you want to order your results, simply click on the column name you want to filter by.

Your filter preferences are “remembered” until you refine them again, or until the next time you login to your store.

On top of the additions above, we have fixed the following issues or bugs.

Deployment Day: Version 1.3.2 is now live

Posted by SolidShops on October 14, 2011 at 04:00 PM

In order to create the best possible e-commerce solution for you guys and gals out there, we release a new version of our software every two weeks. In those bi-weekly updates we incorporate fixes and improvements that you – our users – have asked for.

In the past couple of weeks, some of you have asked us to start supporting subcategories for products. That way it becomes easier to  group products and build navigation structures for your stores, like so:

Together with the support for subcategories, the following improvements have been made in this release.

• the themes overview page has been re-designed to be more user friendly
• renaming of themes is now possible
• support for subcategories
• a user can now change his or her email address for their account
• updated documentation for rendering subcategories
• when searching for products in your store, non-standard characters in a search query wouldn’t return results. This has been fixed.

That’s it for this release. Let us know what we can do to improve the software for you in our next version.

Enjoy the weekend everyone!