Storenvy: Adding top navigation tabs

This tutorial will help you customize your navigation links by adding tabs to the top of your page. You can see what they will look like at Bean Sprout Boutique.

STEP 1: Edit your HTML

1. To find your HTML codes, go to Store Admin>Design>HTML Pages >Layout>Using Custom HTML
2. Look for:  </div><!-- end #header --> Below that, is where you'll paste the new code.
3. Select and Copy/Paste the following code to your html.

<div id="topnav">
<ul id="tabnav">
<li class="tab1"><a href="http://www.yoururlhere.com/">Home</a></li>
<li class="tab1"><a href="http://www.yoururlhere.com/gallery">Gallery</a></li>
</ul>
</div>

4. Save changes.

*TIP: I only made tabs for the Home page and Gallery page. You can make as many as you wish. Just copy/paste the code and change the tab# and url for each.


STEP 2: Edit your CSS

1. To find your CSS codes, go to Store Admin>Design>CSS Mode
2. Copy and Paste the following code on your CSS page.

#topnav {
width: 200px;
margin: 0px 0px -9px 220px;
}

ul#tabnav {
text-align: left;
list-style-type: none;
}

ul#tabnav li {
display: inline;
background-color: #fff;
}

ul#tabnav li a {
padding: 7px;
color: #fff;
background-color: #70920a;
margin-right: 0px;
text-decoration: none;
}

ul#tabnav a:hover {
color: #3E4D02;
background-color: #fff;
}

3. Edit to fit your store theme and colors.
4. Save changes and preview your store.


My top navigation tabs look like this. You can see the entire page at Bean Sprout Boutique.

Storenvy: Opening social links in new window

**UPDATE: This tutorial was made pre-Cooper theme update.**

By default, the Social links in the footer of your page with redirect the user to those sites in the same window, causing them to leave your site. If you'd like those links to open in a new window, this tutorial will show your how. It looks like a lot of code, but we'll only be adding target="_blank" to existing code. My navigation looks like the image below. You can see the entire page at Bean Sprout Boutique.

STEP 1: Edit your HTML

1. To find your HTML codes, go to Store Admin>Design>HTML Pages>Layout>Using Custom HTML
2. Look for:  <div id="footer"> Scroll down and you'll see the code for the Social navigation.
It will look like this:

<li>
{% if store.places != blank  %}
  <span class="footer-large">SOCIAL</span><br/>
  <ul>
  {% if store.twitter_url %}<li><a href="{{store.twitter_url}}" class="footer-social-link twitter"></a></li>{% endif %}
  {% if store.facebook_url %}<li><a href="{{store.facebook_url}}" class="footer-social-link facebook"></a></li>{% endif %}
  {% if store.tumblr_url %}<li><a href="{{store.tumblr_url}}" class="footer-social-link tumblr"></a></li>{% endif %}
  </ul>
{% endif %}
</li>

3. Copy the following code and paste it inside the <a> tag.

    target="_blank"

4. Your code should look like this:

<li>
{% if store.places != blank  %}
    <span class="footer-large">SOCIAL</span><br/>
   <ul>
   {% if store.twitter_url %}<li><a href="{{store.twitter_url}}" class="footer-social-link twitter" target="_blank"></a></li>{% endif %}
   {% if store.facebook_url %}<li><a href="{{store.facebook_url}}" class="footer-social-link facebook" target="_blank"></a></li>{% endif %}
   {% if store.tumblr_url %}<li><a href="{{store.tumblr_url}}" class="footer-social-link tumblr" target="_blank"></a></li>{% endif %}
   </ul>
 {% endif %}
 </li>

5. Save changes and preview your store.

--------

STEP 2: Add your other Social media links

Storenvy uses an image for the Twitter, Facebook, and Tumblr links. Someday, I may create and host my own icons for Pinterest, Instagram and Blogger to use in the Social links, but for now, I just have text.

1. To find your HTML codes, go to Store Admin>Design>HTML Pages>Layout>Using Custom HTML
2. Look for:  <div id="footer"> Scroll down and you'll see the code for the Social navigation. It will look like this:

<li>
{% if store.places != blank  %}
   <span class="footer-large">SOCIAL</span><br/>
   <ul>
   {% if store.twitter_url %}<li><a href="{{store.twitter_url}}" class="footer-social-link twitter" target="_blank"></a></li>{% endif %}
   {% if store.facebook_url %}<li><a href="{{store.facebook_url}}" class="footer-social-link facebook" target="_blank"></a></li>{% endif %}
   {% if store.tumblr_url %}<li><a href="{{store.tumblr_url}}" class="footer-social-link tumblr" target="_blank"></a></li>{% endif %}
   </ul>
 {% endif %}
</li>

3. Add <br /> after the last Tumblr link. Copy the following code and paste it after your Tumblr link.

<li><a href="http://pinterest.com/yourname" target="_blank">Pinterest</a> </li><br />
<li><a href="instagram.com/yourname" target="_blank">Instagram</a> </li><br />
<li><a href="http://yourname.blogspot.com/" target="_blank">Blogger</a> </li>

4. Your finished code should look like this:

 <li>
{% if store.places != blank  %}
   <span class="footer-large">SOCIAL</span><br/>
   <ul>
   {% if store.twitter_url %}<li><a href="{{store.twitter_url}}" class="footer-social-link twitter" target="_blank"></a></li>{% endif %}
   {% if store.facebook_url %}<li><a href="{{store.facebook_url}}" class="footer-social-link facebook" target="_blank"></a></li>{% endif %}
   {% if store.tumblr_url %}<li><a href="{{store.tumblr_url}}" class="footer-social-link tumblr" target="_blank"></a></li>{% endif %} <br />
   <li><a href="http://pinterest.com/yourname" target="_blank">Pinterest</a> </li><br />
   <li><a href="instagram.com/yourname" target="_blank">Instagram</a> </li><br />
   <li><a href="http://yourname.blogspot.com/" target="_blank">Blogger</a> </li>
   </ul>
{% endif %}
</li>

5. Save changes and preview your store.

*TIP: Your links may look different depending on the social media sites you use.

Here is what my finished footer looks like. You can see the entire page at Bean Sprout Boutique.

Storenvy: Adding navigation headlines

This tutorial will help you customize your Navigation, in the new Cooper theme, by adding headlines to the categories in your sidebar. My navigation looks like the image below. You can see the entire page at Bean Sprout Boutique.

STEP 1: Edit your HTML

1. To find your HTML codes, go to Store Admin>Design>HTML Pages>Layout>Using Custom HTML
2. Look for:  <div id="sidebar"> Below that, you'll see the code for the navigation.
3. Copy the following code.

   <hr/>
   <h3>Categories</h3>
   <hr />

4. Look for:  <ul id="nav"> and paste the code above it.
5. Repeat above  <ul id="buttons"> and <ul id="places">
6. Save changes and preview your store.

*TIP: I moved my "places" above my "buttons."

--------

STEP 2: Edit your CSS

1. To find your CSS codes, go to Store Admin>Design>Theme>CSS Mode
2. Copy and Paste the following code to your CSS page.

   #sidebar h3 {
    margin: 5px 0px 5px 0px;
    color: #70920a;
   }

3. Edit the color to fit your store theme.
4. Save changes and preview your store.


*TIP: Consider mobile devices when selecting your headline color. The navigation background on mobile is a dark gray. Dark colors may not show up very well.