CommerceM4 - eCommerce HTML Theme Pt 1

It's cool to have the greatest and most unique products to sell which pretty much no one else does, it's nice to be able to sell something just a bit cheaper giving the buyers a break or even gather the most valuable and high-quality stuff aiming for the top-level customers and not making any compromise with quality. But either way, there isn't much use of our efforts if the people actually willing to buy something don’t really know we and the great products we've to spend efforts and money collecting actually exist.

There used to be days when it was enough for one to rent a place at a decent location, set it up in a beautiful way, give away some banners and coupons around the block and just serve the customers coming up the front door. These days are gone.

Let's admit it – whatever we need we don’t actually go out on the street looking at the store's windows and even rarely roam around the malls hunting for the best price which quite often is initially pumped up to be then split in half with a shiny red label on it. What we do is look up whatever we need on the net and just then sketch up the plan which stores to visit or just buy it from the online store we liked most not leaving the comfort of our own home.

So, if we buy this way I guess we should try selling this way as well – leveraging the huge and growing by each day power of the Net.

However, web design agencies are not coming cheap and there always is this odd moment when you're spending your time in endless conversation trying to explain how exactly you want it and why ending up with let's say almost fine result and deciding you will live with it since you can’t afford more time to waste and need your store running better than perfect. So in time each day when you see those rough edges working with your site, you get reminded of the compromise you made.

On the other hand – there are quite a few online services shouting out loud you can set up your store in just a few clicks saying it's easy as pie to do it but once you get to look a then closer it turns out the layout options are limited to one or two possible appearances and once you start with them there is actually no getting out of this carousel since you're also getting bind to the hosting and domain service they specify, additional monthly fees which are far from fair and at the bottom line - you'll be paying tons of money every year and still using your Gmail email for contact.

Of course, since no one can give shape to what’s inside your head better than you – the best way is to do it yourself. The most common way you've probably heard of is you can use a CMS solution which they way are easy to work with and get your site on your own. That's true as long as you can dedicate at least a few weeks learning the basics of how these work, how to deploy and install them on server, pick up the right theme and extensions and figure out how to make these all work together at least nicely – pretty much like gathering a car from scratch buying the stuff from eBay (and not from the local warehouses you can drive with your car – which pretty much proves how important having a web store is once again)

And of course – there is this one percent possibility you'll get to the right web design agency from the first time, they will understand you exactly and do it from the first time as you dreamed it to be. And of course – it could eventually be owned by your very best friend so they do it for free or at a symbolic price. If this is your case – do read further to see how to return these guys the favor giving them a tip how to improve their workflow even more with the very next best thing in web design and web pages prototyping.

But in case you consider yourself a part of the rest 99% sellers out there looking for a way to easily set up their online store exactly as they need it to – carefully picking up the place each and every element should take – there is a big probability this one will give you the answer.

Amazing as it might sound

There is this revolutionary web design application called the Mobirise Mobile Web Builder which pretty much gives the power to create great looking responsive websites in the hands of the regular folk. The whole design process with it gets narrowed to just dragging and dropping the appropriate blocks from the really vast library and then – making them look exactly as you want to using the convenient Properties Panel each of them has. Believe it or not, it's not much different than writing a regular text document or an email but you end up with a great looking entirely mobile-friendly website at the end.

And the most recent fourth version of the application comes fully packed with Bootstrap 4 (which in turn is the latest version of the most popular framework making the web pages automatically transform to display beautifully on any screen – big or small) powered themes with cleverly predefined appearances serving all kinds of purposes – like showcasing an creative agency, a law firm or a hotel and most importantly – ecommerce HTML themes for creating amazing web stores in just a few clicks.

What's different and unique here is the way things are getting done – entirely offline until you decide to upload your project to the hosting you've selected. And within the Mobirise Builder visual editing interface you see the actual way the page will look like all the time, editing it as a regular document – clicking to type text and replace images, dragging things around to replace them and flipping some switches to set things up viewing the result in real time without having to leave the main application so the whole process is quite intuitive and it takes no more than a few minutes to figure out what's doing what.

So over here we're going to take a look at the Mobirise Builder's latest online store CommerceM4 ecommerce HTML theme for Mobirise Builder which has pretty much all it takes for a person without any knowledge in web design to create an amazing web store in a day.

The design behind the ecommerce HTML theme

Since it’s a buyer-oriented html5 eCommerce template pretty much everything in CommerceM4 html5 eCommerce template is set up to be interesting grabbing visitor's attention making it hard to get bored and browse away. There are numerous tiny things making the page live and interactive – like the option to make the buttons pulse once you hover them with your mouse – like if there is a hidden treasure laying underneath or the subtle adjustable gradient overlays appearing when you hover an image, often holding some useful information about the product on the appealing picture underneath.

The overall impression from the theme’s layout I got was the design team aims for large, leaving pretty much just a few things in visitor’s view so the people coming visiting the site could take their time looking over a particular item or category grabbing their interest and go on to the next one without having them too close to each other. The benefit from this approach is that this way you get all the potential customer’s attention focused at one or a limited number of things so they can easily look over each item in detail, get grabbed by it and read further or just purchase it.

If there are too many things sharing the same view and seeking for attention it’s possible for the one looking at them to be difficult to decide on what to focus, get the whole thing as rather a crowded background and walk away eventually missing some great stuff they would otherwise love and buy.

Additionally, since it’s mobile friendly web design we’re talking about once the screen gets smaller all the elements automatically rearrange to obtain even better appearance following pretty much the same approach – a few important things taking place together in a single view leaving the visitor-focused.

When it comes to structuring the text, a unique approach has been taken – placing the subtitle over the title which in turn gives the option to focus on what’s really important placing it in the middle of the sentence still having a few words to introduce it first. This way the attention gets grabbed even more and since all the elements in the Mobirise Builder blocks can be easily controlled to your taste – you can use this feature only when you need to. Good thing is you do have it as a main expression element all around the CommerceM4 ecommerce HTML theme.

And if you want to spice things just a little bit up – just outline a part of the heading or subheading making it bold or italic

There also are quite a few cool ways to grab your visitor’s attention amazing it pretty much form the first glance like the scrolling adjustable in transparency text feature for example. Just imagine how cool it would be to have an appealing sentence scrolling through your block’s background gracefully promoting your product. Well with CommerceM4 html5 eCommerce template it’s easy – just fill in the text, adjust its appearance and enjoy the amazing result you’ve achieved in less than a minute!

Another design approach pretty much ruling the ecommerce HTML theme are gradients and live joyful and sparkling colors in the predefined appearances– you can see them all around. The graceful transformation of one color into another implies of movement, progress adding the page this additional pinch of elegance which sometimes differs the good stores than the ones being really amazing and it can be achieved with ease by just selecting the start and end color you would like to blend in the block’s properties panel.

And the bold vivid colors which can sometimes be even used in pairs for some of the blocks backgrounds can be easily used for making the product’s presentation even more interesting. And of course – each one can be set up to your taste from the Block’s Properties panel with ease since what these do is not dictating your site’s appearance but rather giving you a kind tip on how to use your own colors for achieving great results.

And as it can be seen the blocks are so flexible, they often combine a few design approaches in a single block giving you the ability to choose which of them to take place in order to achieve the best presentation possible – like having two colored backgrounds with a scrolling semitransparent text under a product image and description for example

The utilization of space has been carefully considered – you can, for example, present the great items you have in your store in a gallery but also have them sorted out by tags with a live filtering feature so the visitors easily look up only what’s important to them on a single screen

Or get together a short video and safely hold it within a header block to have it displayed on the entire device’s screen only when the users went it to meanwhile using the block as a regular header utilizing the precious screen space as best as possible.

When it comes to images – you can have those not only all over your blocks and in filterable galleries but also in freely sizable in both width and height image sliders or take the entire screen grabbing your visitor’s entire attention.

Which in turn leads us to another thing making the CommerceM4 ecommerce HTML theme for Mobirise Builder unique

You can set up any shop layout you can imagine

With it since pretty much any image, button and in general – anything you can assign a link to can be used for your visitors making an actual purchase. What this really means is that you’re no longer bind with the boring boxed layouts of the CMS powered stores and can carefully craft your store’s appearance just like you would have if it was an actual place with showcases and shelves.

All you need is a vision about how you want your new online store to be looking like, the imagination to figure out which blocks to use and just a tiny bit of routine since working with the Mobirise Builder is rather easy and intuitive from the very start. With the CommerceM4 html5 eCommerce template and the powerful PayPal plugin turning any link into a Buy now or Add to Cart is just a breeze.

This is being said in case a strongly personalized web store is what you are after but it’s quite far from being it. The html5 eCommerce template also comes heavily packed with powerful blocks for showcasing your products in the regular boxed layout as we got used to seeing online stores in time.

And unlike the CMS solutions once again it takes pretty much no effort to get how to exactly set the properties and descriptions of each product – it’s so easy – just click on it and it will pop up in a lightbox where you can just edit any part of the description by simply clicking and typing as if it was a regular text editor you are using.

When it comes to setting up the images – this gets done through the convenient Block’s Properties panel – as if the shop block was a regular Gallery block but with a few more product specific options.

You can select to make any of the products stand up as a bestseller or sale item also announcing its old and new price, assign tags to the products and of course – set the appealing images that will present them best.

But there is even more – the html5 eCommerce template shop block comes packed with a powerful filtering feature which can be turned in with the plip of a switch and easily adjusted with a few more to display cool buttons ordering the products by their price, filter then in a price range or by tag and even display the products you have chosen as best sellers so the user always has them at a glance.

That’s how easy and cool it is to create a web store with CommerceM4 ecommerce HTML theme for Mobirise Mobile web builder.

Now that we have looked over the ways to present your products nicely and grab your potential customer’s attention let see how the CommerceM4 html5 eCommerce template can also be used to

Enhance your store even more by adding some useful content

Have you noticed that many times searching around the net for some info on a topic you are currently interested in the article that happens to be providing the needed information takes place on a site selling a product or a service? So, once you’ve managed to do whatever you were up to with the help of the information you found there you stick a while a little more getting to know a bit more about the people that were kind enough to post it. This way the free useful information published on the site comes to be the reason you also get familiar with the products and services showcased for sale there. Will you purchase something or not – the time tells - but the main thing here is you have seen it getting aware these things sold there actually exist. And of course – in the most common case – the topic of the article is one way or another linked to the products/services the site has for sale.

• Part 2 »