I know you've all read our recent product update (!) but here's a wee article showcasing our new design features, because images speak louder than words. So here's a run-through: We created a demo sunglasses store on Airsquare, using the new features, so you can see what you can achieve yourselves. Here's the screen shot of the home page:

Let's break it down:

Header Images

I used a header image for a modern feel and to draw attention to a relevant heading, with accompanying button link straight to the shop. You can edit the height of the header image and change the colour settings, so that your menu links look clear against the image. You can also add several header images to create a slideshow.

Find out more about Header Images.


Image List Widget

Next, I created a new row and added an image list widget; I set the images to be round and listed horizontally; then I linked them to my product categories page. Using the new row features, I set the background colour to black for dramatic effect! For help on how to do this, scroll to "How do I add a background colour to a row?" near the bottom of this help doc.

Product Panel

Next up, I created a product panel widget, which many of you are probably already familiar with. This allows you to easily showcase certain products without fiddling around with image re-sizing again.

Background Images for rows (woohoo!)

Ooo, I had fun with this feature! You can now add background images to your rows, which will really make your website pop and look more dynamic. For this one, I uploaded a background image to the row using the edit button; I made the colour of the text white and increased the image opacity quite a bit, to make the text easier to read. Because I only wanted to use a little bit of text, I had to increase the padding substantially to almost 200pixels top and bottom. You can just use large amounts of top and bottom padding to create a full-screen image, with no text overlay. To find out more about background images for rows, scroll down to "How do I add a background image to a row?" on this help doc.

Background Patterns

I chose a very subtle speckled background pattern, but you can obviously go to town. You'll need to find a seamless, repeating tile pattern, preferably a PNG file. A good website to check out is subtlepatterns.com, but any of the stock image websites usually have good options too. Again, I changed the text colour to white and also edited the panel background colour to blend in more to the background. To find out more about background images for rows, scroll down to "How do I add a background image to a row?" on this help doc.

This is just a taster of what you can do on Airsquare using the new design features. I'm sure you'll have fun updating your website. If you need help, give us a shout at helpdesk@airsquare.com - If time is an issue, or you feel overwhelmed with the design side of things, get in touch and we'll refer you to one of our awesome partners for a design quote.

Have fun and look out for more Airsquare design improvements coming soon!