Recently, the geniuses over at Storenvy relaunched their online storefront system with a totally revamped ruby on rails environment that can be completely customized from head to toe.

Not only can you hack the shit out of the CSS, but you can also dive into the actual Shopify code that drives the simple, tag-based template structure of Storenvy. I’ve only had the pleasure of working on one other system similar to this one in my days as a web developer, but Storenvy has pushed the envelope even further by making the online editor be color coded based on the code syntax. I know, nerd babble, but for those of you who have worked in shitty plain text fields like you have to on WordPress and other systems–it can be a real bitch.

As a proof of concept I’ve gone through and hacked together a real slick looking customized store that looks almost identical to our actual online t-shirt store. (and in some ways it’s a bit better) How long did it take me to put Assault‘s official online store together? 6 days of 10 hours+ coding each day. How long did it take me to make my custom Storenvy store? 6 hours. That includes learning the actual Shopify syntax.

Download Assault’s Storenvy theme files to see how we made this possible.

View the Assault Storenvy Customized Store to see what the final store looks like

Read on to go through the process with us step by step as we unset the default Storenvy theme, and create one with custom CSS that looks remarkably like our actual site. (or any site)

Features

There are a number of things the css and files I’ve included will do for you.

Unsets Storenvy Default Theme
Rather than use the soft gradients and arial fonts, my website uses mostly serif fonts for the large blocks of text, and arial black for all the headlines.

Mail Chimp Subscribe Form Styling
If you use Mail Chimp for your newsletter, I’ve included CSS that will style the sign up form that Mail Chimp supplies to you. Be sure to strip out the Javascript cause Storenvy won’t let you have them anyways. (To my knowledge.)

Fully commented CSS
For those of you not very familiar with CSS I’ve added comments where I was changing the CSS and tried to best explain what was going on.

Set Base Font

* {  font: 14px georgia, 'times new roman', times, sans-serif;}
p {  font: 14px georgia, 'times new roman', times, sans-serif;}

On our store, we use mostly serif fonts for the body text, rather than the Storenvy default theme which uses Helvetica. This will apply serif to all items, and also to paragraph elements (<p>) If users do not have the Georgia font, it will use Times New Roman. If users do not have times new roman it will attempt to display times, and then a default sans-serif.

Change Background Image

body {
  color: #666666;                   /*: Body Font :*/
  /*  background: #0a0b0b url(PATH/TO/YOUR/BACKGROUND/IMAGE.JPG) top center no-repeat; */
}

This is where I overwrite the background color and background image. The “top center” declaration after the url path to my background image tells it to stay centered, at the top of the page. I use the full url of the image I uploaded to Storenvy as my background. I also set the base font color to #666666 which is a dark gray.

Container + Nav resets

#nav, #container {
  background-color: #F1F1F1 !important;        /*: overwrite darker gray outline with nothing :*/
  border: none !important;       /*: overwrite darker gray outline with nothing :*/
  position: relative;
}

This piece of code removes the outline around the nav and container, as well as sets the background color to a light gray. It also sets the positioning to relative, which will help me position items with precision that are within it.

Edits to header

#header {
  text-align:center;	/*: Header Alignment :*/
  height: 110px;
}        

#header h1 a {            /*hide the giant store name link text*/
  color: #666666;	/*: Store Name :*/
  display: none;
}
#storeName { /*create a hidden link that google will still spider for your storename*/
  display: block;
  height: 120px;
  width: 325px;
}

#storeName span { /*hide the link text to everyone but google*/
  display: none;
}

In the layout.html file you’ll see that I added some custom classes to hide the store name to the browser window, but still allowing the text to be read by a Googlebot which has CSS disabled. This code above is what makes this possible.

Unsetting button styles

#buttons {
  position: relative;
  text-align: right;	/* Buttons Alignment */
  padding: 10px 0px 0px 0px;
}

#buttons a {
  display: inline;
  background: none;
  border: none;
  font: normal 20px 'arial black', arial, helvetica, verdana;
  color: #fff;
  text-transform: uppercase;
}

#buttons a:hover {
  color: #7d8f9c;
  text-decoration: none;
}

The main top level buttons on the default Storenvy theme have gradients in the background and borders and all sorts of other fun things that don’t look like what I wanted. The above code resets the button link text to a bold arial that you see at the top of our navigation items. It also makes the letters all caps.

Reset and style headings

h2#title {
  background-color: transparent;	/* reset h2 background color to same color as #nav, #container */
  color: #000000;                   /*: Page Title :*/
  font: normal 32px 'arial black', arial, helvetica, verdana;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding: 0px !important;
  margin: -28px 0px 0px 0px !important;
  border: none !important;
  line-height: .7em;
  width: 500px !important;
  height: 46px !Important;
}

h5 {
  color: #000000;                   /*: Page Title :*/
  font: normal 22px 'arial black', arial, helvetica, verdana;
  display: block;
  border-bottom: 1px solid #000000;
  line-height: .8em !important;
  padding-bottom: 4px !important;
}

The headlines that appear on the homepage within the container, and on the sidebar and product pages need to be restyled to look like our normal headlines which are arial black. We also move them to position them properly above the product listing, without a background color.

Custom Spacing Classes

.blog_link {
padding-right: 10px;
}

.faqs {
margin-right: 55px;
}

.home {
margin-right: 20px;
}

The above 3 classes adjust the spacing on my top level navigation items so that they are properly centered within the black background.

Set Content background color and fonts

#content {
  position: relative;
  background-color: #F1F1F1;        /*: Middle Section Background :*/
  font: 14px georgia, 'times new roman', times, sans-serif;
}

This is to set the background color to the same as the container and position: relative makes it so I can absolutely position nav items within the content div. It also sets the font to the Georgia font or a subsequent sans-serif font just in case for some reason items were set otherwise. (It never hurts to keep doing this to keep from having a random font face that you didn’t want somewhere–especially when you’re working with a pre-built theme)

Change Product Description Links

div.description a:link, div.description a:visited {
  color: #30AFEA;                   /*: Product Description Links :*/
}

The above code will change your links in your product descriptions on the product pages. Mine are a blue color.

Main Left Column Styles

#main {
  background: transparent;
  margin: 0px !important;
  font: 14px georgia, 'times new roman', times, sans-serif;
}

The above sets the background color to nothing, and the margin to 0px as well as resets the font sizes. You may notice that I switched my sidebar from being in the left column, to being on the right side more like I did on the Assault Online Store. You can see what code I moved around by referring to the layout.html file in the zip file you downloaded at the top of the page.

Reset Product Description’s CSS

#product_description_container {
  background: none !important;
  border: none !important;
  padding: 6px !important;
  margin: 0px !important;
  font: 14px georgia, 'times new roman', times, sans-serif;
  color: #000000;
}

#product_description h6 {
  font-weight: bold;
  color: #000000;
  letter-spacing: 0px;
}

#product_description_container p {
  color: #000000 !Important;
  letter-spacing: 0px;
  font: normal 14px georgia, 'times new romain', times, sans-serif !Important;
}

p#price {
  background: none !important;
  border: none !important;
  font: bold 28px georgia, 'times new roman', times, sans-serif;
  color: #000000 !important;
  text-shadow: none !important;
  line-height: .8em;
  margin: 0px !important;
  padding: 0px 0px 10px 0px !important;
}

I reset and slightly adjusted the spacing on my product descriptions. Primarily, I wanted to get rid fo the background image and border. When you see the !important flag after a CSS property that tells your browser to explicitly overwrite whatever was set previously in CSS. You’ll see this throughout my stylesheet as I want to overwrite any previously set CSS.

Reposition “breadcrumbs”

.breadcrumbs {
  position: relative;
  left: 550px;
  top: 0px;
}

Because I set my positioning on my previous container elements (main, container) I can position the breadcrumbs within those div elements absolutely. The breadcrumbs div will now display 550 pixels from the left, and at the topmost pixel. (0px)

Reset Sidebar and Reposition

#sidebar {
  background: transparent;
  border: none !important;
  margin-top: 0px !important;
  padding-right: 0px !important;
  margin-right: 0px !important;
  padding-top: 0px !important;
  width: 200px !important;
  overflow: hidden;
  margin-left: 60px !Important;
}

#sidebar fieldset {
  background: none !important;
  border: none !important;
  margin: 0px !Important;
  padding: 0px !Important;
}

This resets and restyles the sidebar to be 200 pixels wide, and hides anything that flows outside of those 200px. (hence the overflow: hidden properly) It also sets the margin left to 60 pixels to give it some space to the left where the #main column is.

Reset and Style for Places and BulletLists

.bulletList {
  margin: 0px;
  padding: 0px;
}

.bulletList li {
  margin: 0px 0px 0px 5px;
  padding-left: 5px;
}

.bulletList li label {
  margin-left: 10px !important;
  font: normal 11px arial, helvetica, verdana;
  color: #000000;
}

ul#places {
  list-style: disc;
  margin: 10px 0px 0px 0px;
}

ul#places li {
  list-style: disc;
  display: list-item;
  width: 100%;
  margin: 0px 0px 8px 15px !Important;
  padding: 0px 0px 0px 5px !important;
  font: normal 16px georgia, 'times new roman', times, sans-serif;
}

ul#places li a {
  background: none !important;
  border: none !important;
  text-align: left;
  color: #000000;
  margin: 0px !important;
  padding: 0px !important;
}

The places links by default are gradient buttons in the left column, and I decided I wanted them to be plain looking text links like we have on our site and blog. The above code removes the backgrounds and borders and sets the fonts to what I have throughout the site and it also adds some spacing to the list items. (<li>)

Mail Chimp Email Form Stylings

/*************** Mail Chimp Email Signup ********************/
/************************************************************/
/************************************************************/
/************************************************************/
#mc_embed_signup {
  margin-bottom: 20px !important;
}

.indicate-required {
  margin: 4px 0px !important;
  font: normal 10px arial, helvetica, verdana;
  font-style: normal !important;
  padding-right: 40px !Important;
}
.btn { /* newsletter signup button */
	padding:2px 8px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	background-color:#3b566b;
	color:#e6e6e6 !important;
	font:bold 11px arial, helvetica, verdana;
	text-decoration:none !Important
}

.btn:hover {
	background-color:#000;
	color:#e6e6e6
}

If you aren’t using Mail Chimp for your newsletter you should. It’s completely customizable, and free for up to 500 subscribers and 3000 emails a month. I switched to it two months ago and it cut my html email development time in half, and increased my sales, subscriber count, and allowed me to track sales numbers with Google Analytics. The above code will style the default CSS/HTML that is supplied to you from Mail Chimp when you use their form builder with no CSS.

Reusable Classes

/***************      Reusable Classes   ********************/
/************************************************************/
/************************************************************/
/************************************************************/
.alignright {
  float: right;
}

.alignleft {
  float: left;
}

With every website I create I have a section of classes at the bottom of my stylesheet that I constantly reuse. In this instance, only a alignleft and alignright to float images and/or text to the left or right. In the future I’m sure I’ll add more to this, but this was all I needed for now.

Additional Tips

Storenvy is constantly updating their feature set, and they recently made it possible to add your Twitter updates–which is also completely customzeable with CSS. To add your Twitter updates to your store put this in your stores theme:

{% twitter_update_list assault %}

Google Analytics + E-Commerce Tracking

Want to track everything on your store from head to toe? Storenvy now supports Google Analytics plus e-commerce tracking. All you have to do is enter your unique tracking ID into the “Settings” area of your admin.

Show the newest products first on the homepage

{% for product in products.current %}

If you want your newest products to show up at the top of your home page you have to change the above line of code to:

{% for product in products.current  reversed %}

Storenvy’s Customization Guide

Storenvy does have a customization guide, although it is under construction. I still found it quite helpful with a few of the things I describe in this post. Check out the Storenvy Customization Guide here.

With so many different facets of information and steps needed before you can even print your shirts it’s easy to quit before you even get started.

With all the different, well-documented sites out there, I’ve found that there still hasn’t been anyone who managed to get everything just right, and more importantly, just right on a limited budget. The only thing that comes close  is the How to Start a Clothing Line E-Book. If you’d rather not swing the $37 bucks for the e-book we’ve done our best to compress everything you need to know to start your own clothing line here in this blog post. (Disclosure: We get a portion of the sales of the E-Book and recommend it if you need more in depth information.)

Spend only what YOU can afford

We’ve been lucky at Assault to have made all the right moves so far to a point where we have no credit card debt, no binding agreements with any poisonous partners, and no investors to pay back. We’ve started Assault with our own money, and it currently runs itself, independent of outside funding.

One thing to keep in mind during this read is that there are no definite right or wrong ways to forming your own company. In the end, your decisions need to be based on what works best for what you are trying to accomplish. This article is a compilation of what worked (or didn’t) for Assault; as well as some of the complications we ran into.

Before you EVEN start your t-shirt company

1. What makes you different?
2. What makes your t-shirts or clothing buzz-worthy?
3. If you saw your product on a website, would you tell your friends?
4. Would you pay $$$ for your product?
5. What separates you from your competition?
6. Who has been successful with similar products in the past, and what did they do?
7. Who is your ideal customer? Age? Sex? Interests? Where do they hang out? What do they like to eat?

These are all questions that you should have addressed before you drop a penny into your clothing line.

T-Shirt Printing Equipment

Storenvy Printing and Free Online T-Shirt Stores

Don’t buy any. There are plenty of professionals who are GREAT at screen printing and have been doing it for years. (Exhibit A: Nick Roccanti over @ Storenvy) Your product will suffer if you try to learn to print on your own and you’ll be too busy with other day to day activities to learn to print and fill your orders.

Trying to learn to do it on your own will only make your bank account dwindle.

Akumu Ink

An exception to this would be if you only plan on doing one or two color prints. Akumu Ink does just this, and have been extremely successful at it. For Assault, if we were to do this, one color pressing would have been too constricting for the majority of our designs as they’re oversized and multiple colors.

Online Store Systems

For many of you with limited or no web experience, you are going to have to go with some sort of hosted cart solution like Storenvy. One thing I do recommend is going to a service that will suit your needs and only charge you a flat rate per month. (Or no rate per month–as in free beer… like Storenvy.)

You don’t want a cart system taking a cut of your payments no matter what, because your bank is already doing that on your merchant account. (more on that later.)

Domains are CHEAP! Buy one and forward it

One thing I cannot stress enough with a hosted system is to buy a cheap domain name and forward it to your site. It’s just a bit more professional to have a store with yourname.com instead of yourname.etsy.com or yourname.bigcartel.com.

I never understood why people were okay with that–and why they were willing to put a .etsy.com or .bigcartel.com appended to THEIR brand name on a large banner for an event or festival.

Spend the $8.00 bucks or whatever it is and buy a domain name. That should be one of the first things you do after deciding on a company name.

Sole Proprietorship, Partnerships, Incorporation

This gets confusing and again, there are no right or wrong answers. Because we are talking about starting a company, and on a budget no-less, I’m assuming that you’re a small company. With that assumption, I’d suggest not starting out with a corporation. Corporations have their tax benefits and depending on your growth, are definitely something to look into, but they are fairly complicated to setup. The cost to have a professional setup for you runs approximately $500, but considering the complications that could arise if not done properly, is money well spent.

To start, Assault formed as a partnership. (We have more than one founder) What this meant to us was that the Assault company name was personally held by me (Craig) and Tim. This included any liability, gains, losses, etc. So if Assault made money, as far as the Government is concerned, Tim and I made money. Same goes for if we lost money, if there was any litigation, and so on. Obviously, on a larger scale, this could create some major troubles in ones personal life when their company gets sued for say, copyright infringement, and the lawsuit now bleeds over into their personal assets.

One thing to keep in mind is that you can always incorporate later. At that point, you would need to choose which corporate structure fits best for your business. If you would like more information on this, request it in the comments, and I’ll do a separate post on that in-depth topic.

The alternative to a partnership, or incorporating, is a sole-proprietorship, also known as a DBA, or “doing business as” which is the cheapest solution to starting your company if you are the sole driving force behind your brand.

“Doing Business As” or DBA Certificate

The best way to get a “doing business as” certificate is to place an ad in a local publication with the name of your company and where you will be doing business. This ensures that no one else has the same name as you, and that you are officially on record in public as operating your business.

This is only necessary if you (1) are operating as a Sole Proprietorship or Partnership (ie-not incorporated) or (2) if you have formed a corporation and do not plan to operate as your corporation name. In Chicago, we ran an ad at The Chicago Reader for $100 bucks. They’re used to doing running these types of ads, and they mail you a copy of your ad when it’s done running.

Federal Taxes, State Taxes

You need to register your business with the federal, and the state government you intend to do business in so you can start paying money to Uncle Sam just like the rest of us do with our businesses.

Even if you don’t plan on paying any employees or having any payroll, you still must register with federal to get your Federal Employer ID (FEID). What you register on a state level varies by state, but will be for any state employment taxes as well as state sales tax.

Small Business Checking Account

To get this you have to have the proper documentation. The proper documentation consists of your partnership agreement. (Or incorporation documents) your FEID (federal employer ID), and your local (state) business formation paperwork. You can obtain the FEID from the IRS, and your local state tax registration can be done at your respective state’s government website. (Googling County Clerk +IL is how we found out where to do this cause we’re in IL, duh)

Accepting Credit Cards

This is going to be your one of the essential costs associated with your store. We were lucky enough to get this right the first time.

Paypal has one of the best, and easiest to implement online payment systems. It integrates with plenty of stores already including Storenvy, Magento and Big Cartel–plus it’s very competitive with anything that Authorize.net or Checkout2Payment could offer you.

(Opens in iTunes)

It varies per amount, but for $30.00 per month and a small percentage of every transaction–Paypal’s Website Payments Pro is the way to go. It’s the payment system we started with and it’s worked. If you need to have a terminal on site for street-fairs etc, we recommend using iSwipe Pro on the iPhone. (opens in iTunes) It’s only $.99 cents and easy to setup. Thanks to Judd from Shirt Fight for helping us out with that at our first street festival.

SSL certificate for secure online transactions

If you’re hosting your own store like we are at Assault you’re going to need an SSL Certificate to ensure that your server is encrypted when making credit card transactions.

Back in the day there was only one place to do this: Verisign, and it cost a whopping $300 bucks a year! Thankfully, the great people at GoDaddy started selling their own version of the SSL certificates which works the same way and costs a fraction of the amount. I believe we ended up paying only $17 bucks per year after all was said and done.

Launching your store

You’ve got your shirts designed, bank account setup, and your website is successfully processing credit cards legally and safely. Here’s the most important part about launching your store: making sure you get people there, and the only way to do that is with links!

I Am The Trend - Your Guide For All Things Independent

When we got started, we compiled a list of places that you can post links about your store launch, and have actual people come to the store to buy your products. I Am The Trend will review your shirts live via a ustream video podcast if you send them one. They’ll even pimp your stuff all over their website.

We’ve also recently added a User News section to our website which displays prominently on our homepage and sidebar where you can submit links to us for approval. If you’re launching a store–let us know and we’ll pimp you double hard.

Launching and marketing your new store could be a post of it’s own, and is on it’s way, but in the meantime you can refer to these two posts for some additional SEO and Google tips that will help bring in some organic traffic to your online store:

• How to Float to the Top of Google Search Results Pages Without Paying
• SEO – Tips & Strategies you aren’t hearing from high priced consultants

IATT Live #3 9/3/09 from I Am The Trend on Vimeo with appearances by Craig and myself, Jud from Shirt Fight!, and Nick from Storenvy. We had a blast doing the live show and would LOVE to do another one. Special thanks to Ian from Haha Press for coming out and for Iain from Graphic 22 for answering all the screen printing questions.