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.

Storenvy: Moving navigation (collections) from top to the sidebar

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

This tutorial will help you customize your Navigation links and move them from the top to your sidebar. 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>Theme>Edit Pages >Layout>Using Custom HTML
2. Look for:  <div id="container"> Below that, you'll see the code for the navigation.
3. Select and Cut the following code from your html.

<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 }}
              <span class="collection_count">({{ nav_item.product_count }})</span>
            </a>
          </li>
          {% endfor %}
        </ul>

4. Look for:  <div id="sidebar"> and paste the navigation code below it.
5. Save changes and preview your store.


*TIP: If you have an avatar on your page and want the navigation after it, look for <div id="avatar"> and paste the navigation code after the </div>.



STEP 2: Edit your CSS

1. To find your CSS codes, go to Store Admin>Design>Theme>Edit Styles>CSS Mode
2. Find the following code on your CSS page. If it isn't there, then Copy and Paste the following code on your CSS page.

/*: Navigation Links :*/

#nav {
background-color: #FFFFFF; 
overflow: hidden;
margin: 0;
padding: 0 5px 10px;
display: block;
width: 200px;
}

#nav li {
float: left;
}

#nav li a {
color: #70920a;     /*: Change to fit your color scheme :*/                    
display: block;
margin: 0 4px 4px 0;
padding: 5px 10px;
font-weight: bold;   /*: Change to normal is you don't want them bold. :*/
font-size: 18px;   /*: Change if you want the font larger or smaller :*/
}

#nav li.current a {
  color: #703C0A;          /*: This is the color that will appear when you are on the current page. Change to fit your color scheme. :*/          
}

#nav li a:hover {
background-color: #FFFFFF;        
color: #926312;         /*: Change to a different color for the rollover :*/
text-decoration: none;
}

#nav li span.collection_count {
font-size: 11px;
vertical-align: 1px;
font-weight: normal;
}

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



My navigation looks like this. You can see the entire page at Bean Sprout Boutique.

Storenvy: Adding and Customizing Buttons

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


There is a wonderful tutorial on Jotting Down Life about customizing your Storenvy storefront. She covers how to change fonts, move the navigation to the sidebar, edit your buttons, and hide tags.

This tutorial will elaborate on adding and customizing your Social Media links in your sidebar navigation. 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>Theme>Edit Pages >Layout>Using Custom HTML
2. Look for:   <div id=”buttons”>
3. Add links to your pages in the following format.
 
<div id="buttons">
  <a href="http://www.facebook.com/yourname" target="_blank">Facebook</a>
  <a href="http://www.instagram.com/yourname" target="_blank">Instagram</a>
  <a href="http://yourname.tumblr.com/" target="_blank">Tumblr</a>
  <a href="http://www.twitter.com/yourname" target="_blank">Twitter</a>
  <a href="http://www.pinterest.com/yourname" target="_blank">Pinterest</a>
  <a href="{{ pages.contact.url }}" class="contact_us">Contact</a>
  <a href="{{ pages.faq.url }}" class="faqs">FAQs</a>
</div>  <!-- end #buttons -->

4. Save changes and preview your store.

*TIP: Adding target="_blank"> will allow the links to open in a new window.


STEP 2: Edit your CSS

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

/*: Sidebar Navigation Buttons :*/

#buttons {
position: relative;
-moz-border-radius: 5px;   /* This creates the rounded corners. */
-webkit-border-radius: 5px;  /* This creates the rounded corners. */
text-align: center;
font-weight: bold;
font-size: 14px;
}

#buttons a {
color: #fff;    /* This is the text color. */
background: #70920a;   /* Change to your choosen theme color. */
display: block;
border: 1px solid #d5d5d5;
margin-bottom: 5px;
padding: 10px;}

#buttons a:hover {
color: #fff;   /* This is the text color. */
background-color: #3E4D02;    /* Change to different color for rollover effect. */
background-image: none;
text-decoration: none;
margin-bottom: 5px;
padding: 10px;
}

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


My buttons look like this. You can see the entire page at Bean Sprout Boutique.

Welcome

Introductions...

Hello! My name is Nakesha, and I'm a crochetaholic. I'm also a graphic designer, wife, mommy of toddler twins, and a music lover. In my younger years, I played bass guitar in a band called murmur with my husband and some friends. I have an interest in health food and worked at a health food store throughout my college years. Most recently, I had a career as a graphic designer at a business newspaper.

I resigned from the daily grind of the corporate world to focus on raising my family, but I refused to entirely give up on something I'm passionate about, creating, no matter what form it takes. So I decided to turn a life-long hobby into a small business venture. I opened Bean Sprout Boutique, an online shop, selling handmade crocheted baby hats and photography props. I also continue to freelance in graphic design, when a need arises, and put my design skills to use in marketing my own business.

With this blog, I hope to share pieces of my daily life, design tips and tricks, crochet projects, and anything else I can think of. I look forward to meeting you all and sharing in this journey with you!