How to create a Big Cartel breadcrumb navigation | Wednesday, October 13th, 2010

Comments


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.

<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:

breadcrumbs

  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.

#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.

breadcrumbs

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!


Post Author: Zach Reed

Zach is the owner of Blue Tide Productions from Indianapolis, IN, USA. He loves music, Qdoba, watching movies and enjoying life! He made this fine blog, also! ;) You can follow him on Twitter (@bluetidepro)!


Tags: , , , , , , , , , , ,

Author: Zach Reed

Comments & Thoughts

Top
  • http://twitter.com/shirtgirls Shirt Girls

    Oh, hell. I did it, took it out because I wasn’t sure if I liked it and my whole store scooted over and won’t go back. Blast.

  • Anonymous

    Be sure you didn’t delete something else out. Also, be sure to delete any css you might have added that could have screwed it up.

  • http://twitter.com/shirtgirls Shirt Girls

    Ah, if you take it out… take ALL of it out. The last got me. Cool idea, though. I may have to decide where I want it first so I don’t screw everything up! (Or just hire a professional like you!)

  • Anonymous

    haha Glad you got it fixed! Yeah, some stores may need to customize it more to make it fit the “look” of the store. But if you ever need more customizations or help with it, I am just an email away! http://bluetideproductions.com/contact-blue-tide-productions/ Thanks “Shirt Girls”!

  • http://www.printingray.com/custom-stickers-printing.html custom stickers

    I just across this post, I found Big cartel is really good for tee printing business as well any kind of printing business to show products. I was preferring WordPress cart which is free of cost but now i change my mind towards Big Cartel. Thanks for making familiar with such a beneficial product.

blog comments powered by Disqus