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.

The one tool you need in your toolbox as a band (which basically makes you a small business owner) is to install and configure Analytics on your website. Do yourself a favor and get off of MySpace. At the very least MySpace should just be used as another avenue to reach fans, not your only or primary point of contact. For this particular tutorial, we use WordPress as our content management system of choice. I recommend WordPress to anyone who asks me simply because of how easy it is, and how easy it is to integrate Google Analytics.

If you’ve already setup Google Analytics you can skip down a ways on the page as I go into the aspects of Google that will mean the most to you. It’s a good idea to look over the initial setup to make sure you’ve done everything properly. The way I setup Google does enable tracking on a few more important items that you don’t get by just copying and pasting the code Google supplies to you.

Get WordPress or a something similar CMS

With WordPress you have two choices to setup your site:

1. Download the software and install it to your web host (Recommended)
2. Host your website remotely on yourname.wordpress.com (less freedom)

Some hosting providers like Media Temple have a one click install for WordPress. This helps things along considerably. If you can’t afford your own domain name and/or hosting. Signup for an account on WordPress.com. Your name will be YOURNAME.wordpress.com to start, but you won’t be able to have complete freedom over the look and feel of your site.

If you have no other choice, start with option 2. You can always export your data and import it to your own web hosted .com later.

Signup for a Google Analytics account using your Google account name

I’ve had a Gmail account for awhile now so all I had to do was go to Google.com/analytics and sign up for an analytics account.

Setup your profile

Setting up your profile is as simple as putting in your website address for each website you have. If you want to setup e-commerce tracking for your online store you have to enable this option later. For now, just enter in the basic information for your site.

Our site already has a profile so the additional site we just setup appears below that domain name. (assault.it.com) You’ll also notice that the status icon is a little alert. That’s because we need to actually setup the embed code on the site.

Click on the edit link on the right, and then click on the Check Status link over to the right

Now you’ll see what we need to get our hands on which is the Google Tracking code. (On the right) You can just copy and paste this into your site if you’re not using WordPress, but it’s better to integrate it with the Google Analytics for WordPress plugin so you can enable additional features not offered with just copying and pasting the code.

If you just copy/paste the code into your site you won’t get any of the additional benefits setup like goal funnels so don’t do that.

Leave this window open for now, and I’ll explain how to implement this code with the Google Analytics for WordPress plugin in the next step.

Download/Install/Activate The Google Analytics Plugin for WordPress to your blog

You’re better off using the Google Analytics for WordPress plugin for a 3 reasons:

1. The plugin will track outbound clicks to see where people are leaving your site and what links they are clicking on when they do leave your site.
2. The plugin will automatically put the proper code on all aspects of your site, and when an upgrade is available it’s as easy as clicking upgrade.
3. Your downloads will automatically be tagged as /downloads/wp-content/uploads/your-file-name.zip so you can get an idea of how many downloads you are getting.

To download the Google Analytics for WordPress plugin you can either add it through the administration interface by going into your WordPress Admin area: http://www.whateveryourdomainis.com/wp-admin and then click on the arrow next to the Plugins link and click “Add New”.

Then, do a search for “Google Analytics for WordPress” and it should be the first result. Install and move on to the next step or install it manually via the directions for installation on the plugins’ WordPress page which I have pasted below:

Input your Google tracking code

Remember the code we left open in another window from before? This is where we need that code again.  You just need the id off of your tracking code which I’ve highlighted below, not the entire copy/paste code that Google gives you.

Copy that part of the code and paste it into the configuration text box like I have below.

Set up your settings similar to how I have to ensure you’re tracking downloads as well as outbound clicks from your site.

Collect the data!

Gather several weeks worth of data before you really go in and analyze where people are coming from and what parts of your site are most popular.

What’s important?

Depending on how you are using your site there are a variety of things that could be of importance to you. (Besides just actual traffic of course)

If you’re using your website as a place where you can push your music to the fans with downloads then that’s going to be one of your most important areas to pay attention to. To view your download statistics go to the content report, and then “Top Content” section.

Then filter your content by downloads by typing “/downloads” into the text box as I have below:

Another thing to pay attention to is your  traffic sources. How are users finding you? Google searches? Reverbnation? MySpace? Twitter? Blog posts?

Want to increase/decrease the date range?

Been a few months since you installed the plugin code? How about increasing the date range from the past month to the past few months? Or past few days? Do that on the dashboard where you see the calendar:

Setup Goals (AKA Super Fucking important)

After you’ve ensured your data is being collected you’re going to want to setup goals.

Goals allow you to setup a flow on the site for how they find you up until they actually do something. (For istance,  download a file off of a specific page)

There are 3 types of goals you can setup, the most important to us being the URL destination which allows us to set a user path for a visitor coming to our site. Name the goal and select URL destination and you’ll see the rest of the Goal Details options that I have in the screen capture below:

“Goal URL” is the second have the the name of the page the user should end up on, and goal value is something to set up if you’re setting a monetary value for something like a digital download. For instance, if you have a file uploaded to your site as I have above, your goal URL would be downloads/wp-content/uploads/name-of-the-file-you-uploaded.zip

Note: You can take this link from the information in your Top Content section like I showed you how to do above.

If you want to track users from say, your homepage to your downloads page you can enter in the separate steps a user would take to get from your homepage to your actual file download.

If I had 4 pages I could enter them all in each field and name each step to determine how many users are able to make it through the entire goal funnel.

At Assault’s online clothing store, we use goals to track our user’s sticking points in our shopping cart check out process. If we find there are a lot of users abandoning their carts after they get to a specific step in the checkout process, we know there must be some sort of usability issue.

One of the coolest aspects of the goals and e-commerce tracking is that you can determine where your actual converted sales/downloads are coming from most. (Meaning the websites that send you the most downloads and money!)

Google analytics goals are critical when determining what social networks to push your music to the hardest, which blogs to keep pimping your free gear to cause their audience buys digital music, which twitter users are giving you shoutouts, etc. etc.

I say again, setting up Goals and Goal Funnels will give you visual proof of where you are having success with getting your music downloaded. I can’t stress this point enough!

If you find most of your users aren’t getting to your music downloads, then you need to give them a clearer call to action on all your pages.

If you’re users are bouncing after :20 seconds and only visiting one page, then they’re not finding what they came to your site for.

There are HUNDREDS of things you can learn from all the data Google gives you. Are your fans primarily hitting the page on the site with your pictures? Are they coming to the free download of a song you offered them that got plugged by a blog? Are they looking at your bio because you have a hot chick lead singer and they want to see if she’s single? (Assault‘s top viewed page on our store is for our zombie t-shirt. Go figure.)

Analytics is the key to your online strategy. It tells you what you’re doing right, and what you’re doing wrong. It’ll also tell you what your fans want more of, and if you’re getting them to the right place in the fewest amount of clicks.

Want more info? Did you get stuck at a certain point? Want some one on one advice? Send me a message on Twitter or post in the comments. I reply to just about everything that comes my way.