Blue Tide Productions Blog Design, Web, Photography, Video

---

---

Big Cartel is one of the most awesome shopping cart platforms for clothing and tee designers, bands, record labels, jewelry makers, crafters, and other artists! It is home to over 100,000 stores! One of the biggest requests I get for work is to do custom Big Cartel themes, and I have received much recognition for it!

I just recently finished a store for a clothing line boutique and part of the custom theme required a breadcrumb navigation. This is not something I have ever had to do with a Big Cartel theme (I have done it on regular sites before) so I decided to dive in head first! I also thought it would be nice to share how I did it with other Big Cartel (or store owners) custom store builders out there! I will now do a step by step (with code) on how to produce an awesome breadcrumb navigation! Comment the article after you read it if you have questions or would like to show how you implemented this tutorial on your custom Big Cartel site!

General Tutorial Notes:

• I am going to assume you are already signed up with your Big Cartel store.
• Doing this customization requires a Diamond or Platinum Big Cartel account.
• I have attached various screenshots throughout the process to help you (the http://grab.by links are).
• Tutorial skill level: beginner to intermediate

Step 1) Finding The Layout Template

First off, you will go to www.x.bigcartel.com/admin (or if you have a custom domain, www.x.com/admin). Log in your account with your password. Now in the top navigation find “Design” (screenshot: http://grab.by/6QBI). Once you click that, below the big “Design” navigation item you will find “Basics, Pages, Themes”, select “Pages” (screenshot: http://grab.by/6QBR). You should now see the listings of your themes pages. Find the template labeled “Layout” (screenshot: http://grab.by/6QBV) and click that. You should now be on the layout template page.

Step 2) Editing The Layout Template

If you have never used a custom template for your Big Cartel it should look something like this: http://grab.by/6QBY. I am not going to fully going into all of the customizations you can do to that but I am going to assume you are familiar with the templates and are using a custom layout page. Now with the following code you can place this anywhere you would like the breadcrumb navigation to appear. This is no specific place that you have to put it, but I will recommend it goes in the Layout template since that will make it appear all throughout your Big Cartel store.

Step 3) The Code

This is the code you will use to produce the breadcrumbs.

Source code

<div id="breadcrumbsForStore">
<h5>
    <strong>You are here:</strong>
    <a href="/" title="store home">Home</a>
    {% for category in product.categories limit:1 %} &raquo; {{ category | link_to }}{% endfor %} &raquo;
    <a href="{{ page.url }}" title="{{ page.name }}">{{ page.name }}</a>
</h5>
</div>

To explain:

1. The “You are here” is just a way of telling the user where they are on your site.
2. The “Home” will link to your store home page listing all of the products.
3. The “for statement and limit it to 1″ (usually most stores products only have one category selected but this is just a fail safe if there is more than one category selected) to produce the parent category of the product you are in (if you are viewing a specific product page).
4. I use » (“raquo”) as a separator. You could replace this with something like | >if you wanted.
5. This part of the code produces the name and link to the current page you are one. This would display the product name if you are on a product page or it would display the category name if you were on a category page or a custom/regular page name if you were on a custom/regular page (ex: the cart, the contact page, etc).
6. 6) This code around everything wraps the breadcrumbs so you can style them.

Now that should produce the content you want, now you will need to style that content appropriately.

Step 4) Styling The Code With CSS

I wrapped my code in a “div” with the id “breadcrumbsForStore” then by a h5 or a header 5. You could always change “breadcrumbsForStore” from a div to a paragraph (p) tag, span tag or whatever you would prefer. So based off it being a “breadcrumbsForStore” to h5 this is the code I used to style it.

Source code

#breadcrumbsForStore{text-align:right;text-shadow:1px 1px 0 #7C275E;background:#C64D9C;color: #FFFBCF;margin:5px 0 0 0;padding:0 0 2px 0;clear:both;float:right;}
	#breadcrumbsForStore h5{font-size:12px;}
		#breadcrumbsForStore h5 strong{font-weight:bold;}
		#breadcrumbsForStore h5 a{color:#fff;border-bottom:1px dotted #FFFBCF;}
			#breadcrumbsForStore h5 a:hover{color:#FFFBCF;border-bottom:1px dotted #fff;}

Step 5) The Final Result

Here is a screenshot of the final product used from the above CSS. There are 3 screenshots, showing how various pages would look.

PLEASE NOTE: On this screenshot above I changed the wording “Home” (like in the code provided) to “All Products”.

Step 6) YOU ROCK! YOU’RE DONE! :)

And that is it! Easy enough, right!? Now it is your turn! Also, after you do this for yourself on your website please use the comment box below to comment some of your Big Cartel breadcrumb navigation’s made from this tutorial! I would love to see what everyone comes up with! There are lots of cool ways you could style them and arrange them!

---

---

Tags: Big Cartel, BigCartel, blue tide, breadcrumbs, code, code tips, Coders, Designers, new, tut, tutorial, zach reed

Author: Zach Reed

This entry was posted on Wednesday, October 13th, 2010 at 2:16 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.