Customizing Big Cartel
This is an incomplete and ever-changing post about Big Cartel and a few tips for things I’ve run across in customizing my own shop. I’ve written this to the web designer/coder, so you should know some bit of HTML and CSS to understand my tips. You also must have a Big Cartel shop with a paid plan. If you don’t you’ll probably just be really confused.
Important Points
- backup your work before you make any changes
- bookmark this page for future reference
- changes have been made to my own custom theme, based on the Sexy default theme
- for the most part, this is specific info about Big Cartel’s API. I can’t help you work out HTML/CSS stuff, that’s up to you.
Please do not make templates (free or paid) using these tips. My purpose in sharing this is simply to improve the independent artist’s work, to give them a leg up. I didn’t intend for them to be mass-produced for profit. Many of you have been respectful of–and grateful for–the work that went into coming up with these things. Thank you for honoring my sweat and tears!
Contents
- 4 Column Layout for Products – OR – how to edit Sexy theme CSS
- Related Products
- Adding to the body tag for CSS
- Product Navigation
- Making room for a long product description
- Bars for product image navigation
- Different content for different pages
- Free Shipping Threshold
- Add images to cart
- Add qty input field to product page
- New products in the footer
- Shipping info on product page
- How to have collections or secondary categories
4 Column Layout for Products
This is the most common question I’ve been getting since I posted this. The default Sexy theme is designed for 3 columns, not letting you spread them out for a wider layout. So here’s a basic way to do this. You’ll need to experiment with your own CSS to find the right style, but I’ll just tell you how to edit the original Sexy theme CSS.
1. Move Sexy Theme CSS
This requires you to host the CSS files yourself, which you’re probably doing for your own CSS file and images anyway, but if you’re not, do it! You’re better off in the long run with all of my tips to host your own design files outside of Big Cartel.
Once you’ve set up a place on your server for your files, go to http://yourshop.bigcartel.com/themes/sexy/stylesheets/styles.css. Copy and paste this code into your own new CSS stylesheet on your server. I named mine simply sexy.css.
Then, in Big Cartel, under the DESIGN tab, change this:
@import url(/themes/sexy/stylesheets/styles.css);
to this:
@import url(http://yourwebsite.com/yourbigcartelfolder/sexy.css);
Obviously, change the “yourwebsite.com” and your “bigcartelfolder” to whatever you named them. Now you can edit the main stylesheet anytime you like.
2. Widen your layout
Change the width of the #wrap, #main, and #main-content divs to get the page the size you want. The products are designed to float, so as soon as the containing blocks are wide enough, you’ll automatically see 4 columns.
3. Set Products Per Page
Now go to the admin settings and set your product number per page to be divisible by the number of columns you have.
Related Products
This is a huge one I’ve been dying to figure out and have been asked several times for, and finally, it’s here! If it’s valuable to you and you’re grateful, please feel free to paypal me a donation to nataliejost@gmail.com if you’re so inclined. ;)
Okay, so here you go. Toward the bottom of your PRODUCT template page, where you want a list of related product images to show, place the following…
<div id="related_products">
{% for category in product.categories %}
<h2>More {{ category.name }}</h2>
<div class="related_products {{ category.permalink }}">
{% for product in category.products %}
<a href="{{ product.url }}" title="View {{ product.name | escape }}" class="product-a">
<img class="product-img" src="{{ product.image | product_image_url size:"medium" }}" alt="Image of {{ product.name | escape }}" />
</a>
{% endfor %}
</div>
{% endfor %}
</div>
This will output what you see above… for every category the product is in. Now, this could be overkill if you have products which share lots of different categories, so you might want to change the images to a list of products instead. If so, just change the HTML around to list format and change the <img.. bit to {{ product.name }}.
Note the single row of 5…
The output for this actually shows ALL of the products in the same category, so to clean it up and show fewer options (which is nice so as not to confuse your customers with TOO much info), I simply hid the rest with the following CSS…
#related_products .related_products {
height: 100px;
overflow: hidden;
}
#related_products img {
width: 100px;
}
The images are also the default size, so I reduced them. You can change "medium" above to read "thumb" as well, but for me those images are too small.
Adding to the body tag for CSS
In the course of figuring out related products, I also discovered a away to show the inventory bars for some products and not for others. I love them for products I do need to track inventory for, but for things like special orders or printables and downloads, the inventory bars are useless and in the way.
So I added some classes to the <body> tag so I can use CSS to hide the inventory bars.
In the LAYOUT template page, my body tag class looks like this:
<body id="{{ page.permalink }}-page" class="{{ page.permalink }} {{ page.category }} {{ product.permalink }}{% for category in product.categories %} {{ category.permalink }}{% endfor %}">
Here’s how it breaks down:
<body
id="{{ page.permalink }}-page"
class="
{{ page.permalink }}
{{ page.category }}
{{ product.permalink }}
{% for category in product.categories %}
{{ category.permalink }}
{% endfor %}
">
I added the last 4 lines
- the product permalink, so I can do something with a specific product page
- then for each product category, the category permalink, so I can style different types of products differently.
Now I can use the following CSS to hide the inventory bars for different products:
body.special-order #inventory,
body.printables-downloads #inventory
{ display:none; }
Product Navigation
Here’s a way to add a previous/next button set to your product pages so customers can flip through like a catalog.
Add this to your PRODUCT page at the top
<div id="product_next_prev">
<span class="prev">{{ product.previous_product | link_to: "← Previous" }}</span>
<span class="next">{{ product.next_product | link_to: "Next →" }}</span>
</div>
Use this CSS to style the buttons
This takes a little extra CSS trickery, so use with caution.
#product_next_prev span a {
display:block;
float:left;
background: #fff;
border: 1px solid #fff;
padding: 3px 7px;
margin: 2px;
}
#product_next_prev span a[href] {
/* non-link still marked up as a link, this is a workaround */
background: #fafafa url(img/Worn.png);
border: 1px solid #ccc;
}
#product_next_prev span a:hover {
background-color: #fff;
color: #000;
}
#product_next_prev span a[href]:hover {
position:relative; top:1px; left: 1px;
}
See that bit about a “workaround”? Big Cartel’s API marks up the next/prev text with a link, even when there is no next product to link to, so rather than confuse your visitor with a link they can’t click, this CSS will make that link appear as though it is not (because it’s really not). Capiche? :)
UPDATE: Matt from Big Cartel chimed in to offer a helpful tip for getting this one to work out… see the first comment.
Making room for a long product description
Sometimes you need a longer product description but the default theme leaves a pretty narrow space for your description. Here’s a quick and dirty way to flow some more text down in the space beneath the products images.
Before
After
This also works nicely if you have news about a particular product, like when more stock will be in, or when an item will be discontinued. Anytime you need text set apart, this will work.
Wrap your “extra” text in a DIV like so:
<div class="more">
The rest of your description here...
</div>
Then, position that div absolutely, relative to the product content area with this CSS…
#product-content {
position:relative;
}
#product-content .more {
position:absolute; left: 5px; top: 350px;
width: 290px;
}
If you’ve modified your theme, you might need to change the left, top, and width declarations to pixels that work for you.
Bars for product image navigation
This trick changes the product image nav from 1 | 2 | 3
to bars instead (see screenshot).
The first one shows 5 images, the second shows 3 images (note the bars).
Go to the PRODUCT page and change this…
<div class="images-nav">
…to this…
<div class="images-nav" id="has{{ product.image_count }}images">
Adding that ID to the DIV will give the block a different ID depending on the number of images the product has. If it has 2 images, it will have an ID has2images.
You can then use this to style the entire block differently for the number of images.
Use CSS to style the blocks
This makes the blocks a different width to fill the space for the number of image links there are.
#product-images #has2images .images-list li a { width: 50%; }
#product-images #has3images .images-list li a { width: 33.3%; }
#product-images #has4images .images-list li a { width: 25%; }
#product-images #has5images .images-list li a { width: 20%; }
This changes the color of each of those links
#product-images .images-list li.image-1 a { background-color: #eee; }
#product-images .images-list li.image-2 a { background-color: #ddd; }
#product-images .images-list li.image-3 a { background-color: #ccc; }
#product-images .images-list li.image-4 a { background-color: #bbb; }
#product-images .images-list li.image-5 a { background-color: #aaa; }
This gives it a different color on hover.
#product-images .images-list li a:hover {
background-color: #777 !important;
}
You’ll also need to replace some CSS. The easiest way to do this is just look for the following ID references and paste this over the top of it (you’ve backed up your original CSS just in case, right?) Or, compare this code with what’s there and change the things I’ve changed here.
#product-images .images-nav {
float: left;
position: relative;
width: 300px;
height: 28px;
margin: 10px 0 0 0;
}
#product-images .images-list {
position: absolute;
width: 250px;
top: 0;
left: 25px;
padding: 5px 0 8px 0;
text-align: center;
}
#product-images .images-list li {
display: inline;
list-style: none;
}
#product-images .images-list li.image-1 {
border-left: none;
}
#product-images .images-list li a {
display:block;
float:left;
color: #654;
height: 19px;
}
#product-images .images-list li a span {
display:none;
}
Different content for different pages
This tip will work for a lot of different scenarios but the way I use it most is for the sidebar/nav area, to show different content to the shopper depending on what page they’re on. Most recently I did this for the contact page, to show a quick FAQ instead of the categories.
Use this code in your LAYOUT page where the sidebar is (or wherever you want different things to happen):
{% if page.full_url contains '/contact' %}
do stuff for the contact page here
{% else %}
do stuff for all the other pages here
{% endif %}
See that if statement? You can change /contact to any page in your shop by changing it to match the URL of that page.
Free Shipping Threshold
This will add a bit of text to the top of your cart telling the shopper how much they’ve spent and what your free shipping threshold is. You could also use this for a free gift with purchase promotion. Say, with $25 purchase you get a free gift. If you’re real crafty you could probably even snag a product from their cart to be their free gift with a few extra parameters, but I digress…
Before hitting the threshold
After hitting the threshold
Add this code at the top of your CART page:
The HTML
<p id="free_shipping">
{% if cart.price < 50 %}
So far you've spent <em>{{ cart.price | money_with_sign }}</em>.
Spend <strong>{{ 50 | minus: cart.price | money_with_sign }} more</strong>
and get free shipping!
{% else %}
<strong>Hooray, you spent $50, so you get free shipping!</strong><br />Go ahead and pay for your order and I'll send you a refund before I ship.
{% endif %}
</p>
Change every occurrence of 50 to whatever amount you require for free shipping. Then, anytime the cart has less than that amount in it, the shopper will see different text there.
NOTE – there actually is not an option in Big Cartel for free shipping, so you’ll need to manually refund the amount after purchase (and let your customers know that’s what will happen).
If you’d like to style it, here’s my CSS
p#free_shipping {
text-align:center;
margin: 0 10px 10px;
line-height: 1.5;
}
p#free_shipping em {
font-style:normal;
font-family: baskerville, georgia, serif;
font-size: 130%;
color: darksalmon;
}
p#free_shipping strong {
font-family: baskerville, georgia, serif;
font-size: 130%;
color: darksalmon;
}
Add images to cart
This is one of the things I emailed support about and was told it’s possible, but I’d better hire someone to do it for me. Nah! Not me! :) It took me a few days but I’m determined. Once I was told it was possible, I knew I could do it myself.
This is SO nice, for me as a shopper, to see visually what’s in my cart! Of course, it doesn’t account for options, which is why you see regular twill tape up there instead of red, but you get the idea. And this beggar can be no chooser. :)
Insert the following into your CART page
Look for <th scope="row">... and replace that whole thing (<th> to </th>) with this:
<td class="item-name">
<img class="item-image" width="50" height="50" src="{{ item.product.image | product_image_url size:"thumb" }}" />
<a href="{{ item.product.url }}"><span>{{ item.name }}</span></a>
</td>
Then you’ll need to line things up with CSS
#cart-body td img,
#cart-body td a {
display:block;
float:left;
}
#cart-body td a {
margin: 20px 0 0 10px;
}
Add qty input field to product page
This drove me batty the first time I set my store up. I couldn’t buh-leeve you had to add an item to your cart and then change the quantity – in. your. cart. Now you don’t have to!
I’ll also show you how to turn the drop down menu into radio buttons, which can be easier to read and faster to choose if you have only a handful of options.
To get exactly what’s in this screenshot, with radio buttons, paste this <form> code over the one that’s on your PRODUCT page.
<form id="product-form" method="post" action="/cart">
{% if product.has_default_option %}
{{ product.option | hidden_option_input }}
{% else %}
<div id="product-options" class="options">
{{ product.options_in_stock | options_radio }}
</div>
{% endif %}
<span class="qty">Quantity: {{ product | product_quantity_input }}</span>
<button id="product-addtocart" name="submit" type="submit">
<span>Add to cart</span>
</button>
</form>
To keep the dropdown menu and just add the quantity input, paste this code immediately before the add to cart button.
<span class="qty">Quantity: {{ product | product_quantity_input }}</span>
Then use the following CSS to style it
span.qty input {
width: 23px;
border: 1px solid #ccc;
padding: 3px;
margin-right: 2px;
}
Add this for the “add to cart” button if you like, or leave the image button as is.
#product-addtocart {
padding: 2px 7px;
margin-top: 15px;
border: none;
text-transform:uppercase;
background: #531;
color: beige;
cursor: pointer;
}
New products in the footer
Here is an easy way to get new products to show at the bottom of your pages.
Add the following to the bottom of your LAYOUT page where your footer is, or where you want it to go.
<div id="footer_products">
<h2>New Products</h2>
{% if products.newest != blank %}
{% for product in products.newest %}
<a href="{{ product.url }}" title="View {{ product.name | escape }}" class="product-a"><img class="product-img" src="{{ product.image | product_image_url size:"medium" }}" alt="Image of {{ product.name | escape }}" /></a>
{% endfor %}
{% endif %}
</div>
To show top selling products instead, change products.newest to products.top_selling. You could also say products.featured if you like. Try different things and see what you like.
Things like this aren’t difficult if you take time to explore the code of your templates. I found this simply by taking the code that was already there in the default sidebar and changing it from text to images by snipping code from other places that showed images.
Shipping info on the product page
This information is helpful for customers to see what shipping charges will be before they add an item to their cart.
Add the following to your PRODUCT template page where you want it to appear.
<h2>Shipping</h2>
<div id="product-shipping">
<table>
<tr>
<th>Shipping to</th>
<th>Alone</th>
<th>With Others</th>
</tr>
{% for area in product.shipping %}
<tr>
<td>{{ area | shipping_name }}</td>
<td>{{ area.amount_alone | money_with_sign }}</td>
<td>{{ area.amount_with_others | money_with_sign }}</td>
</tr>
{% endfor %}
</table>
</div>
How to have collections or secondary categories
I was trying to figure a tricky way to do this and gave up, when Trisha of Pawling Print Studio shared this with me. Big Cartel has a nifty thing set up for record labels to separate products by artist, which can also be used to separate by style, collection, whatever extra classification you need. For me this means showing products that coordinate, like a journal and melamine plate with the same pattern!
Your store just needs to be set up as a record label instead of a specialty store. This is actually something you need to do when you first set up your account, but if you’re already up and running, you can email them to ask to have your store changed for you. Thanks, Trisha!
