Deployment Day: Version 1.5.2 Is Now Available

This release of SolidShops took a bit longer as expected but it’s here!  We’ve just upgraded all stores to the latest version.

Enabled A LOT of new stuff in our template language

twig1

As most of you know, our template language is a layer on top of the Twig template language. Up till now, we only enabled a subset of Twig but from now on you can use almost all Twig filters.

We have enabled the following tags, filters and functions:

tags: do, spaceless

filters: var_dump, split, abs, batch, date_modify, default, first, last, format, join, json_encode, keys, nl2br, number_format, slice

functions: date, random

More information can be found on our updated documentation.

Added recurring billing for your SolidShops invoices

cc

It took us a while to get this done in Belgium but from now on you can use your credit card  to automatically pay for your SolidShops invoice. So no more annoying reminders or manual banktranfers! We support Visa, Mastercard, Maestro, Jcb, Diners club and China Union Pay.

If you would like to start using this payment method,  just update your information here.

Your invoice history right from your backend

ss_invoices

Since we automated our invoicing flow you can find  a copy of your invoices and it’s current state in your SolidShops backend.

Enjoy the update everyone and let us know if you have an idea that can improve our application and our service to you. We’d love to know!

Deployment Day: Version 1.5.1 is now available

We’ve just upgraded all stores to the latest version of the SolidShops e-commerce CMS. This is a maintenance release with a few improvements, based on the feedback we’ve received.

  • you can search for products by tags with a quote (‘), previously those products would not show up
  • the ordered items and variants are now included in the order export list
  • the shipping country has been added to the cart object, so from now on you can show your tax and shipping costs settings to your customers based on the country in the shopping basket
  • deleting a variant was not enabled in IE10, of course this has been solved
  • the WYSIWYG editor now fully supports IE10, previously some of the buttons were not working
  • from now on it’s also possible to sort your products by custom fields. So for instance you can create a field “featured” and order the products in a category by this fieldsort_customfields
  • you will notice a performance increase in the |currency filter. Some of our customers have more than 5000 variant combinations and using the |currency filter each time would decrease the performance significantly.variant_currencyfilter
  • from now on we inject the order object in the order confirmation page so you can add extra functionalities to this page based on the confirmed order.jsonproducts_orderconfirmation

Enjoy the update everyone and let us know if you have an idea that can improve our application and our service to you. We’d love to know!

Deployment Day: Version 1.5.0 is now available

Because we have been restructuring a lot in the SolidShops project, this has been a major milestone release for us!

We updated our team, started a whole new company, created an invoicing workflow that works for all kind of customers, significantly improved our servers, increased the storage capacity of our pricing plans and last but certainly not least added some features and fixed some bugs !

Abandoned orders

One of the small new features that has been requested a lot is the ability to get a grip on those abandoned shopping carts. This can happen when a customers completes the checkout page but decides not to go through with the payment. From now on you can perform a search for these kind of orders and print the details.
List Orders

No shipping cost for specific products

Another small feature that has been added to this release is the option not to charge shipping costs for a specific product. Some of our customers, for example, need to give out gift cards or sell (digital) goods that don’t come with an additional shipping cost.
So from now on, you can specify for each product whether shipping costs need to be applied or not.

shipping costs on product

Added MultiSafePay as a payment provider

After some calls with MultiSafePay we decided to add the “fastcheckout” and “connect” payment gateway to SolidShops.

multisafepay-logo

More goodies!

Since this is quite a big milestone for us, we have increased(x10) the diskspace for all pricing plans and we have doubled our server capacity.

As we really want to give you the best e-commerce experience, please keep sending us your feedback!

Deployment Day: Version 1.4.9 is now live

Hi everyone!

It’s been a while since we have released a new version of our application but we had to rework some of our internal processes.

Here’s a short summary of items that have been fixed or improved in release 1.4.9:

  • Our beta API is now running on https only
  • Emmet(aka Zen Coding) has been integrated into the template editor
  • the cart.items object now contains the product_id
  • the kube framework and twitter bootstrap theme’s have been added to our theme store
  • a filter url_decode has been added to the template language
  • solved a few theme editor bugs
  • solved an IE8 bug in variants
  • Portugees has been added to the checkout languages
  • we improved our variant datamodel so you can have more than 128 variants
  • some favicons could not be uploaded because of security issues

Thanks for keep sending in your feedback!

Deployment Day: Version 1.4.8 is now live

Hey everyone!

We’ve just upgraded all stores version 1.4.8 of the SolidShops CMS.

Here’s a short summary of items that have been fixed or improved in this release:

  • Importing products now instantly updates your used resources graph
  • Added versioning to the beta version of our API, for better backwards compatibility
  • All datetime fields in the API(beta) are now W3C compliant
  • You can now access all your tax and shipping data/settings trough our API and template language
  • In the template language, you can now order all the result by date_modified
  • In the template language, you can filter orders based on a specific product id or list of product id’s

Thanks for sending in your feedback, it makes SolidShops better, one release at a time!

Pricing will be set in Euros starting January 1, 2013

Over the past few months, we’ve  noticed that proportionally more stores are being created from within Europe. Based on feedback from our European users – and also because we are based in Belgium/Europe ourselves – we’ve decided it would be better to change our pricing structure from USD to EUR starting January 1, 2013.

We realize that this might put off some users in the United States and other countries where EUR is not the official currency, but in order to avoid problems converting one currency to another, we’d like to keep things simple by only charging in Euro’s to all customers. The conversion to your own currency will be handled by your bank instead.

Nothing changes for your clients. It is still as easy as before to set your store in your own local currency so that clients can buy from you in any currency you want (if we support it). However, when you get your SolidShops invoice, it will be in EUR instead of USD.

Clients that have received invoices from us before will have received a special deal from us to accomodate for the change. New clients will simply receive their invoices in EURO’s.

Thanks for your understanding everyone. If you have any questions, don’t hesitate to get in touch.

Why you should monitor your internal site search queries and how do that with Google Analytics

This post is mainly about the technical aspect of configuring internal site search queries using Google Analytics (GA). It describes how to link your internal site search queries using both a query parameter and a user friendly/clean URL.

Internal site search analytics provide useful insights about what a visitors of a website or webshop expects. There’s a ton to be learned from the internal site search and it can provide cheap and easy indicators on how to improve a website. It might show that certain content is unable to be found, even if it’s present or it might be an indicator for certain products that are trending.

I recommend reading this article by Louis Rosenfeld on Smashing Magazine as a more in-depth introduction to why it’s helpful to start monitoring internal site search results.

Setting up GA site search using a query parameter

I’m assuming you are accustomed to working with GA, so we’ll dive right into it. In the admin panel of the GA account there is a section called Site Search Settings. This section is used to link the search queries to the GA account.

GA assumes that the internal site search uses a GET variable to process the search query, so an internal site search page URL would have to look like this: http://www.domainname.com/search.php?q=Hannah+Williams+And+The+Tastemakers

By defining the query parameter, GA will look for all the URLs containing the q GET variable, because the value of that q variable, in this case “Hannah Williams And The Tastemakers” is what a visitor has searched for. The variable q can be anything as long as the search GET variable occurs in the URL.

Setting up GA site search using user friendly (or clean) URLs

User friendly URLs have a trade off: GA isn’t able to look for a certain query parameter because the search query looks like this: http://www.domainname.com/search/Hannah+Williams+And+The+Tastemakers There is no GET variable, so how can this URL be linked to the GA internal site search system?

The GA API allows to override the actual URL with a manually constructed URL. Below is how to do it in SolidShops, but basically it can be done in any CMS or framework and in any programming or scripting language.

How to configure GA site search using SolidShops

Having made good use of the SolidShops framework, it means a Google Analytics partial (or objects) was created and included in all the templates (or pages) of the shop. That way, if any adjustments are made to the partial it will be applied to all the pages of the shop where the partial has been included.

The code of the GA partial will more or less look like this:

<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-11111111-1']);
 _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

Now, using the SolidShops template language it is possible to overwrite the URL that is passed to GA with a custom URL. In order to do this, the _trackPageview variable needs to be overwritten with the custom URL as an additional argument. Make sure this overwriting only happens when a visitor is on a search page, if not it could seriously mess up the GA statistics.

In code this would look like this:

<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-11111111-1']);
 _gaq.push(['_trackPageview']);
 
 {% if solid.getUrlsegment(1) == 'search' %}
 _gaq.push(['_trackPageview', '/search/index.php?q={{ solid.getUrlsegment(2) }}']);
 {% endif %}

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
</script>

The if-loop makes sure that the URL overwriting only occurs when the visitor is on the search section. Next, create the custom opt_pageURL argument. The opt_pageUrl argument has to start with a “/”. The search path isn’t necessary, because GA will automatically categorize any URL containing a query parameter as a search URL, but it keeps things consistent.

The same goes for index.php: it isn’t necessary and can be any extension or filename you want or can even be omitted, but again, it’s there for the sake of consistency. Note that the the domain of your URL will be added automatically.

Add the GET variable by using the “?” to indicate the start of the GET array, then add the query parameter q followed by a “=” and finally add the actual search query. In SolidShops the search query is the second URL segment (i.e. http://shopname.solidshops.com/search/beer%2goggles).

Don’t forget to add the trailing colon to close the string. Additional information about the _trackPageview or any other GA method can be found on the GA API documentation page.

The final step is to change the configuration in GA as described in the “Setting up GA site search using the query parameter”-section earlier in this article and you’re done. Happy analyzing!

How to be 300% more productive as a web designer with Zen Coding / Emmet

If you are a web designer or web developer, it’s important to be as productive as possible. Don’t you also feel like you’re reinventing the wheel over and over again when crafting HTML and CSS templates?

If you are like me, you will feel like you’re repeating yourself over and over again for the simplest things like adding a doctype, creating unordered lists with list elements and so on.

There’s an easy solution to avoid typing the same tags manually over and over again and it’s called Emmet (it used to be called Zen Coding). With Emmet, you can code you templates with an abbreviated syntax that’s very short and easy to understand for anyone who’s used to working with CSS selectors.

Take a look at the following video to see how it all works and how easy it is to code in a much more productive way that you’re used to. Make sure to put the quality in HD and maximize the video to full screen to follow along.

When starting a new HTML document you probably want to include a doctype. Here’s how you can create the HTML5 doctype and base tags easily with Emmet. If you want to follow along, create a new template file in one of your SolidShops themes.

Enter the following short piece of code and press the TAB key.

html:5

This will expand to:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

Pretty sweet huh? Don’t want to use HTML5 but an xHTML Strict doctype? Easy. Type in the following short tag and press the TAB key:

html:xs

This expands to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
</head>
<body>

</body>
</html>

Now let’s take a look at the following example:

div#page>div.logo+ul#navigation>li*5>a

What the example above actually says is:

  1. create a div with id page
  2. inside that div, create a div with class logo
  3. also, create a ul with id navigation
  4. inside that ul we want five list items, containing a link inside each list item

After pressing the tab key, you get:

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

The same principle works for CSS files. Create a new CSS file and open it in SolidShops. Now let’s say you want to write the following:

background-image: url();

With Emmet, you just type the following abbreviation, followed by the TAB key, which will expand to the full CSS code above.

bgi /* when pressing TAB, this expands to background-image: url(""); */
bgc /* when pressing TAB, this expands to background-color: ; */
pt  /* when pressing TAB, this expands to padding-top: ; */
...

This works for all widely used CSS properties.

If you feel like learning more about using Emmet in your daily workflow (and you should!), take a look at the documentation page on http://docs.emmet.io/ or download the Cheat Sheet for easy access to all available shortcuts.

Happy coding!

How to save time building themes for your stores with CSS frameworks

At SolidShops we’re all about making you more productive. Our goal is to help you build stores and websites faster and better and you can do that by leveraging the power of CSS frameworks like Twitter Bootstrap and Kube.

We’ve created two vanilla themes you can use to kickstart a new SolidShops project. We’ve used Twitter Bootstrap and Kube Framework as our weapons of choice. In its simplest form, Twitter Bootstrap and Kube are nothing more than pre-written CSS files you can use to boost your design work.

Especially if you want to create a responsive design (you know, a design that adapts to any screen resolution like mobile phones, tablets, …) for your next client, you’ll notice that you can save hours by using the pre-defined css classes to define a responsive grid.

You can install the themes by logging into your store and by navigating to the “Design” and  “Theme store” tab.

There you’ll find the Kube Framework theme (which is easier to get started with) and the Twitter Bootstrap theme (which has more features but is a bit more complex).

If you’d like to take a look at how these boilerplate themes look like before installing them, we’ve set up demo stores for Kube Framework here and Twitter Bootstrap over here.

Because every project is unique and has unique design requirement, we’ve decided it’s better to ship a vanilla and stripped down version of the themes, so you can add in your own styles to customise the design to your liking.

We hope that these two frameworks will speed up your development time and workflow.

Let us know if you have any questions or suggestions on how we can make you even more productive. We’d love to know!

Introducing: Experts

People sometimes ask us: “Is SolidShops for web designers or for store owners”.

The answer is: both.

Let me explain. Store owners need a simple way to manage their products and orders. SolidShops does that.

On the other hand, store owners often want a unique look & feel for their store. Something that fits their brand perfectly. That’s where a web designer with knowledge of HTML and CSS comes in.

Web designers are using SolidShops to build stores faster for their clients. People that don’t have design skills also see the potential of SolidShops and want to get started themselves. That’s perfectly doable, until the point where they want to start customising their design to perfection. Web designers know that the only way to do that is by writing some HTML and CSS.

To make it easier for store owners to find a web design partner that can help them out with the design and more advanced implementation of their store, we’ve created an Experts page.

We’ve partnered with several freelancers, studios and agencies that deliver high quality web design work. Some of the experts have worked with SolidShops since the beginning. Some of them are designers we’ve met in person. Others might have a track record in designing stores on other platforms. All of them have great experience in building out web sites and stores for clients.

What matters is that it’s now easier to get in touch with a web designer if you feel the need to do so.

We’ll be expanding our list of experts continuously. If you are a web designer and you feel you should be included on the experts page, send us your details and portfolio and we’ll have a chat.

Keep building better stores everyone!