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.