Storenvy customized storefront CSS and HTML

How to Customize Your Storenvy Storefront Tutorial

I’m in the mood for a tutorial today so here’s a total newbie tutorial for all of us who knows nothing about Storenvy.

NOTE: I am NOT using the Copper Theme, and I do not know how to customize that yet. Sorry ☺

Assuming that you already have an account in Storenvy and you have made a “store” and have your own URL, the first thing you need to know is that in Storenvy you own three things: your User profile, your Store profile and your Storefront. Don’t be confused.

  1. User profile is like your Facebook page. It has all the things about you, the seller. Your country, short bio, your activities like commenting, liking or posting of new products.
  2. Store profile is the same as user profile, but instead of you, it’s all about your products. Your new products, comments on your products and who follows it.
  3. Storefront on the other hand is your catalog. Here, you can visually present your array of products, their prices and details.

Now, on this post we will focus on your storefront, the editable area of your account.
To edit this, on the upper-right corner of your homepage you will see your thumbnail and name beside your cart. Hover on your photo and choose Store Admin.

BEGINNER’S TIP: The first thing I want you to do is to make a trial product.
To do this click Products > Add Product. The important things to do are to put in a name, price, photo and check a label (On Sale/Preorder) then go to Manage Collections and add 2-3 more collections.
You need these so you’ll have a visual on what you are editing.

Click on the Design tab and you will arrive here:

Step 1:

Click Banner & Background Image. 
Upload your banner and background image here.
BEGINNER’S TIP: Storenvy accepts .png files for your banner with a transparent background, you can use it!
Take advantage of this. :)

After this, click Go To Store. You can now see your background image and header! Congratulations! :)

Step 2:

Now that you can see your storefront, it’s easier to edit your colors here. Also, if you have a banner 979px and smaller, you can adjust it’s placement. Go nuts!
BEGINNER’S TIP: If you cannot see which color you are editing, chances are you’re editing an individual product’s page. Choose save then click on a trial product you made a while ago to see what an individual product page looks like. Your store is not yet set to public yet so don’t worry if you mess things up. Keep on editing.

Now, you have the basic look of your store.
But…if you want to customize it further, we can dive deeper into the souls of your page, namely CSS and HTML.

BEGINNER’S TIP: Go to www.w3schools.com if you get lost with html. I review my html vocabulary there. Also, don’t be shy to ask help from google (or me!) about html or css codes and hex colors. I’ll try my best when I find the time to answer all your queries. :)

First step is to know what to edit where.

Here are two very different and important places you’d have to edit: your Storenvy’s HTML and CSS.

To see your CSS codes, go to Store Admin>Design>Theme>Edit Styles>CSS Mode
To see your HTML codes, go to Store Admin>Design>Theme>Edit Pages >Layout

Now, here are the most common customizations you might want to do. If you need more, all you need to do is ask!:)


I. How To Change the Fonts

1. Go to http://www.google.com/webfonts and search for the font you like to use.


2. Copy the code you will see in the @import tab.
3. Go to your CSS page and look for: 

@import url('http://www.storenvy.com/themes/default/stylesheets/styles.css');

4. Paste the google webfonts code under that.

5. Go back to your CSS and paste this code anywhere you like:

* {Paste Here/*: Font :*/
}
p {Paste Here/*: Font Paragraph:*/
}

6. Go back to your google webfonts and copy the CSS code for the font to show up. Put that code in the area specified above.
Here’s an example from my Storenvy:

II.  Move the nav bar (collections) to the sidebar

– This code is important especially when you have a lot of collections and you don’t want it to clutter the top of your store.

1. Go to your HTML page and look for:

<ul id="nav">
{% for nav_item in collections.all %}
<li id="collection_{{nav_item.id}}_link" {% if nav_item == collection %} class="current" {% endif %}>
<a href="{{nav_item.url}}">
{{ nav_item.name }}
</a>
</li>
{% endfor %}
</ul>

2. Put <!– before that code and –> after it. This means that the code is ignored. It’s better to do it this way than to delete it so when you need it the next time, it’s still there.
3. Go to your HTML page and look for:

<div id="buttons">

4. Paste these codes above that line:

<!-- Move collections to the sidebar above div id="buttons" START-->
<div id="sidenav"> <ul>
{% for nav_item in collections.all %}
<li id="collection_{{nav_item.id}}_link" {% if nav_item == collection %} {% endif %}>
<a href="{{nav_item.url}}">
  {{ nav_item.name }}
  <!-- <span>[{{ nav_item.product_count }}]</span> -->
</a>
</li>
{% endfor %}
</ul> <hr> </div>
<!-- Move collections to the sidebar above div id="buttons" END-->

BEGINNER’S TIP: When you add anything to your HTML, put titles before and after it so if you need to edit or delete it next time, you can find it easily. You can put any title you want to put just as long as they are inside the <!– and –>  markers HTML or /*: and :*/ for CSS. 

HTML Example:

<!-- These codes below will change the color of the title. This sentence will be ignored by the code because it's inside the ignore me markers. Amazing! -->

YOUR CODES

<!-- End of the code that changes the color of the title. -->

CSS Example

/*: These codes will move my title to the bottom. If I want to put my title back to the top I will delete from here:*/

YOUR CODES

/*: If I want to put my title back to the top. I will delete up to here:*/

 

III. Edit the look of the Buttons on the sidebar

1. Copy and paste these code anywhere on your CSS page. I will highlight red the things you can edit.

/*: Edit Side Bar Buttons Start:*/
#buttons {

position: relative;
text-align: center;  /* Buttons Alignment */
padding: 10px 0px 0px 0px;
}

#buttons a {
display: block;
background: none;
border: 1px dashed;
}

#buttons a:hover {
color: #ef7878;
text-decoration: none;
}
/*: Edit Side Bar Buttons End:*/

IV. Hiding Tags From Product View

With the tags

With the tags

Without the tags

Without the tags

If you want to hide the tags from the single product view, here’s what you have to do:

1. Go to your CSS Page and search for this code:

ul#tags li.tag

That’s the code we want to edit. 


2a. If you can’t find it, then there’s no problem. Just c
opy and paste these code anywhere on your CSS page:

ul#tags li.tag {
border: none;
font-size: 0px;
background: none;
}

2b. If you do find it, just edit some of its parts. Here’s an example from my CSS:

The green ones are my old settings. The red ones are the codes you have to add.
Just copy and paste the new red codes to hide the tags and insert

/* If you want to show tags again delete this */

before and after your old codes so it would get ignored.

ul#tags li.tag {
border: none;
font-size: 0px;
background: none;
}
/* If you want to show tags again delete this */
display: block;
padding: 4px 7px;
text-align: center;
text-shadow: none;
border: 1px solid #ef7878;
background: none;
font-size: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
{
/* If you want to show tags again delete this */

IV. Move “All Products” To the Bottom of The Menu

asdfadf1. Go to your Products

2. Select “Manage Collections”

3. Drag “All Products” to the bottom (Or re-arrange everything totally). Ta da!

 

 

 

 

 

 

These are the top things you might want to do to your store, but the possibilities are endless!

You can see how it looks like here on my page: http://kikaybasket.storenvy.com/

I have there edited there a lot more others so I cannot put them all in here. Also, putting them here limits your imagination, I believe that you store must look like your store and not mine, SO, If you want to customize parts of your store like the page title, avatar or products’ photos, feel free to ask me and I will give you the instructions! :)

There ya go! Have fun and good luck to your upcoming business! :)

 

BEGINNER’S TIP:  To make your own banners and logos easily and for FREE, try these sites:
http://banner.fotor.com
http://www.bannerfans.com/banner_maker.php

Things to Remember: 

  1. Make backups before you save any changes.
  2. Always edit one thing at a time.
  3. If things get crazy, remember that HTML and CSS has rules.
"code"

and

code

are two different things.

4. Pay attention to ” ; <> {} / They can make or break (literally) your codes.

5. Read Rule #1

 

 

 *Note: I edit this regularly if there are customization requests on the comment box because I cannot put css and html in there. So, if you do have questions, please do check back. I put the latest ones at the bottom ☺

 

 

64 thoughts on “How to Customize Your Storenvy Storefront Tutorial

  1. sharylove says:

    Hey Cerrise. I’m trying to move my navigation to the side. It’s telling me there’s an error… I swear I did everything right…

    1 error prohibited this theme from being saved
    Layout Unknown tag ‘endif’

  2. Cerrise says:

    Hey Sharylove :)
    I’m not sure what made the error (maybe the update), but upon checking my own html the code changed to this:

    Okay, I can’t post the code here in the comments section, I just edited the tutorial, try the new code I pasted there and tell me what happens. :)

  3. Missy says:

    I just changed the font…it changed the background color, moved my header, and the text color! Hilarious! I’ll keep working at it….but what in the world did I do wrong!?! I have done a little in the HTML space.

  4. Paul Griswold says:

    Great tips! But I do have one question. Do you know how to add a “Sold Out” banner to your front page images? Our shop is http://japancast.storenvy.com and I’m afraid customers are getting ticked-off when they click on something that’s currently not in stock. I want to keep the photos & descriptions up, but just have “sold out” appear on the image. Any idea how to make that happen? Thanks!!

    • Cerrise says:

      Hi Paul! Have you ever tried having a sold out product and not have the banner? It’s because I’m not entirely sure if I had added that or it’s a Storenvy default. My storefront does it automatically though. :) How bout yours?

  5. shelly says:

    Thanks so much for this. I moved my collections to the sidebar with your help.

    Do you know if it’s possible to remove the “all products” menu item?

  6. jen says:

    I love your stores layout I just checked it out. Is there a website where I can learn more about all this coding stuff… I really want to make my store attractive yours is soo lovely

  7. Pixie says:

    Hi,
    Thanks for posting this.
    How do you hide the tags where you have your products? I can’t figure out how to and all ive found from Google is to just delete them which is not something I want to do.

    • Cerrise says:

      Pixie, I apologize for the late reply.
      Okay, since I cannot post html and css codes here, I added “Hiding Tags From Product View” in the tutorial. Thanks for this idea!:)

  8. Brionica Lawson says:

    Im not sure what im doing wrong in order to change the font. I put the (import url…) that is under the import tab on good under the import tab in the styles(CSS). Then I pasted the code that says paste here at the bottom of the CSS, and I copy and pasted (font-family: ‘Petit Formal Script’, cursive;) where it said paste here. It didn’t do anything. Can you please tell me what I am doing wrong.

    Also, are you familiar with changing the images in the product slider. I have the slider on my site but not sure how to change the images.

    Thanks!

    • Cerrise says:

      Okay, I see. can you give me the link to your storenvy? Or better yet, send your CSS codes to my e-mail so I can figure out what’s wrong.

  9. Jason says:

    Thanks for doing all this could you please tell me how you changed the font and size of the nav links in the side bar?

  10. penny says:

    thank you so much for the tutorial, it was really fun to change the coding by myself instead of buying it from others :)
    i have a question though, how do you have different fonts for the side bar and the product name?

  11. Matt says:

    hi, is there a way to make my store a 3 column layout? with 2 sidebars and the content in the middle? any help is appreciated thank you!

    • Cory says:

      Here’s a fix:

      Content Background
      Now for the #container, or the middle section, background. If you have a pattern, I’d recommend you leave this one a solid color or very, very subtle gradient. Otherwise, feel free to remove it all together, using this code:

      #container, #content{
      background-color: none;
      }

  12. brenda says:

    Hi there,
    Could someone advise of how to schange collection font size and how to change it from uppercase letters to lowercase

  13. Ruby says:

    How do I add categories to the page? I used the simple version of the site as the other stuff just gets me lost. Currently my only category is shop all

  14. Dani says:

    I would like to add a little description/into under my header on the home page of my storenve. How do I add extra text with out messing up the Header/store name?

    • Cerrise says:

      Try this.
      Go to HTML Pages Layout and edit your HTML there.
      Ctrl F and look for the word Banner. It should be under Wrapper and Header. Place your text just before the !:)

  15. Vanessa says:

    I’m loving this new cooper theme. However, I’d like to now add ‘sub-collections’ to my store. In a perfect world, clicking on the collection would take you to the collections page which is then set up like the front page with each ‘sub-collection’ represented with a photo. Clicking on that photo would then take you to all of those specific items.
    Basically I would like to add one more layer to my shop. Any idea how to do this?

      • Vanessa Prieto says:

        Thank you so much for this post… one of the few that I can actually follow!! :) I’ve been having the same issue as Cerrise. Following this post for your fantastic updates… and with my fingers crossed that you might start playing around with Cooper. ;-)

  16. briyanna wilson says:

    Hi! For inserting the @import link for the font underneath the @import already in the CSS, I paste the one from the google fonts thing and it won’t work when I try and save it, can you help?

  17. melissacalicaroux says:

    Hey there! great blog, wow i never thought i’d stumble upon a blog writting aabout HTML and CSS codes! but here i am reading and trying it all out XD

    I’m pinay too! i just followed you, hehe hopefully you follow back :P

    melissa

    lunsod.wordpress.com

    • Cerrise says:

      Thank you! I hope your coding goes well. Just message me if there’s anything I can do for you.
      I’ve been looking for Pinoy wordpress bloggers too, so yes I followed you back!:D

  18. onlyknowaboutraccoons. says:

    i’m COMPLETELY f.n lost.omg this is like trying to give myself a root canal.while reading arabic.with the lights off.and i’m drunk.yeah.i’m SERIOUSLY THIS retarded about computer stuff.i need help.in a big.BAD.way.with which part?uhm.all of it.i am sorry,in advance. <3

      • onlyknowaboutraccoons. says:

        you’re so sweet! ty for sending me that link! i tried.i just don’t understand.what did i END up doing? i now have a lot of (very pretty!) purple pink lines across my store’s front page.hahahaha! i have tried figuring out how to get them off,but no luck.omg.i should never have tried to do this on my own-especially after taking my ms (multiple sclerosis) meds.hahahaha!

      • Cerrise says:

        The best way I guess, is to reset your store’s HTML settings and try to edit only one thing at a time, making sure you have backups saved on your computer.

        Do you know the codes you have edited so far?

  19. onlyknowaboutraccoons. says:

    oh.btw-i also managed to shrink my ebay admin pages to TEEEENY TIIIIIINY little words-PLUS everything is crammed all the way over to th left.have NO idea HOW i managed to do that.all i was doing was trying to enter info.to list an item.lololol

  20. Whitney says:

    hi i am wanting to add two drop boxes to my products, one for color one for size i cant find a code anywhere for a storenvy. i hope you can help. i have a custom page btw

  21. sofia says:

    hi ^^ i made my storenvy store 2 days ago
    can anyone help me?? i have 1 problem
    1) the thumbnails of my pics, how do u centre/crop/edit them??

    • Cerrise says:

      I think you have to manually adjust your camera WHILE taking a picture of your products. Or edit your photos in your computer to match Storenvy’s photo ratio. :)

  22. Zack Krupp says:

    hi I was looking for a little help! I just recently made a store envy and am struggling a bit with the whole layout of my profile. The banner and background a problem but im trying to add a picture to website. Its funny because im bad with the codes and stuff but when I had a myspace way back in the day I remember just being able to copy the html and put it in a section and it would show up. I have a banner I designed that talks about my shipping as well as some old feedback from another store I had before that I wanted to add.All these pictures are mine so I cant really copy and paste anything? Maybe you would have a little advice or could lead me somewhere that can help me? Thanks

  23. kaiotedesigns says:

    Thanks for the tips! Any ideas how to have your domain NOT re-direct to storenvy url? Everything is set up correctly for forwarding and masking on go-daddys side. Anything in custom HTML we are missing or not adding properly?

    • matt says:

      hey Kaiot, this is normal. it can take anywhere from 24 hours – a couple weeks before the redirect will stop. my site did the same thing half the time it went right to the domain and the other time it would redirect to the storenvy link. i think mine took at least 3 weeks before it stopped redirecting. hope this helps.

  24. Rui Jun Luong says:

    omgad. I love how you customized your store!! It’s beautiful, teach me your ways haha. I have to figure out how they made this whole template, ughhh :'(((((((

    Thank you for explaining tho :)

I love reading your comments!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s