Bigcartel CSS customization: Introduction

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document.

The css of a website basically lets you style the site with background, different fonts, and colors for the site. 

What the guys at bigcartel said about editing your stores CSS

We recommend using one of the many options out there for real-time styling of CSS. Tools like the Web Developer extension, TopStyle, Style Master, and CSS Edit, will allow you to extract the theme’s stylesheet, save it to your computer, then customize it while previewing the changes on your live store.

I’ve heard them recommend CSS Edit as their favorite. It only runs on a mac and sadly I still run the one the same PC.

What CSS Edit has to say about their product

You can edit style sheets for absolutely any site, on- or offline. Thanks to our innovative Override technology, you can even apply your open style sheets to any site and see it change instantly!

What I use to edit CSS

In the beginning I was editing the CSS in Dreamweaver and kept on copying and pasting the code into bigcartel. I would just guess and check until everything worked out. This is not very time effective at all and took me hours to perfect my first bigcartel theme.

What I have been using recently is a combination of  Web developer and another add-on called Firebug. Both of them allow you to edit your CSS and look at the changes live in your browser. These two plugins have saved me a ton of time and I can’t say enough about them.

Features of the Web developer extension

The Web developer extension can edit your css in the browser but for some reason it doesn’t work right on the new blocks theme of bigcartel. I use it a lot for the css on wordpress and it is awesome.

Webdeveloper also has a very handy tools in the tool bar.
In the tool bar
Click on Information
> Display Id and Class Details

It comes up with what everything is called so it’s a lot easier to know what to look for in the CSS code.


Once you’ve installed firebug you can access it at the bottom right corner of your browser.

This is what it looks like.You can also detach it from your browser by clicking the up arrow at the right. I circle it in the picture.

Now you can start editing your CSS. Use the information that you got with the Web developer extension with the search feature in Firebug to find what you want to change in the CSS.

Another thing that I should mention is that in the regular mode you can’t edit very much, mainly just the colors. If you click on the edit button in the upper left of the program you can make any changes you want.

That’s the introduction. I’ll write some more info about editing the html pages and some more advanced stuff.

Here’s a link to a recent bigcartel store I did
Paint the Stars.

#1 Recommended E-commerce Solution by HTSACC

If you need an e-commerce site Shopify is perfect for beginners and experts. You don’t need to have any technical or design experience to easily create a beautiful online store with your branding. Choose from tons of well designed e-commerce templates that look great on desktops, phones, and tablets. Easily customize, create pages, add products, and you’re pretty much ready to accept payments. Plans start at $14 and comes with a free no risk 30 day trial period. Click here to create your store now. Also check out our in depth review of Shopify here and see why Shopify is our number 1 recommended shop for clothing companies.
  • eZ-kun

    thanks for doing this! good read!

  • Pingback: Big Cartel CSS customization | Coty Gonzales | Glorious Nonsensities of the Random Kind.()

  • ReganSupreme

    Hey dude, good stuff.

  • Mitchell Rushing

    Great Post. I had firebug, but never really knew it was that helpful. Also, the recommendations on what CSS program to use was very helpful.

  • Steve Alfaro, Old English Appare

    Thanks a lot! Awesome!

    Stay Hollywood,
    Keep it Old English.

  • Bacchus

    Is there a CSS editor you recommend for PC users..? Something comparable to CSS Edit?

  • Rick

    I think I’ve got it! =)

  • stephen conrad

    great man, thanks for this… I actually sent you an email to try and set up some woring relationship…hope to hear from you soon!

  • Pingback: Free Big Cartel Theme « Plain White T Shirts()

  • Pingback: Free Big Cartel Themes | T-Shirt Magazine()

  • Asr0305

    Hey man much respect on your success. I'm working on my first lifestyle company as of now and appreciate all the insight I can get.

  • Mike

    Have you done an advanced bigcartel editing tutuorial yet? I'm having difficulty with the “layout.html” page. It messes up all my offline work. I've edited the Big Cartel Css to work well with the new pages I've made, but when I upload it all into the bigcartel, its scrambles things. Any help?