Thursday, July 11, 2013

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.



5 comments:

  1. I noticed on your shop that you have sidebar headers for each section, and also have tabs at the top. Were these added after the Cooper update? I can't seem to add these to my site.

    Thanks!

    ReplyDelete
  2. I did add the top tabs after the Cooper update. This post will show you how to add those...

    http://beansproutboutique.blogspot.com/2014/06/storenvy-adding-top-navigation-tabs.html

    ReplyDelete
  3. Do you know how to get one's social media buttons to stop pointing only to the marketplace listing? I only have a custom shop. If I pin something to Pinterest, for instance, I have to edit the pin after to get it to point to my custom store...otherwise it's a marketplace link, which comes up as a 404 error.

    ReplyDelete
    Replies
    1. Hi Kate. Sorry just getting back to you. I don't know how to make Pinterest point to a different url. I tried looking up a couple things, but couldn't find anything. Sorry I couldn't be of help. Good luck.

      Delete