Collection pages use custom sub-nav tabs to group related products, accessories and description pages together.

This store uses a combination of Custom and Smart Collections to manage a huge inventory of pens, inks and accessories. Eagle-eyed visitors will notice that it blends seamlessly with the Copic Marker WordPress site, too. (Hint: that’s not an accident.)

Using collections and tags for a two-tiered sorting process gave us a tremendous amount of flexibility, which we definitely needed to get this site working the way it should! Shopify has made it really easy to access collections and tags via link lists (in the Navigation tab of the Shopify admin). Navigation: not just for links anymore. They’ve also made some changes to the way tags are handled, which essentially allows users to create collections on the fly using tags.

Bulk order forms let customers quickly add lots of products.

This theme had a lot of custom elements:

• tab-based sub-navigation on the collection pages (which pull in the correct products based on tags)
• overview pages that detail each product family with a graphic and some links
• sidebar graphics that change depending on which collection is being viewed
• related products (again, based on collections and tags – are you sensing a theme?)
• a cool bulk order option, which uses Custom Collections as well as a custom collection template (and a bit of javascript) to add a little sumpin’ sumpin’ to the ‘add to cart’ function

We love the bold colors and fun graphics on the Bloom Essentials redesign.

First up, we worked with the Bloom crew to come up with a bold new color scheme that really makes the site pop. We added some fun, frilly elements (after all, it’s a day spa!) and a subtle floral background to add a little texture. We had a moment of silence for the Bloom Girl (don’t worry, she’s almost certainly gone off to become an actress or something) and fell in love with the pretty new site design.

After all, what’s not to love? The front page has a slideshow (with the ability to swap out images in the admin area using theme settings) as well as displaying featured products, testimonials from happy customers, and the latest news from the blog. We’ve also got sharing buttons to make it easy to connect with Bloom Essentials elsewhere on the web.

The Bloom Essentials blog is fully integrated with the theme.

Oh, and did we mention the blog? Shopify’s got blogging baked right in, so all we had to do is create a template file and the blog was ready to rock!

Check out the newly redesigned Bloom Essentials site to see it in action.

Choosing Health Now

My sister Rebecca needed a website to go along with her book, Choosing Health. We created a custom Wordpress theme as well as illustrations for the site and the book itself. She's easily able to update with content and videos to keep visitors coming back.

molly meow- the cat bed duvet company

We worked with Molly on the molly mutt site, so when she needed a companion site for cat duvets we were delighted to help! The shop integrates smoothly with her existing dog bed duvet shop, sharing a cart so cat and dog owners can finally coexist in harmony.

Baktuli

Henry needed a clean, modern site to showcase his fabulous luxury yoga towels. We created this custom Shopify theme to make it as easy as possible for him to keep the content fresh while providing a great experience for his customers.

Savvima

Using Avi and Naomi's existing graphics we created a lovely custom WordPress theme to complement their fast-moving magazine-style site.

Moody Eyes Online

The Moody Eyes Online folks needed a custom site to go with their fabulous selection of fashion frames. We created this design to give the feel of a high-end eyewear shop while enabling easy navigation and fun social features.

WeVillage

WeVillage Urban Playcare is a modern, minimalist space for kids - so we created a modern, minimalist identity that perfectly complements their facilities. The custom photos really drive home the fact that this isn't your average drop-in daycare.

The Clink Room

Using the gorgeous mock-ups provided by the Clink Room guys, we created both a custom WordPress theme and a matching Shopify shop. The extraordinary cap and shirt designs can be presented to the public with minimal back-end hassle.

Selective Premiums

Stace had an existing logo and identity scheme that she liked, but her site was woefully outdated. We moved her to a new e-commerce platform and created a site that's clean, modern and easy to navigate - a must when you have 3000+ products!

Prewired Controls

Stu liked the layout and design of his existing site but wanted to be able to update and edit things himself. We duplicated his site on WordPress (replacing a lot of outdated code as we went - no more table-based layout!) and Stu and his team finally have full control over their content!

amy mcmullen photography

Amy started out just wanting a blog but ended up having us redesign her entire site! This simple WordPress template puts Amy's gorgeous photographs in the spotlight and enables her to easily update the look and feel every time she does a new shoot.

Trends Under $10

The Trends Under $10 site started its life as a custom Shopify theme for a business venture that never quite saw the light of day - which made us sad, because it was a really great site! So when the owner asked us if we'd update the theme to reflect the new business, we were only too hapy to oblige!

Choosing Health Now | Molly Meow | Baktuli | WeVillage | The Clink Room | Savvima | Moody Eyes Online | PreWired Controls | Selective Premiums | Amy Mcmullen Photography | Trends Under $10

2011 is already off to a great start. We’ve got some seriously exciting new projects in the works & have been in talks with some other fabulous small businesses about creating or converting their online presences. We can’t wait to tell you about what’s coming next!

Most importantly we’re turning our focus more intently than ever on making couldbe studios into the best web design studio it can be, starting by giving thanks to all our fabulous clients. If you haven’t checked out our portfolio in a while, click on over and take a look at some of the terrific small businesses we’ve had the pleasure of working with.

If you’re on Facebook or Twitter, feel free to add us! We’ll be posting updates in both places regularly, and who knows, we might just unveil a special offer or two.

Part 1 of 2 (Matt will post his in the next few days).

Jessica’s list of must-have apps: I work exclusively on a Mac (well, two, actually) so these are all Mac-friendly.

Transmit

I was pretty meh on the subject of FTP clients until I tried Transmit. Now I don’t know what I did without it.

Fluid

See above re: FTP clients and switch for site specific browsers. I finally installed Fluid on a whim and…wow, was I ever wrong. It’s given me a whole new appreciation for my Dock.

TextMate

Can’t rave enough about my love of TextMate. Makes coding a breeze.

Google Docs

We keep the majority of our paperwork (contracts, contract templates, etc.) on Google Docs. We can share amongst ourselves and access files from anywhere – handy when you’re constantly shuttling between office and home office. Also: it’s not Word!

Google Apps

We finally switched our couldbe studios email over to Google Apps, and it’s been great.

Basecamp

For all our project management needs.

Highrise

Keeps track of our contacts.

Ma.gnolia

Social linkage.

Firefox

And, of course, what’s Firefox without extensions? I use Firebug, Foxmarks, 1Password and ColorZilla.

Campaign Monitor

Not only does Campaign Monitor make it easy to send and track email newsletters, it makes setting up managed accounts for clients a breeze.

Reinvigorate

I personally loathe Google Analytics, but none of the other free or low-cost offerings seemed much better. Enter Reinvigorate. They’re in private beta right now, but we were lucky enough to get in. And I do mean lucky: Reinvigorate is a fabulous service, and I can’t imagine switching.

DropSend

When we’ve got to email huge files to clients or printers, DropSend is invaluable.

Blinksale

Simple and easy to use. We looked at FreshBooks, but given our requirements Blinksale is a better fit.

I love twitter, and much of the time the group stream of consciousness that is displayed is great, but… there are times when following a conversation can be a little tough.

I have found myself wishing that there were a way to sort it into easier to follow pieces.

So i figured that would be a good place to start. What I ended up with is TwitterThreads.com.

TwitterThreads.com

The idea here is to connect the dots of the @replies in your twitter stream.

(click)

Above is a screenshot of a threaded conversation I was having with Josh Bancroft this morning that illustrates fairly well what that looks like.

If you’ve somehow never heard of Twitter, check it out.

Twitter rocks.

Cheers,

Matt Beck
Partner, CouldBe Studios

Taste Chocolate

Taste Chocolate is a Portland, OR (local for us) company that runs high-end chocolate tastings, similar to wine tastings; and of course sells the chocolates as well. If you are in the Portland area, check it out. It’s a lot of fun and in addition to being a mouth watering experience, it’ll change the way you think of chocolate.

We had a blast with this project, it was a complete identity, from logo design, cards and promotional materials to website to press-kits. Much of the photography used throughout was ours as well, taken at live tastings. This project forced us to really think about how we can use shopify to do things that it doesn’t natively do. We’ve got tag-based product recommendations here for example, which might not seem like a big deal, but gave us a warm-fuzzy.

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.

Well, we finally bit the bullet and took a stab at it.

For our first widget, we’ve connected the new Marketplace on Shopify.com directly to you dashboard. Check it out here
.

We’re pretty happy with the results and we hope others will use it too.

Let us know what you think would ya?

Cheers!

Matt Beck
Partner
CouldBe Studios

Now can we all move on from the Web 2.0 thing? Plz and thank you.

Besides, I hear Web 3.0 is going to have much better colors.