10 Tips for Storenvy CSS Tutorial

Hey guys, I opened up anther storefront on Storenvy: Oh My Kokoro!!!



It was a great idea because a)listings last forever, b)customizable look, c)more profit per item since there isn't a listing charge of $0.20 and 3.5% sale price fee from Etsy. I do believe that Etsy brings in a lot of traffic for those looking for the type of things that I make, is SUPER EASY when you need to duplicate listings, and feedback system (which you need to link externally on Storenvy).


One of the major things that bothered me was although there was a customizable shop with decent layout, there was only ONE option as a layout!!! It took me 3 days worth of working on CSS to get to the decent quality as it is now. I'll be sharing the things that I learned about CSS during this process!
  1. When at a loss, search "CSS" or "html" in Storenvy's forums! There are always a few friendly and helpful people there.
  2. COPY&PASTE STORENVY CSS: 
    http://www.storenvy.com/themes/default/stylesheets/styles.css OR edit the one that you're given (otherwise, you'll be stuck with the basic layout) ♥♥♥
  3. If you want your background to show through your header, save your header image as a png file! It allows transparency while keeping a high image quality!
  4. The holy grail of customizing Storenvy: http://www.assault.it/2009/12/29/tutorial-how-to-create-an-online-storefront-with-storenvy/ (here is the less helpful Storenvy customizing guide too: http://www.storenvy.com/help/store-customization)
  5. Learn what certain codes are: http://www.w3schools.com/ (I have very limited knowledge of html but know #FFFFFF, image properties, and linking)
  6. If you have Chrome, highlight some words and right click to bring up "Inspect Element" to lead you to a customizing panel where you can try out colors before you finally put them in your CSS.
  7. Want to use custom fonts? Use http://www.google.com/webfonts to pick out a font/typeface and embed it into your shop... easy directions at the link! :D
  8. LABELING: /*: blahblahblah :*/ allows you to label an aspect that you want to customize, such as button or sidebar color AND it will show up on Easy Mode. [NOTE: Storenvy didn't really have everything that could be labeled as a label (for beginner's sake). Add the extra labels yourself so you can just Ctrl+F/Cmd+F the color (just figured it out now when I was writing this ^_^').]
  9. Most common "fixes": Product Slider, Collections in Sidebar instead of top, Removing the main border, get rid of sidebar line <hr>, Stopping & Starting HTML Marquees
  10. Finally, when you're at a loss, look at your favorite Storenvy shop and right click "View Page Source" to see what they did RIGHT in customization!!!
Please post in the Storenvy forums with CSS in the topic if you have any questions about CSS.


EDIT 2/10/13: Here are some examples of my favorite shops:

9 comments:

  1. Thanks for the link. I just moved my collections to the sidebar instead of the top.

    ReplyDelete
  2. Hello, I wonder if you could help me please :)
    I'm trying to do two things,
    1. Make a 200x200 slide show that will sit in place of my square avatar in the sidebar
    2. Make the page content wider so it can be laid out just like it is but with four products across instead of three.

    I'm pulling my hair out! I know just enough about css and html to be dangerous, but not enough to really figure it out.
    Thank you, I really appreciate it if you're able to help me :)

    http://ellageepolish.storenvy.com/

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Sorry I forgot to say, I want the slide show to be certain photos, not full products. Thank you <3

      Delete
    3. Sorry, I'm not that good with CSS and haven't updated my blog in a while due to school and vacation. Please try checking out the Storenvy forums... they are usually quick in responding!

      Delete
  3. WOW! Thanks so much for the info! I am very new to Storenvy well new to any sort of online stores as I always sold through ebay/amazon etc. and had a brick and mortar. I am now leaping with 2 feet into the unknown! You have given me a Flashlight! THANKS SO MUCH! LOL

    ReplyDelete
    Replies
    1. Yay, I'm glad more people are using Storenvy too! Etsy fees are expensive after a while and I know a ton of people on Tumblr who have started craft/fashion online stores on this site too!

      Delete