Posted by SolidShops on November 20, 2012 at 11:00 AM
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.
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!
Posted by SolidShops on November 09, 2012 at 02:31 PM
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.
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.
Posted by SolidShops on October 31, 2012 at 10:58 AM
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).
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!
I know what you’re probably thinking: “scheduling facebook updates isn’t authentic”. But think about this: here at SolidShops we have composed a large list of e-commerce tips for small businesses over the past months or even years. We’d like to share all those tips with our readers, but you know how much hassle it can be to plan for sharing Facebook or even Twitter updates on a daily basis.
In such case it would be very convenient if we could simply schedule one e-commerce tip every day to be published at predictable time intervals. That way our readers would know that they would receive an e-commerce tip every day during lunch time for example, while we can focus on delivering great support and building new features.
The good news is: now you can schedule updates on Facebook without the need for an external app!
To do so, go to your Facebook page as usual and type an update. You will notice a small clock icon in the left bottom corner just like in the screenshot below:
Click on that icon to reveal scheduling options for your status update. You can select a date and time slot up to six months in the future.
What’s also cool is that you can select additional options for publishing your update to for example only people in a certain demographic or country.
Managing your scheduled posts can be done from your activity log. At the top of your Facebook page, click on “Manage” and “Use Activity Log”. There you will find all your scheduled posts which you can edit or cancel at any time.
For those of you using an external app like Tweetdeck or Hootsuite to schedule posts, keep in mind that Facebook will probably give a higher value or so called Edgerank to posts that were scheduled directly in Facebook versus posts that are coming from an external app.
Tell me, will you be using scheduled updates and if yes, what kind of posts do you think can be scheduled without breaking the authentic connection you have with your followers?
Posted by SolidShops on April 30, 2012 at 02:49 PM
By using custom fields, there’s nothing you can’t do with your products in SolidShops. In the short tutorial I’ll walk you through how you can add in your own fields to be used for SEO purposes.
SolidShops does a great job for SEO out of the box by e.g. reading in your product description automatically, but if you want greater control over this process, you can do so easily by adding some custom fields to your products.
Let’s get started by creating a new field group called “SEO”. You can pick any name, just don’t use spaces in the group name.
Click the “Add a field group” button to create your first field group and give it the name “SEO Fields”.
Once we have this group, we can start adding fields, by clicking on the “Add/Edit fields” link next to the field group you just created.
To keep things simple, we will add one field that we can use to enter a specific product description to be used in our SEO meta tags. Name the field “seo_description” and give it the label “SEO Description”.
The “Field Name” is a unique technical name or ID if you will that we will use later in our templates to read out the value a user has typed into this field. The “Field Label” is what a user will see when editing product information.
Make sure to set the Field Type to “Text Area”. We want to be able to enter multiple lines of text for our product description meta tag.
We’re done configuring our custom fields. Now let’s add or edit a product. When you do, you will notice we now have the option to select a Custom Fields group.
Pick the group named “SEO Fields” you created earlier and you will see that the custom fields associated with that field group get loaded up in your products screen.
Now just add in the SEO Description you want and save your product like you would normally.
Now open your template named “product” and we’ll add in this data in the <head> section of your document. We want to use the custom SEO Description field you just added.
What the code sample below does, is check if there are any custom fields linked to this product. If there are, we will loop over all of them, printing our the seo_description field when we see it.
{% if product.custom_fields.SEO|length > 0 %}
{% for field_group,arr_field_group in product.custom_fields %}
{% for field_name, arr_field in arr_field_group %}
{% if field_name == "seo_description" %}
<meta name="description" content="{{ field_name.value }}" />
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
In your store, this will now generate the following meta tag, completely under your own control:
<meta name="description"
content="Sleeve for iPad. This unique banan iPad sleeve has
a unique color and feel to it!" />
If you prefer to just quickly load one of your custom fields, you can do so as well:
This example focuses on creating extra fields for SEO purposes, but of course, any other scenario is possible. Use custom fields to allow your clients to enter any type of data for the products they are creating.
Let us know in the comments what you are using custom fields for, we’d love to know!
Posted by SolidShops on April 25, 2012 at 10:06 AM
When you are using the SolidShops PDF invoices feature to automate the generation of your invoices in any style you want, you can run into a problem when your clients have non standard characters in their names.
Using characters such as æ ø å og Æ Ø Å can generate some weird looking stuff in your final invoices. Luckily, there is an easy way to solve this. Open up your PDF invoice template and make sure you add the following meta tag in the head of your template.
When generating the final invoice, we will detect the meta tag and use UTF-8 encoding in your invoice. This is tech-speak for “we will make sure that any non default characters get shown properly in your invoices”.
Thanks to our user Jon to make us aware of this problem.
Posted by SolidShops on February 29, 2012 at 11:12 AM
Clients love the ability to customize products and make them more personal. An example of a very successful business in this space is of course Nike, with their customizable NIKEiD program, which lets you build your own Nikes.
Not only can you choose the colors and materials used to fabric your personal pair of Nikes, you can also enter a custom text to personalize your pair of shoes to the max, which is awesome.
Now you can also use SolidShops to support customizable products in your store. Let’s take the example of Nike’s shoes above, to ask our clients for a custom text to stitch on to their shoes.
Of course you can use the same techniques mentioned in this article for a lot of other use cases, like asking what the preferred delivery time is for a specific order.
Asking users to customize a product
To start with, we need to edit our product template. Go to the design section of your store and selected the “product” template.
The tags used below can be added to any product template to ask a user for extra information. Whatever a user prefers to enter in those fields will be added to the order data in your store backend. You could also add this data automatically to your PDF invoice templates.
Let’s dive in:
We’ll ask a user to enter his or her custom text to be stitched on the shoes they’re buying, just like Nike is doing. To do so, add the following tags to your product template inside the form that will add the product to the shopping cart. This form should have your “Add to cart” button inside of it as well.
<label for="custom_text">What text should we put on your shoes?</label>
<input id="custom_text" type="text" name="item_attributes[custom_text]" value="Your text here" />
The important attribute here is name=”item_attributes[custom_text]”. You can use any other term instead of “custom_text” if you wish. The term you use to describe this extra information will be visible on the order details.
That’s it, the information entered in these text fields will now be automatically submitted to your shopping cart and to your order info if the order gets placed. When you view your order details in the backend of your store, you will see the text the user has requested to embroid on his or her shoes.
Asking to customize an order
Notice that we’ve customized a single product in the example above. This will allow you to let a user customize multiple products and add them to your shopping cart. For example, a user could buy three pairs of shoes and customize them all with a different text.
What we’re going to do now is a little different. We’ll ask a user for extra information about the complete order, not just about one single product. A good example here is asking what time a user wants us to drop of the order or to ask if we should gift wrap the order as a present or not.
To do so, edit your “cart” template and add the following field within the form tag of your shopping cart.
<label for="delivery_time">What's the best time to deliver this order?</label>
<input type="text" value="{{ cart.attributes.delivery_time}}" id="delivery_time" name="cart_attributes[delivery_time]" />
Presto! You are now able to grab extra information for an order.
Conclusion
You can add up to five custom attributes for products, as well as for your complete order. The names of the attributes you are using can be anything, but keep it simple for your own sake.
I’m curious what you’ll do with these additional product and order attributes, so don’t hesitate to post some creative solutions in the comments below! We really hope that this will help you build better stores for your clients. Good luck!
Posted by SolidShops on January 29, 2012 at 08:28 PM
Sometimes it can be nice to show related products on a product page, so that your visitors can more easily browse your store. To do so, we’ll be using product tags to match products to each other. To start, add a couple of products to your store and don’t forget to fill in the “tags” field with tags that match the products, like “coolstuff”. I’m just making up a tag here, use anything that’s logical for your own store and products.
In your “product” template, load up the current product as follows:
{% set current_product = product.get() %}
{{ current_product.name }}
Next, we will get a list of products, but only those that match the tags that have been entered in our currently loaded product. Here’s the snippet you can use to do just that:
{% set related_products = product.getList({"tag":current_product.tags}) %}
{% for p in related_products %}
{{ p.name }}
{% endfor %}
There you have it. Related products in just a few lines of template code.
If you’d like to see more of these little code snippets, let us now in the comments below. Enjoy!
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.
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.
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:
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!
Posted by SolidShops on September 10, 2011 at 02:34 PM
A few of our amazing clients have asked for a way to do some random stuff with their templates, like showing a random background image in their layouts. This and many other examples can be accomplished by using the random function we’ve added to our template language. Let me explain how it works:
The random() function can be used in your templates to generate a random number between any two numbers, like so:
{{ random(1,10) }} //prints any random number between 1 and 10
{{ random(2,5) }} //prints 2, 3, 4 or 5
If we use this together with an array, we can easily build the example that was requested by one of our clients to show a random background image to its users.
First we create a small array with any number of background images we want to shuffle:
{% set wallpapers = ["image1.jpg", "image2.jpg", "image3.jpg"] %}
As you might know, arrays always start counting from zero, so element 0 is “image1.jpg”, element 1 is “image2.jpg” and so on. So if we take this one step further, we need to be able to get one of those elements randomly, by picking any element 0, 1 or 2 from the array.
{% set whichwallpaper = random(0,2) %}
That will give us either 0, 1 or 2. Now that we’ve got our random number, all that’s left is grab the correct image from the array and show it as a background image in our templates.
{{ wallpapers[whichwallpaper] }}
That will print out “image1.jpg”, “image2.jpg” or “image3.jpg” depending on the random number that was generated. Putting it all together, we can now show a random background image to our users like so:
{% set wallpapers = ["image1.jpg", "image2.jpg", "image3.jpg"] %}
{% set whichwallpaper = random(0,2) %}
<body style="background-image: url('{{ wallpapers[whichwallpaper] }}')">
Et voila, there you have it folks. Make sure to post any questions or remarks in the comments below.
Let's get social shall we?
We'd love to know what you think. Join the conversation about your hosted e-commerce solution.