How to Create an E-Commerce Website Using Headway

Many small business owners are surprised to find that WordPress is not just a blogging platform – it’s a full-featured CMS with the tools that any small business owner needs. Add to that the veritable buffet of themes for WordPress, free or paid, as well as thousands of plugins, and it’s easy to see why many of the self-employed masses decide to forego the web designer and give it a shot themselves using WordPress.

With theme frameworks such as Headway, it becomes even easier for the small business owner to create a fabulous looking website without the help of a professional designer.

Between WordPress’ default functionality (such as a static homepage) and Headway’s flexibility (such as multiple page templates created within mere minutes) you can have a site up and running in 10 easy steps.

Please note: This tutorial assumes that a) you have installed WordPress and b) you have purchased & installed the Headway Theme. If you haven’t met these requirements, bookmark this & come back!

Step 1: Getting Ready

If you have an existing small business site on WordPress, I strongly recommend that you install the Theme Test Drive plugin for development. This will allow you to keep your current storefront for visitors and also enable you to work on the theme, access theme options, and generally do whatever you’d do if the theme were fully active when logged into your Dashboard as an administrator.

If you don’t have an existing WordPress site, I’ll assume that you’re either using Theme Test Drive or you have the theme active on a non-navigable portion or your site, or within a sandbox environment.

Now that you’ve got the theme options available, spend a few minutes thinking about what you’d like the site to look like. Do you plan to have a static home page? Will you be maintaining a blog? Consider sidebars – how many, what order, do you want a widgetized footer?

For the purpose of this tutorial, let’s assume that you would like to create a small business site with a layout like this:

Step 2: Set Up Your Home Page

In this example, we’ll be using a static home page with content about our services to draw in our readers. To do this, go to your WordPress dashboard and create a new page by going to Pages –> Add New. Title this page Home. Don’t place any content yet – just publish and go straight to the visual editor. From the WordPress Dashboard, go to the Headway Menu –> Visual Editor.

First we’ll need to set the site width. Let’s go with a site width of 1024px. That should give us enough room to work with, while not being so wide as to look terrible on a smaller screen. Go to Site Configuration –> Site Dimensions to edit this value. It defaults to 950px. Next, ensure that under Site Configuration –> Header –> Header Options and Site Configuration –> Footer, Fixed Header and Fixed Footer are ticked.  Also under Site Configuration –> Header –> Header Options, let’s toss our navigation over to the right-hand side.

Now to add the leafs. Go to Leafs –> Add and go ahead and add 1 Text/HTML/PHP leaf, and one Photo Gallery leaf. You should have a content leaf and a sidebar already present on the page. Enable leaf resizing and rearranging under Leafs –> Utilities. At this point, it’s easier to rearrange if you close the left-hand drawer, so you can use the “handle” on the right edge to drag that back to the side of your screen.

Rearrange your leafs so that they appear in this order.  Use your site plan as a general guide for size & dimension. (Hint: Click any image in this tutorial to enlarge and read my notes)

1. Text/HTML/PHP Leaf
2. Photo Gallery Leaf
3. Sidebar
4. [Next Row] Content Leaf

Click to enlarge

Notes: The Text/HTML/PHP leaf and the Photo Gallery Leaf should be a fixed height. Toggle whether a leaf automatically resizes by hovering over it and clicking the little window/box icon. If the arrow points down, the leaf does not expand automatically. If the arrow is not present, the leaf will expand. The other leafs – content and sidebar – can auto resize.  You will also need to ensure that the sidebar is toggled to Right Align. Hover over the sidebar and click the blue arrow so that it points away from the right side of the screen (this indicates that if you click it again, it won’t be right aligned anymore, rather than indicating the alignment direction). To resize leafs, hover over the right or bottom edge, click and drag. To move a leaf, just click & drag anywhere on the leaf.

At this point, it would be wise to save. Go to Headway (top navigation) then Save. Wait for the editor to reload and go to the next step.

Step 3: Add a Little Content for Context

Even if you don’t have your copy ready, it helps to see the site with something other than blank boxes. Let’s add a little content to get some context.

Uncheck "Show Title"

Hover over the Text/HTML/PHP leaf, and click the pencil. A box pops up here – you have the option to enter in either text, HTML code, PHP or a mix. We’ll just be using HTML and text in this example. (and example of php code that could be placed here would be a plugin such as the Featured Content Gallery).

Enter some text into the large white text area, then click the X to close the box. If you like, you can style that text with HTML or inline CSS. Go to Headway –> Save and see your changes. You may need to edit it a few times or resize your leafs if all of your text does not fit into the allotted space.

Click to enlarge & for notes

While you’re there, grab some stock images from iStockphoto and upload. You can grab comp images for now, though you’ll want to purchase full rights if you intend to use these images on your live site. Upload these images to a photo gallery by going to Headway –> Advanced Leafs within the WordPress backend (not the visual editor). Once you’ve created a gallery, you can select it when you hover over the Photo Gallery leaf in the Visual Editor and choosing it from the drop down. Configure the rest of the gallery options (including choosing a height and width for the thumbnail previews!) Once you save, you’ll see your gallery in action. Looks great, doesn’t it?

Click to enlarge

Step 4: Configure the Content Leaf

By default, the content leaf is set to display your most recent posts, or, if you are on a page, to display the page content. We are using a static home page as our main page, and we can tell WordPress that we want to display static content and not the most recent Hello World! post in two ways. We can either define a static home page on the WordPress Dashboard under Settings –> Reading, or we can configure this content leaf. For the purpose of this tutorial, and because it doesn’t much matter, let’s configure the content leaf.

You will want to leave the Mode set to Page/Default Behavior. Looking further down in the configuration, choose to Fetch Content from Other page. In that drop down, you will find the Home page you created in Step 1.

Select Home, click the x, then Headway –> Save to see the result. You won’t see much until you add content here, so you may as well go to the Edit page for the Home page (back on the WordPress dashboard) and enter something – anything at this point, or if you have copy, insert that marketing copy.

For good measure, go to Appearance –> Widgets while you’re over there, and add a few widgets to your sidebar. You can add anything you want – right now we just want to see how it all looks with content.

Back at the visual editor, hit F5 to refresh and review the result.

Click to enlarge

Congratulations! It’s rough, but you have the structure of your home page all set.

Step 5: Style, Style, Style

Whether through the use of custom.css or via the Design editor, every website needs a color scheme and design touches. Your design will match your logo, company colors and fonts, etc. Your website represents your brand, and you’ll likely spend a lot of time on this step. To edit various colors, fonts & sizes, you’ll need to use the Design Editor area of the Visual Editor.

As you mouse over various areas of your design, you’ll see what style elements are used in that area reflected in the Inspector box. You can use the Element Selector to edit and call out (click Call this Element Out to see it highlighted on the page) your leafs, fonts, colors, etc.

You may upload a header under Site Configuration –> Header –> Header Image.

Your site will, hopefully, not employ this color scheme. However, you should get the point – from the design editor, nearly all options are editable. If you find something lacking, you’ll have to use custom.css to achieve it. If you don’t know how, someone at the Headway Theme forums probably will.

Don’t forget to save!

Step 6:  Create Additional Page Templates

Now that your home page is structured, you’ll want to set up templates for pages you’ll add such as Services, About,etc.  It’s time to go back to the visual editor. You’ll want to choose “Switch Pages” and choose the appropriate page from the list provided, then click Switch to Layout.

By default, this new page will have only a content leaf. You’ll likely want to add at least one sidebar.

Just as before, go to Leafs –> Add, choose sidebar, and arrange and resize leafs as necessary.

You have a choice with this sidebar; you may link it to the sidebar from the homepage, which means that it will display whatever widgets you add to the sidebar for the home page, or you may allow it to be a separate sidebar. Either way, you’ll need to hover over the sidebar and click the pencil.

You can define the name of the sidebar in the top box where it says Sidebar 20 currently in the image to the left. If you wanted to link this sidebar to the home sidebar, you will need to enter the sidebar ID into the Other Sidebar ID entry box. (To find out the ID of the home page sidebar, Switch Pages to the home page, hover over the sidebar, and note the number that appears next to the cog symbol on the left top side. )

If you link this sidebar to the home sidebar, whatever name you enter at the top box won’t matter.

Under Look & Feel, you have the option to disable padding (not usually a need) or flip the sidebar for use as a widgetized footer (you could add a widgetized footer to the home page or template to display additional information along the base of the site – just like this page, in fact. Scroll down for an example, I’ll wait!).

Miscellaneous allows you to define whether or not to display the leaf title, and if so, what (if any) URL the link title should forward to.  On the miscellaneous tab, you also have the option to enter custom css classes (not the full css, just the class) that you have defined in custom.css, if you were so inclined.

When you are finished adding & resizing leafs, if this is your only page template, simply save & link (Headway –> Save & Link) all of the pages you would like to have this layout. If you are not done, just lather, rinse, repeat.

As you add pages to your website, you may either use Save & link in the visual editor to apply the page template, or you may assign a page template on the edit page area in WordPress.

Step 7: Configure SEO Options

From the WordPress Dashboard, go to Headway –> Configuration. Go through each option, filling in all the appropriate information. A Feedburner feed will help you track who is keeping track of your site via an RSS feed – you can define that here. The Search Engine Optimization area will be important.  Here you can edit and define your keywords, site description and more. When you write blog posts, don’t forget to define individual keywords, post titles, descriptions & excerpts for each post. This will increase the chances of someone finding your site via a search engine and, hopefully, sticking around to spend some money!

Also of note are the options to enable or disable the Design editor, remove the Visual editor link, and set up Twitter to auto-tweet when you post new content on the site.

Step 8: Choose & Configure Plugins

An e-commerce website needs a good shopping cart plugin and functionality. If your budget is tight, the PHPurchase shopping cart plugin has a great suite of features, regular development and upgrades, and a low price tag – around $60 one-time cost. If your budget is nonexistent, you may consider the free version of plugin WP e-Commerce. You can upgrade the plugin at a later date with add-on modules such as Gold Cart.

Configuring these plugins can be involved, but a thorough read-through of the documentation makes it relatively simple.

Consider creating a separate page template specifically for your services page, with additional leafs such as an image rotator leaf that displays your product images, a Text/HTML/PHP leaf that you can populate with specials or discounted offers, and a separate dedicated sidebar to place your Shopping Cart or additional services navigation.

You should also consider WP Greet Box, a great way to provide relevant information to visitors based on the referring site (i.e. providing visitors from Facebook with a link to become a fan of your page & a special Facebook promotion, or welcoming visitors from Google with a customized message).

Finally, you’ll want to install a tracking software. My favorite is GetClicky, with a full-featured free version and a paid version for those who want to track campaign goals for certain pages, downloads and even name individual visitors.

Step 9: Review, Add Final Content

The final step is to get all of your final content on the site. Style your pages & posts with HTML and CSS, help it pop! A graphic designer, or a little experimenting with GIMP Tutorials may yield some custom buttons and graphics to enforce your brand.  Look up good copywriting practices and employ them throughout the site as much as possible. A great design won’t mean anything without content to match.

Review your site – click on every link, go back and forth through the navigation as much as possible. Ask friends, family, and third parties to test your site to ensure that visitors can understand how to get around your website, view your offerings, etc.

Step 10: Launch

For a successful launch, you’ll want to build some suspense and offer an incentive if you can afford it. Try to leverage your social media networks to garner a buzz around your site. If you put up a temporary template such as Launchpad or Changing Room, you can still gather followers via email and RSS feeds. You may have a following before you click the “Activate” link for your new design!

Set a date for your launch and make sure you have everything ready several days before. There are always additional details and delaying a launch may have a negative effect on your customer base.

Do you have questions or comments about this tutorial? Feel free to contact me or post your question in the Headway Theme Member Forums.