Creating Your Shopster Online Store Homepage

Like many of our customers, I have very limited design experience and minimal technical knowledge. My goal today is to build a Shopster homepage that is both professional in appearance but simple enough that anyone can replicate the steps. I will also be using the functionality provided with a free account, which means no access to the css and frame file, so we will be limited to making all changes directly on the page. Let’s get started.

Creating your logo

1. Go to page: http://service.shopster.com/retailer/templates/templatesettings.aspx
2. There are several paid logo services listed on this page which can help you easily create a professional logo for as low as $49. However for the purposes of this exercise I will be using a free service: http://cooltext.com/Logos
3. Here’s the logo I created. It can obviously use some work but it’s a good placeholder for now.

Choose a template

1. Go to the “design library” tab and choose the template that you feel best fits your brand and your business
2. Go to the “customize” tab and select the color scheme for your template

Editing the homepage

1. Go to the “Store Pages” link within the Store tab, and click on the “Edit Homepage” button
2. Scroll down to the page’s content editor, as that’s where we’ll be working today:
3. The first thing on the agenda is creating a nice banner to catch new visitors’ attention.
4. I went to www.iStock.com and purchased a photo, which cost me approximately $5. While there are also several free stock photography sites out there, I’ve found that istock has a wide selection of great quality photos that can be purchased at a minimal cost so it’s a personal favorite.
5. I then downloaded a free photo-editing tool called paint.net at http://www.getpaint.net/. It takes a little time to familiarize yourself with the software, but it’s also the closest photoshop equivalent that I’ve been able to track down that’s free to use.
6. With paint.net I cropped my image to 640x210, (with a little experimentation it was the size I found best suited my template). I also added the text “Your Source for Laptop Deals!”
7. I then added the image to my homepage by Clicking on the tree icon at the top of the content editor.
8. Clicking browse icon (you’ll find it next to the image URL text box)
9. Uploading my image file to my account

Laying out content

I found that the easiest way to layout content on the homepage is to use tables. In my case, I wanted to have a 2 column layout with my left column being text and my right column having buttons that linked to my Facebook and Twitter accounts. Here’s how I did this:

1. I created a header for the section “About Us”. Just type in the text and highlight it with your mouse. Click on the dropdown menu above and choose “heading 2” this will automatically format the text to be a headline.
2. Next, I created the table. To do this I clicked on the “html” button in the top right hand corner of the content editor. I then added the code listed below to the source code editor. Feel free to copy and paste this exact code into your own source code editor to recreate this table. Just remember to insert your text where I’ve indicated. If you’re feeling ambitious, you can also try building your own table. Here’s a great website that will walk you through some of the basics: http://www.w3schools.com/html/default.asp

Copy this code if you want to layout your site like mine - insert this after any existing code on the page.

<table cellspacing="4">
<tbody>
<tr>
<td valign="top">
<p style="text-align: left;"><span style="font-family: georgia;font-size: 1.25em;">Your homepage content here</span></p>
</td>
<td>
<p style="text-align: center;"><a href="http://twitter.com"><img width="120" src="http://www.twitterbuttons.com/images/lbn/twitterbutton-0203.png" height="90" title="By: TwitterButtons.com" /></a><br />Get <a href="http://www.socialmediabuttons.com/">Twitter Buttons</a>
<br /><br />
<a href="http://facebook.com/YourLink"><img border="0" src="http://www.socialmediabuttons.com/images/facebook3.gif" title="By SocialMediaButtons.com" /></a>
<br />Get <a href="http://www.socialmediabuttons.com/">Facebook Buttons</a></p>
</td>
</tr>
</tbody>
</table>

The buttons to Facebook and Twitter are free and can be found on www.socialmediabuttons.com

The extras

The final step to building my homepage is to add some “Suggested Products”. By adding suggested products, I can highlight those products that will make me the most profit or those products that I think visitors are most interested in buying. Here’s how you do it:

1. Click on the “customize” link under the “Store” tab
2. Towards the bottom of the page click “Select Products” under the Suggested Products header. Note that you will need to have products added to your “Manage Inventory” before doing this
3. Choose the products you would like to feature and click on “Select Products”.
4. Note: if you don’t see your suggested products appear on your homepage click on the “store pages” and click the “Edit Homepage” button. Here click the “Customizations” tab and uncheck the “customize this setting” box, then click the “Save Homepage” button.

That’s it. If you followed these steps you should now have a homepage that look similar to mine. You can view my store here: http://sweetlaptops.secure2cart.com.  If you have any comments or suggestions on this post, be sure you add them below. You can also contact our customer support department at support@shopster.com.

Happy Selling