Tutorial: How To Create An Online Storefront With Storenvy
If you're new here, you may want to subscribe to our RSS feed. Thanks for visiting!
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.
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Related Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
Thanks for the great writeup, Tim. In reference to switching the order of the products on the homepage, I think I agree with that. So I just changed the default behavior to show the newest items first. You may want to edit your post and even adjust your store’s code accordingly.
Thanks again for the how-to.
!jon
Thanks man for this! Long awaited post
Tim,
This tutorial is great! I’m bookmarking this one until I get a chance to work on our Storenvy (it’s sitting idle at the moment lol).
Social comments and analytics for this post…
This post was mentioned on Twitter by NewMonarch: RT @Storenvy: How-to: Epic writeup about customizing a Storenvy store by @assault: http://bit.ly/7Rz5vD...
Where exactly do you add the twitter code? Layout page? Css?
Thanks for this post. It will help alot!
You put the twitter code in your layout page in the sidebar (at least that’s where we put it)
[...] » Read “Tutorial: How to create an online storefront with Storenvy” [...]
Thanks alot Tim. It worked pretty good. Thanks for the tutorial. I have one more question. How do you remove the storenvy thingy on top? Yours looks cool just showing the cart.
@robbo
I originally had that in the tutorial, but took it out at the request of Storenvy because, “every time the top navbar is removed, a baby unicorn cries.”
However, you can download the firebug or web developer plugins for firefox and inspect the css classes associated with the navbar and figure out how to hide it on your own. There are plenty of tutorials out there on the google on how to use those plugins to edit CSS–and of course, feel free to post questions here and I’ll answer them.
Ooo. I see. Haha. We’ll, I guess it’s a good thing. That way they can advertise and keep our shops free. Thanks. I’ll follow your advise!