How to Build an Ecommerce Website Using Moonfruit [Part 4]

Building your Website (Design Stage One)

Moonfruit Ecommerce – In the recent weeks we’ve been sharing with you our cool tutorials on how to use Moonfruit to create an ecommerce website, and in this being the fourth instalment in the series, we’re going to take a look at all the tools in Moonfruit’s SiteMaker and how to use them effectively to build the best ecommerce site possible, we’ll also start working on the early stages of designing the core elements of our ecommerce website project.

Firstly let’s look at the main tool bar and check out some of the options available –

Save – Saves your progress in building and designing the pages of your website

Files – Allows you to access photos, videos, forms, widgets graphic elements and much more to build your site with

Edit – Opens up the page editing tools and options

Insert – Allows you to quickly and easily insert title and body text boxes, shapes, image tools, audio and video and social tools plus much more…

Design – Allows you to access the design options such as site size, margins and alignments as well as background and icon, menu and the page master

Services – Allows you to access the Google services provided with your Moonfruit site including integrating Google Analytics code, enabling Google AdSense, configuring Google Webmaster tools and much more

People – Allows you to manage your website’s members and subscribers complete with member’s privileges and email newsletter options

Domains – Allows you to manage your Moonfruit hosted domains

Blog – Allows you to post, edit blog posts and articles

Shop – This is currently in BETA release but already proving to be a very powerful addition to Moonfruit’s SiteMaker. Manage your products, prices, shipping costs, categories, status and even share the things you sell on Facebook and Twitter, plus Facebook page shop options…

Admin – Allows you to access the admin options


Now take 10 minutes or so to familiarise yourself with all the tools, features and design options available in your Moonfruit SiteMaker panel.

Design Stage One

The Page Master

The page master is ultimately where most of the main design elements will take place. Your ecommerce website’s header, navigation bar menu, product category menu and footer will be placed here, so let’s take a look at doing this right now…

Site Size, Margins, Wallpaper and Favicon

Before we move onto the main design elements I want to quickly show you how to change the size, margins, alignment, wallpaper and icon of your ecommerce website.

Go to design in the main menu options and in the side menu you’ll see some more options. Find the option site size and click on it and it will open a site settings box. From here you can make all the necessary changes to the size of your site and the margins as well as customise the background with a wallpaper of your choice and even upload your own Favicon.

Moving on…

Right, now that you’ve seen how to change the size and margins of your site, let’s really get creative. We’re now going to add some of the main design elements to our ecommerce website and we’ll do this in the page master, but before we do, first get rid of the giant BLANK text on the home page of your site, simply left click on it once to highlight it and then hold shift and hit delete and then hit the save button.

Lesson learned

How to delete items

Right, now go to design in the main menu options and then select page master from the top of the side menu.

First thing we want to do is add a header bar, you don’t have to it’s entirely up to you but in this tutorial we’ll do just that. So go to insert in the main menu options and hit shapes in the side menu to bring down the shapes options and select the square shape by clicking on it once, simple.


Use the pointer points located on the shape itself to change the shape of the square to elongated, and then drag the shape to the top of the page to represent a header. To move an object simply click on it once to highlight it and then holding down left click again whilst the pointer is over the object, drag it anywhere you want on the page.

Lesson learned

Highlight and drag items

You can also edit the shape i.e. change background colour, gradient, border options and add an effect all using the editor box. The editor box is always prompted each time you select an item on a page. So by selecting the shape, the editor will then give you the options to edit that shape, I’ve used a gradient background using two colours, removed the border and added a drop shadow effect for my shape.

To removed the border simply enter the value ‘0’ in the box highlighted in the image below.


Site Menu

If your site menu at this stage appears to be in the way here’s how to relocate it… Firstly hit the save button to save all progress so far. Staying on the page master go to menu in the side menu options, this will bring up the global design settings box.

In this box there will be options to change the style of the menu buttons including text colour, button background colour and more… or even choose an entirely new menu style from the library. For now though I just want to reposition the menu, so hit the reposition and scale button as highlighted in the image below to move and resize your menu around the page, once you’re done hit the save button.


Adding a Header Title and Tagline

We now want to add a header title and tag line to our ecommerce website which is very simple to do. Staying in the page master, go to insert and under basic objects in the side menu select title text.

Move the title text box into your header, double click on it to edit the text and change the name. I’ve used ‘demo ecommerce website’ and the tagline ‘welcome to my online demo store…’ I’ve also inserted and used a body text box for the tagline.

You can change the way the title text and the way the body text appears simply by editing it in the editor box as mentioned earlier in the post. Click once on which ever one you want to edit and go to the editor box options to make your changes. Remember to hit the save button each time you make changes.


So now you pretty much have your ecommerce website header looking as basic as possible. You can pretty much use the same design options to create the footer for your ecommerce website in the page master also. You don’t have to keep bouncing from menu option to editor to achieve this, simply highlight the header background you’ve just created by clicking on it once and hold down Ctrl, shift and press D to duplicate it, you can do this on any item on any page of your site. You can even highlight multiple items by holding down left click and dragging the mouse pointer over the items you want to highlight and then use Ctrl, shift and D to duplicate them.

Lesson learned

Copy & paste shortcut

Moonfruit has tons of design options, cut-outs, images and graphic elements to choose from the library so make sure you experiment with different shapes, colours, images and backgrounds to make your ecommerce website as unique to you as possible.

In the next post we’ll look deeper at adding more design elements to our ecommerce site, customization design tips and tricks and how to effectively use the ShopBuilder options in Moonfruit.

If you’d like to see what a completed ecommerce website looks like using the power of Moonfruit check out my online art website at

Related Posts Plugin for WordPress, Blogger...
About Fabrizio Van Marciano

Fabrizio Van Marciano is the founder and chief editor at and the author of 101 Blog Traffic Tips. Connect with Fabrizio on Twitter, Facebook and Google+. You can find out more about Fabrizio here.


  1. I have never heard of the moon fruit site maker but it seems like a good option for me. It also seems quite easy to start using and very simple to understand. I am sure that some people who want to set up websites will find this information of great help.

    • Hey FRE, thanks for stopping by again. Moonfruit is an awesome easy to use site building tool that I think everyone should know about. They really are sending out the signals that you don’t have to spend time and money building a website from different sources, you can achieve it all under one roof. I’ve been running my online art business powered by Moonfruit since 2004 and I’ve been doing that fulltime for the last 5 year without ever having to worry about technical issues, I create the site the way I want it to look using simple drag and drop. I am currently working on several new client projects and will be posting screenshots of them on the blog shortly.

  2. Tony Mack says:

    I agree with Franklin real state. It is really for me quite an information knowing that there is an easy way of building a website of your own. Thanks for that. Anyway, do i need to have a background on web designing to work with Moonfruit?

    • Hi Tony, nope you don’t need no background or programming skills, as long as you have a creative flare anyone can use Moonfruit. Moonfruit will be rolling out more and more features in the future that I’m sure. Moonfruit even do a reseller package where you can build sites for clients.

  3. w3t says:

    Hi Fabrizio Van Marciano ,
    i am web developer and your post is very helpful.

    w3t recently posted..The Story behind WikipediaMy Profile

  4. Avinash says:

    Nice tutorial and thanks for the great article :)

  5. Mark says:

    Really good piece of information, i am building a website related to books selling and it will defiantly help me on that.
    Mark recently bedroom furnitureMy Profile

Speak Your Mind


CommentLuv badge