Shopify is a fantastic e-commerce solution for small businesses. One thing it doesn’t have? An integrated contact form. But it’s easy to add one to your site using a third-party service like Wufoo (which offers a free account level as well as several paid tiers with ever-increasing levels of fabulosity).

Add a simple form to your site

Let’s take a look at adding a contact form to our ‘About Us’ page in Shopify. First, we need to create the form in Wufoo. Log in (or create a new account) and click “New Form.”

Add some fields (for a contact form, it’s a good idea to at least ask for an email address and a message, but you can add any fields you think you may need – name, phone number, whatever). Keep in mind, the shorter your form, the more likely it is people will fill it out!

Once you’re happy with the fields in your form, click the “Form Settings” tab and give your form a name and (optionally) a description. In this section you can also decide on your confirmation options: you can have your users redirected to a page on your site once they’ve successfully submitted the form, or replace the form with a message (“Success!” or something similar). You can also opt to send your users a confirmation email.

Click “Save Form” when you’re all done. A pop-up will ask you what you want to do next. Choose the option that returns you to the Form Manager.

In the Form Manager (otherwise known as your Wufoo dashboard), choose the “Code” button and click the tab for “Embed Form Code.” Select the code under “JavaScript Version” and copy it to your clipboard.

Now, log in to your Shopify admin area and click “Blogs & Pages.” Choose your Contact Us page and click “Edit.”

In the Edit screen, click the “Insert” button and choose “Script.” You will see a box open up with an example of a JavaScript code snippet. Delete the sample snippet and paste the entire JavaScript code you selected from the Code section in Wufoo (it will be two separate JavaScript snippets). Insert the code into your page and click “Save.”

Voilà! You now have a Wufoo contact form on your Contact Us page. User submissions will be saved to your Wufoo account. You can tweak the settings in Wufoo to dictate where submissions are sent (for example, you can opt to have each submission emailed to you or texted to your phone) and whether you want to integrate your form with a third-party add-on like Highrise or Campaign Monitor. Keep in mind, any changes you make to the form in Wufoo will be reflected on your Shopify site!

One of the great things about WordPress is that it’s constantly being updated with bigger and better features. The switch from 2.x to 3.0 brought some seriously cool new additions, like custom menus, custom headers, and custom post types.

We’ll be blogging about all the new stuff 3.0 has to offer on the companion site for our book, The WordPress Visual QuickStart Guide site. Pop on over and take a look at the first tutorial, Custom Menus in WordPress 3.0!

Ever wonder how to make one of those little size selector things that t-shirt sites use in forms?

This question came up recently, so here is a (fairly) simple solution for it that doesn’t rely on images.

We’ll be using a simple text-replacement technique (css), with a little bit of straightforward javascript and a set of radio buttons to achieve the desired effect.

Here is the finished product.

»example source page

first lets take a look at the markup we’ll be using for this. Since the desired effect is that of a radio button set, we’ll start there.

<form name="myform">
   <div class="radios" id="set1">
      <input type="radio" class="hidden" name="test" id="test1" value="SM">
      <label for="test1" onClick="setChecked(this, set1);">SM</label>

      <input type="radio" class="hidden" name="test" id="test2" value="M">
      <label for="test2" onClick="setChecked(this, set1);">M</label>

      <input type="radio" class="hidden" name="test" id="test3" value="L" checked>
      <label for="test3" onClick="setChecked(this, set1);" class="checked">L</label>

      <input type="radio" class="hidden" name="test" id="test4" value="XL">
      <label for="test4" onClick="setChecked(this, set1);">XL</label>

      <input type="radio" class="hidden" name="test" id="test5" value="2X">
      <label for="test5" onClick="setChecked(this, set1);">2X</label>
   </div>
</form>

Here is a fairly simple bit of our form. For this example, all you really need is a radio set with labels. We’re wrapping the radio set in a div with a class of ‘radios’ just to make sure that we don’t trample over any other styles in our CSS later on. We’ll also give this an ID so that we can adjust the className of these elements without screwing up other labels you might have in your form

Note: It’s important that each button has an ID so that the label->for relationship will work correctly.

Most of the activity is going to take place on the labels, since we’re going to hide the actual radio controls. We’ll use the onClick event to trigger our little bit of javascript, which will allow us to change the style of the label to reflect that it has been clicked.

Let’s take a look at that:

function setChecked(label, container)
	{
	/* clear previous checked status */
	var labels=container.getElementsByTagName('label');
	for(i=0; i<labels.length; i++)
		{
		labels[i].className="unchecked";
		}

	/* set current label to checked */
	label.className="checked";
	}

Pretty simple, right? All we’re doing is looping over the labels in the container and resetting them all to a default class before we set the current label to ‘checked’.

Last, but not least there is some CSS that we’ll need to use to pull this all together.

.radios .hidden{
	position:absolute;
	left:-9999px;
	}

This is important, we’re using a simple text-replacement to hide the radio buttons without rendering them inert, since we want to be able to capture the value we’ve chosen.

.radios .checked{
	color:#fc0;
	background:#333;
	}
.radios .unchecked{
	color:#000;
	background:#fff;
	}
.radios label{
	border:1px solid #555;
	width:20px;
	height:20px;
	font-size:10px;
	line-height:20px;
	font-family:sans-serif;
	text-align:center;
	background:#fff;
	display:block;
	position:relative;
	float:left;
	margin-right:1px;
	}

The rest of that is just styling to make them nice looking little boxes.

We’ve been loving Shopify for small business e-commerce, and it’s been great for our clients. The one thing we hear more than anything else is “Can you send a tutorial for beginners so that we know how to get started?”

We are nothing if not accommodating. Here’s a super easy, super simple guide to getting started with your own Shopify site.

Shopify Tutorial

Log in to your Shopify admin account (yoursite.myshopify.com/admin)

The first thing you’ll see is the Home screen, which shows you at a glance how many visitors your site has had, how many orders you’ve received, the last login of your staff members and your out of stock items (if any).

The green navigation strip shows you what options are available for your shop.

Orders:

Click Orders to see the details of your orders.

In this screen, you can manage orders, contact your customers, or download a spreadsheet of your orders for offline use. Since there are no orders here, we’ll move on to the next screen.

Products:

Click the Products tab. You will see a list of all the products which have been added to your shop.

To add a new product, click the “Add New Product” button (it’s red, and at the top of your screen).

Give your product a title (this can be purely descriptive; inventory control information is later) and a description.

Under “Product type” you can choose from one of your existing product types or enter a new one. Keep these categories pretty broad; you don’t want to create a new product type for each item you enter. These categories will be used later to create things like Smart Collections.

Under “Product vendor” add the name of the product’s creator. For example, if you are selling items from a third-party vendor you will enter that name here, but if you create the products yourself you will enter your own company name.

Set the price and weight (weight is used for calculating shipping costs). You can also add a “Compare at” price, which is useful if you’re having a sale and want people to know how much money they’re saving.

Under “Inventory” you can enter a product ID or SKU (this is optional) and decide whether you want Shopify to track your stock level. If you choose to have your stock level tracked, you will need to add the quantity you have on-hand and choose whether customers can still place orders when you run out (useful if you will be re-ordering based on customer orders) or if your item will show “SOLD OUT” when you run out of stock.

Add tags so that people can easily find what they’re looking for. You can add as many tags as you want. Try to be very descriptive.

You must upload an image before your product will show up on your site. You can upload several images for each product; the first one in the list will be the “featured image” and will show up on your product and collection pages. Once you’ve uploaded all your images, you can change the order they display by dragging and dropping the thumbnails.

Don’t forget to SAVE your product!

Collections:

Click on the Collections tab to see your collections.

By default, your shop starts out with the “Frontpage” collection. Don’t delete this! It keeps track of which products are featured on the front page of your shop. You can change your featured products at any time by going into the product page and checking or un-checking the “Frontpage” ticky box.

Collections organize your products into groups, which you can then link to from your shop. Create collections for all your groups of products. For example, if you sell a lot of shirts and pants, you might want to create a “Shirts” collection and a “Pants” collection as well as an “Outfits” collection, in which you can group together things that would go well in a set. You can add the same product to more than one collection.

Standard Collections are collections of items you choose as you go (like the Frontpage collection, above); Smart Collections use pre-defined values to organize your stock.

Create a new Smart Collection by clicking “Create new Collection” and choosing “Smart Collection.”

Next, set the conditions for your Smart Collection. They can be anything you want, and you can add more using the green button on the right.

You can play around with this to find the combination that works best for your shop. Once the Smart Collection is set up, the products that meet the criteria will automatically be added.

Blogs & Pages:

When you click the Blogs & Pages tab, you will see all of the blogs and pages you have created. A blog is like a collection of articles; you can create a blog and then update it, and your most recent update will be at the top of the blog’s page. Pages, on the other hand, are static; you can make a page for your shipping information, for example, or to talk about who you are and what you do. Blogs are best for information you will need to add to on a continual basis, like a news page or a list of articles.

Click “Create Blog or Page” and then choose which one you’d like to create. For this example, we’re creating a page. Give your page a title and add some text. Shopify uses Textile for its markup; you can see the examples on the left to figure out how to format your text.

Save your page. In the next step, you will add your page to your navigation so visitors to your site will be able to find it.

Navigation:

Click the Navigation tab. You will see a list of your existing navigation menus.

For this example, we are adding a link to the footer menu, but you can always add or re-order your navigation menus to fit your site’s needs. Be aware that some menus (like the footer) will show up in different places on your site, so be aware of which menu you’re adding to.

To add a link to the Footer menu, click “Add Link.” Type in the name of the link (this doesn’t have to be the same as what you named the page, but it does simplify things if it’s similar) and choose what you’re linking to. We linked to the Royalty-Free License page here, but you can link to anything from an external website to an individual product. You can also link to a collection.

This is a screenshot of our example site, in which you can see the Royalty-Free Images page on the site and listed in the footer menu.

Marketing:

This is a new section that allows you to enter coupon codes and keep track of your marketing efforts.

Next, look at the right side of the green navigation bar to find the nuts and bolts of your site.

Look & Feel:

Look & Feel is where the site’s theme information lives. You probably won’t want to change that, but you certainly can! We recommend saving a copy of your existing theme before making any changes.

Preferences:

This is where you can set up the inner workings of your store. You will see a sub-menu on the right that lists your options. Click around to see which options are appropriate to your store.

The most important section to set up is the Checkout & Payment section, in which you will specify which payment service(s) your store will use. There is also a “Bogus Gateway” for testing purposes; if you activate it, you can place a sample order without sending any actual payment information.

Account:

The Account screen is where you will go when you want to check to see how much storage space you have left on your site or, if you’re the account owner, to add a staff member to your lineup or view or change the credit card information for the shop. (Note: only the account owner can add staff members or view or alter the credit card information for the shop.)

The account owner MUST enter credit card information before the shop will accept orders!

That’s it!

If you have any further questions, check out the Shopify forums or contact jessica at couldbestudios dot com.

These days it isn’t unusual for people to have several online aliases. There’s the personal persona, hanging out on MySpace and YouTube; there’s the work persona, reading news feeds and doing online research; and there’s often a third, leisure persona, frequenting specialized bulletin boards and sites for hobbies like crafting, D&D or politics. And, of course, it wouldn’t be Web 2.0 if each of those aliases didn’t have its own blog.

As someone who manages several distinctly different blogs, I feel for people taking on the challenge of multiple online identities. The need for them, however, is undeniable. Here are some ways to make it all work (and crank up your productivity in the bargain).

Compartmentalize

The first step in managing multiple identities is breaking them down into bite-sized chunks. If you’re dealing with the line between business and personal, that may be an easy task. But what if your personal and leisure identities overlap? How do you categorize, for example, your love of a site like Dogster – is that personal, or is it leisure? Do you even need a leisure persona? The easiest way to figure that out is to look at your Dogster identity as though you were a stranger. Would you want the random Dogster aficionado to Google the alias in your profile and see, for example, your personal MySpace page or your Flickr photostream? If the answer is yes – if you’re on Dogster to invite other dog-lovers into your life, or if your life is already all dogs, all the time – then you probably don’t need a leisure persona. But if you’d rather your personal life and your hobbies remained at least superficially separate, you’d do well to use a distinct identity for each one.

Social Bookmarking: Mark ‘Em All, Let the Internet Sort ‘Em Out

If you’re going to use any sort of blogroll on your sites (and who doesn’t, these days?), you’ll want an easy way to sort the different links to correspond with your different identities. One of the easiest ways to do that is by using a social bookmarking service like Ma.gnolia or Del.icio.us. Just make sure you tag religiously and tag well, and you’re good to go. Truly compartmentalized people like me may even use different accounts for personal vs. business links, but within each account I use tags to separate, for example, my parenting links from my catch-all check-out-this-page links.

Browse in Multiples

One you’ve figured out how to define your categories and started the process of separating the personal from the professional, it’s time to put your browsers to work for you.

Only using one browser? That’s so last year. The easiest way to segregate one identity from another is to use different browsers for each. That way you can visit the same sites and collect different cookies. That’s especially useful for internet searches and news portals, but is also good for managing sites like Flickr, which requires a separate login for each alias. Think about it like this: if you want to comment on a friend’s photo, do you want to use your business login? I’m too impatient to log in and log out each time I visit a site; with separate browsers, I can stay logged in all the time, even if I use overlapping services. It’s also good for web forms and blog comments, for the same reason. You can have each browser remember a different address or e-mail – home and work, say – so you don’t have to re-type it every time.

Also, with separate browsers, you get separate bookmarks. For me, this is key; I don’t like having to search through lots of different folders to find the bookmark I’m looking for. Knowing that all my business links are in Firefox (for example) saves me a lot of time. I can set up each browser to open a specific set of bookmarks for me each time I log in, and I can easily manage the follow-up on sites I want to write about.

Yes, I said write. This is an article about blogging, remember? All of these things lead to this next thing: managing your blogs.

One Blog Per Person(a)

I’ve got a lot of blogs. A business blog, a mommy blog, and a fledgling copywriting blog, to name a few. At any given time, I have between ten and twenty tabs open in each of my browsers – stories I want to read or write about, services I want to check out, links I want to bookmark, reference material and entertainment. How do I keep track of it all?

Since I’ve assigned my personas different browsers, the first big chunk of work is done for me. I know at a glance that all the tabs I have open in Firefox are related either to writing (for Buzzverb) or design (for What Could Be) while the tabs in Flock are related to parenting, kids, or my new obsession with crafting. This makes it easy to focus my attention on one thing or the other, which in turn means I won’t be derailed in the middle of writing an article about web design by an amusing parenting anecdote. More importantly, it means I won’t lose an important link by overloading my brain with too many disparate subjects.

Since I use Flock, posting to my Cranky Mama blog is easy as pie; I just fire up Flock’s integrated blogging client and go to town. Since my mommy blog is pretty informal and doesn’t require a lot of editing (or, to be honest, a lot of research), I don’t miss the more advanced features of a robust desktop client.

For my business blogs, though, I want something with a few more options. I use MarsEdit, although there are dozens of options that are equally useful. Since all my links are open in Firefox, it’s easy to reference articles and sites, and if I want to find something I looked at a few days ago, my history is relevant to my business persona.

Don’t Forget That There Is Only One of You

Despite all this talk of multiple identities, you’re still only one person. Don’t expect that you’ll be able to maintain daily blogs for each of your personas unless you’ve got a truly ridiculous amount of time to set aside for blogging.

Decide ahead of time which blog you want to devote the most attention to, and make that your priority. Here are some ideas for managing all that writing:

• Set deadlines for yourself so that you don’t leave any of your blogs hanging. If you’re particularly anal-retentive like me, you may want to use a calendaring service to remind you which days you plan to publish to which blog. Backpack, for example, will send an e-mail each week to remind me to post an article to What Could Be. I’m not suggesting that a mild case of OCD is a good thing; I’m just saying you might as well put it to work for you. Am I right?
• Compose entries ahead of time whenever possible; this makes it easy to publish something when your creative energies have run out.
• Don’t underestimate the power of linking. On days when you just can’t come up with anything to say, put those open tabs to work for you. Tell the world what you’re reading about. The world will thank you, if by thank you you mean take a look and collectively shrug. (A caveat: make at least a token effort to describe your recommendations using your own words. If you just post a list of links, the other kids on the internet will point at you and laugh.)

Bring it All Together

Now that you’ve got everything all neatly separated, how do you bring together all your myriad online identities? My suggestion is an identity management service like ClaimID or an aggregator like Jaiku. ClaimID lets you list every single little bit of information associated with your name and compile the links in one page; you can set privacy levels for each item and arrange by importance (or however else you want). Jaiku lets you enter the RSS feeds for all your many blogs, photo streams, or whatever, and uses all that to create a page which has a constantly-updating, personalized information feed, showing you at a glance where you’ve been putting your energy. (And no, if you’re wondering. I get nothing for making these recommendations. Just the inner satisfaction of making good links, and really, isn’t that what linking is about?)

Go. Blog.

Now put all these suggestions to work for you. You’ve got the tools. You’ve got the interests. Give it a whirl and see if you can juggle more than one identity. In fact, nothing is stopping you from starting a new blog right now. Go ahead! I’ll wait.

Technorati Tags:
productivity, organization, aliases, blogging, identity, blog juggling

Want a realistic sketch effect without all that pesky sketching? Check out our latest tutorial.

Click the image below to view each step. If you’re anti-Flash, there’s an HTML version too.