Customize your Storenvy store html and css

UPDATE! This tutorial was written for the old Storenvy theme so not all changes will work for the new default Cooper theme.

You can also find premade Storenvy themes in my design shop.

Storenvy is great place to open up a shop because it’s free and you can customize your own store design. The default shop uses very clean css and html and is real easy to change.

Below you’ll find a tutorial on how to edit some basics, using css and html. Make a backup of your code before editing by going to your Storenvy dashboard > Design > Current Theme > Download Files.

————————————————————————————————————-
1. CSS – CHANGE STYLE OF PRODUCTS TITLE
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit styles > CSS mode
B. Find the h2#title { } code and replace it with the following code. This code removes the border at the bottom. Change the size of the font by changing 18px to a smaller or larger number.

h2#title {
color: #777777;   /*: Page Title :*/
border-bottom: none;
font-weight:normal;
font-size: 18px;
background-color: #FFFFFF; /*: Page Title Background :*/
}

————————————————————————————————————-
2. LAYOUT PAGE – REMOVE “ALL PRODUCTS” TITLE
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML
B. Find the following code and remove it.

<h2 id=”title”>{{ page.name }}</h2>

————————————————————————————————————-
3. LAYOUT PAGE – REMOVE CATEGORY COUNTER
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML
B. Find the following code and remove it.

<<span class=”collection_count”>({{ nav_item.product_count }})</span>

————————————————————————————————————-
4. LAYOUT PAGE – CENTER NAV BAR
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML
B. Add <div id=”navcenter”> above <ul id=”nav”> and place </div> after </ul>
C. In the Storenvy dashboard go to Design > Edit styles > CSS mode
D. Add the following css

#navcenter{
text-align: center;
display: block;
width: 930px;
margin: 0px;
padding: 0px;
overflow: hidden;
border: 0px;
}

#nav {
overflow: hidden;
margin: 0;
padding: 0 5px 10px;
display: inline-block;
width: auto;
}

————————————————————————————————————-
5. LAYOUT PAGE – EDIT OR REMOVE FOOTER
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML
B. Find the following code and remove it (your code may look slightly different). You can add your own text and links here or change the default ones.
<a href=”http://www.storenvy.com/” id=”storenvy_powered”>Powered by Storenvy</a>
<div id=”footer_info”>
<ul>
<li><a title=”Contact us” href=”/contact”>Contact</a></li>
<li><a title=”Frequently Asked Questions” href=”/faq”>Store Info</a></li>
<li><a title=”Open a Free online store!” href=”http://www.storenvy.com/selling-on-storenvy?ctx=s&amp;src={{ store.url }}”>Open Your Own Store</a></li>
</ul>
</div><!– end #footer_info –>

————————————————————————————————————-
6. SIDEBAR – INSTALL SOCIAL MEDIA BUTTONS
————————————————————————————————————-
A. Upload your social media icons to Photobucket or Picasa. Whichever you use, you will need the link to the image.
B. Edit the following code by adding the location to your icon images and the links to your sites. Duplicate the code if you want more icons.

<a href=”http://www.YOURLINK.com/” target=”blank”><img src=”http://ICONIMAGE.jpg” style=”padding:2px;” border=”0″/></a>

C. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML
D. Find the following code and replace it with the code you made in step B

<a href=”{{ pages.contact.url }}” class=”contact_us”>Contact</a>

————————————————————————————————————-
7. REMOVE SIDEBAR
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML. Now look for <div id=”sidebar”> and put the following code in front of it:

<!–remove sidebar

B. In the Storenvy dashboard go to Design > Edit styles > CSS mode and add the following code:

#main {
display: inline;
float: left;
width: 960px;
}

————————————————————————————————————-
8. MOVE INFO LINKS TO TOP
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Layout > Using custom HTML and find the code <div id=”wrapper”> and paste the following code after it.

<div id=”infolinks”>
<div id=”infolinks_li”>
<ul>
<li><a title=”Contact us” href=”/contact”>Contact</a></li>
<li><a title=”Frequently Asked Questions” href=”/faq”>Store Info</a></li>
</ul>
</div>
</div><!– end infolinks –>

B. In the Storenvy dashboard go to Design > Edit styles > CSS mode and add the following code:

#infolinks {
position: relative;
float: left;
width: 100%;
text-align: center;
}

#infolinks #infolinks_li {
position: relative;
float: left;
width: 100%;
}

#infolinks ul {
font-size:12px;
padding: 0;
}
#infolinks ul li {
display: inline;
}
#infolinks ul li a {
color:#000000;
padding-right:4px;
}
#infolinks a:hover {
text-decoration: none;
color:#999999;
}

————————————————————————————————————-
9. PRODUCTS PAGE – REMOVE TAGS
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Product > Using custom HTML
B. Find the following code and remove it.

<ul id=”tags”>
{% for tag in product.tags %}
<li class=”tag”>
<a href=”{{tag.storenvy_search_url}}” title=”Search Storenvy for {{tag.name}}.”>{{ tag.name }}</a>
</li>
{% endfor %}
</ul>

————————————————————————————————————-
10. PRODUCTS PAGE – ADD PRODUCTS TITLE
————————————————————————————————————-
A. In the Storenvy dashboard go to Design > Edit pages > Product > Using custom HTML
B. Place the following code above <div id=”product”>

<div>
<h2 id=”title”>{{ page.name }}</h2>
</div>

If you want to change anything else in your store just look up the css in the original Storenvy css and change it.

TUTORIAL: How to add Google webfonts to your Storenvy store >>

Leave a Reply

Your email address will not be published. Required fields are marked *