Design

If you’d like to use a custom image as your store’s background, you first need to host the image somewhere. If you have your own server you can use that, otherwise you can use an image hosting service like TinyPic.

Next, head over to the Design > Basics section of your store admin and click the CSS button.

At the very bottom of this code, enter this:

body {
    background-image: url(http://example.com/image.jpg);
}

Be sure to replace http://example.com/image.jpg with the URL of your custom image, and if you really want to get fancy, check out this article about tiling and positioning your background image.

Big Cartel used to have a section of the store admin that allowed you to add FAQs (Frequently Asked Questions) to your store one by one. This wasn’t a heavily used feature, so we’ve since moved the FAQ page to a custom page.

However, we occasionally get asked about how to add this page, and how to add additional FAQs to the page, so here you go.

Creating the FAQ Page

If you already have an FAQ page, skip to Adding new FAQs, otherwise here’s how to setup a basic one:

1. From your Big Cartel admin, go to the Design > Pages section and click Add Page.
2. Enter FAQ for Name, and check the Layout box, then paste in the following code in the content area:
   

   <div id="faq-content">
   	<dl class="faq-list">
    
   		<!-- Add new FAQs here -->
    
   		<dt>What forms of payment do you accept?</dt>
   		<dd><p>We gladly accept Visa, MasterCard, American Express, Discover, or regular account payments all through PayPal.</p><img src="https://www.paypal.com/en_US/i/bnr/horizontal_solution_PP.gif" alt="PayPal" /></dd>
    
   		<dt>How secure is this store?</dt>
   		<dd><p>This store uses <a href="http://paypal.com">PayPal</a> for payments, and PayPal automatically encrypts your confidential information in transit from your computer to ours using the Secure Sockets Layer protocol (SSL) with an encryption key length of 128-bits (the highest level commercially available).</p></dd>
    
   		<dt>Do I need a PayPal account to purchase from this store?</dt>
   		<dd><p>No, you are not required to have a PayPal account to purchase from this store. Although if you already have a PayPal account you may use it.</p></dd>
    
   	</dl>
   </div>

3. Click Save.

Adding new FAQs

To update your FAQ page with new questions, here’s the best way to go about it:

1. From your Big Cartel admin, go to the Design > Pages section and click the FAQ page.
2. In the content area, find the bit of code that says:
   

   <dl class="faq-list">

3. Below this code, add new questions in this format:
   

   <dt>Question goes here</dt>
   <dd>Answer goes here</dd>

4. Click Save.

Having a blog is a great way to keep your customers up to date with your latest news and promotions, and integrating it into Big Cartel is a snap.

There are many great blogging services out there like Tumblr, WordPress, and Blogger. All of them can be integrated with Big Cartel, so just pick the one that is right for you.

Note: this will only work for Platinum and Diamond stores, since it makes use of the <script> tag.

Step 1 – Add a new page

From your Big Cartel admin, go to the Design > Pages section and click Add Page.

Step 2 – Add the code

Give your page a name, like Blog, and check the Show inside theme layout HTML checkbox.

In the big text area, paste in the following code:

<style type="text/css" media="screen">
 
  ul#entries {
    padding: 0 !important;
    }
 
  ul#entries li {
    clear: both;
    float: left;
    width: 100%;
    list-style: none !important;
    margin-bottom: 2.5em;
    }
 
  ul#entries li.loading {
    margin-bottom: 0;
    }
 
  ul#entries li h3 {
    margin: 0 0 .25em 0 !important;
    }
 
  ul#entries li p.blog_date {
    margin-bottom: 1.5em !important;
    }
 
</style>
 
<ul id="entries"><li class="loading">Loading...</li></ul>
 
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 
  // ================================================
  // Your info here
  // ================================================
  var feedURL   = 'http://blog.bigcartel.com/feed';
  var numEntries  = 10;
  var blogURL   = 'http://bigcartel.com';
  var blogLink  = 'View full blog &raquo;';
  // ================================================
 
  google.load("feeds", "1");
 
  function formatDate(d, f) {
    var d = new Date(d);
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return f.replace(/(yyyy|mmmm|mmm|mm|dddd|ddd|dd|hh|nn|ss|a\/p)/gi,
          function($1) {
              switch ($1.toLowerCase()) {
              case 'yyyy': return d.getFullYear();
              case 'mmmm': return months[d.getMonth()];
              case 'mmm':  return months[d.getMonth()].substr(0, 3);
              case 'mm':   return (d.getMonth() + 1);
              case 'dddd': return days[d.getDay()];
              case 'ddd':  return days[d.getDay()].substr(0, 3);
              case 'dd':   return d.getDate();
              case 'hh':   return ((h = d.getHours() % 12) ? h : 12);
              case 'nn':   return d.getMinutes();
              case 'ss':   return d.getSeconds();
              case 'a/p':  return d.getHours() < 12 ? 'a' : 'p';
              }
          }
      );
  }
 
  function initialize() {
    var feed = new google.feeds.Feed(feedURL);
        feed.setNumEntries(numEntries);
        feed.load(function(result) {
 
          if(result.error) return;
 
          var list = document.getElementById('entries');
              list.removeChild(list.firstChild);
 
          for(var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var link = document.createElement('a');
                link.setAttribute('href', entry.link);
                link.appendChild(document.createTextNode(entry.title));
            var title = document.createElement('h3');
                title.appendChild(link);
            var date = document.createElement('p');
                date.setAttribute('class', 'blog_date');
                date.appendChild(document.createTextNode(formatDate(entry.publishedDate, 'mmmm dd, yyyy')));
            var content = document.createElement('div');
                content.innerHTML = entry.content;
            var li = document.createElement('li');
                li.appendChild(title);
                li.appendChild(date);
                li.appendChild(content);
            list.appendChild(li);
          }
 
          if(blogLink && blogURL) {
            var link = document.createElement('a');
              link.setAttribute('href', blogURL);
              link.innerHTML = blogLink;
            var li = document.createElement('li');
              li.appendChild(link);
            list.appendChild(li);
          }
      });
  }
 
  google.setOnLoadCallback(initialize);
 
</script>

Step 3 – Set your info

Update the code marked Your info here with the URL of your blog for blogURL, your RSS or Atom feed for feedURL, and the number of posts you’d like to display as numEntries.

If you’re not sure what your feedURL is, look for a link in your blog that mentions RSS or Atom, and copy that URL. For example, if you’re using Blogger your feedURL would be something like: http://example.blogspot.com/feeds/posts/default

That’s it!

Click Save and we’re all done. Go to your store and click the new Blog link to view your new page.

Before our last big update, the biggest product image size used was 300 x 300 pixels. However, now you can upload images up to 1000 x 1000 pixels in dimension.

All of our new themes, as well as stores using the Sexy theme after July 12th 2008, will automatically support these larger images. However, if you’d like to add this functionality to an older store using the Sexy theme, here’s how:

Platinum and Diamond stores

1. On the Design > Pages page of your admin, click the Product page.
2. Make sure you’re using Default HTML.
3. Click Save and you’re set!

Gold (free) stores

1. On the Design > Basics page, save your header graphic and CSS to your computer for a backup.
2. On the Design > Themes page, click Revert on the Sexy theme.
3. On the Design > Basics page, re-upload your header, paste in your CSS and click Save.

Stores with custom product pages

If you want to apply this to your custom code, at the top change the “product-image” link to look like this:

<a id="product-image"{% if product.image_count > 0 %} href="{{ product.image | product_image_url }}"{% endif %}><img id="product-img" src="{{ product.image | product_image_url size:"large" }}" alt="Image of {{ product.name | escape }}" /><span class="stilt"></span>{% if product.image_count > 0 %}<span class="icon_zoom"></span>{% endif %}</a>

and at the very bottom of the page, put this:

<script src="{{ 'fancyzoom' | theme_js_url }}" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 
	{% for image in product.images %}
	Store.fullSizeImages.push('{{ image | product_image_url }}');
	{% endfor %}
 
</script>

Our simple theme controls make it easy for you to change colors, fonts, main graphics, and choose which modules to show. However, sometimes you may want to dig into the code yourself and do something a bit more customized.

Once you start customizing your CSS and HTML so that it’s different from the defaults that we’ve created and tested, it’s up to you to maintain it. We can’t provide too much support on all the custom design changes you make.

There are many online resources, and a lot of designers who are experts at CSS / HTML, that can help you customize your store.

CSS / HTML Sites

• Doctype – Free answers to HTML and CSS questions
• Designers Talk
• Show Me HTML
• Complete CSS Guide
• CSS Zen Garden
• WeLoveCSS Forum
• Background images with CSS

Big Cartel Theme Designers

• The Black Axe
• Jeff Wolff
• RustyEight
• Jon Kruse
• Zach Reed
• Michael Lo Sauro
• Kevin Duquette
• BrandxHype
• Provoke Creative

Are you a web designer?

Get added to our list of Big Cartel theme designers by contacting us with links to your portfolio and any Big Cartel stores you’ve designed.

Themes are a collection of pages, styles, images, assets, and functionality that can be applied to your store to give it a different look and feel.

Applying themes

When you change themes, all of the theme pages and styles for your current theme are overwritten.

If you’ve done a bit of customization already, you may want to back them up first, just in case you want to go back to them later. Here’s how:

• Platinum or Diamond stores – use the Download My Theme link to get a zip file of all your current theme’s assets.
• Gold stores – copy and paste the code from the CSS view of the Design > Basics page into a new text file on your computer.

Reverting your theme

If you’d like to keep your same theme, but restore the default settings, simply click the Revert button and presto!

Creating your own theme

The default themes not cutting it for ya? No problem. If you’re a Platinum or Diamond store, you can Download one of our themes to get you started, or you can create your own theme from scratch using our powerful HTML and JavaScript APIs.

When you’re finished with your new theme, go into maintenance mode and update each of your theme pages with your new shiny code!

Additional images and assets

If your custom theme requires some additional files, you can upload them to your own server or 3rd-party file host and link to them in your store using their full URL.

You can turn on maintenance mode on the Store > Settings page.

In maintenance mode, you can make changes to your store behind the scenes while everyone else sees your Maintenance page. This is a good idea anytime you need to make significant changes to your store’s styles, pages, or products.

In order to make when your store is in maintenance mode, you need to remain logged into your admin.

Platinum and Diamond plans also have the ability to edit their Maintenance page on the Design > Pages section of their admin.

Maintenance Bar

While your store is in maintenance mode, we will add a handy “maintenance bar” to the top of your store.

This bar gives you tools to quickly switch between pages, edit the current page, and easily access different parts of the admin.

Pages are the building blocks of your store. Each one is accessed by a unique URL, and can be named anything you’d like.

Restrictions

All plans can edit custom pages and use basic HTML, but only Platinum and Diamond plans can edit the layout and theme pages, use <script> and <form> tags, and access our HTML API.

Layout

Your store’s layout provides the main structure for your store, and nearly all pages will display inside of it. Layouts have two required tags:

• {{ head_content }} – goes inside the <head> tag.
• {{ page_content }} – goes inside the <body> tag.

Standalone Pages

Standalone pages are those that do not use the layout.

By default, the Checkout and Maintenance pages are standalone, but any page can be turned into a standalone page by unchecking the Show inside theme Layout HTML checkbox.

* Standalone pages also require the same tags as the layout.

Theme Pages

Theme pages are your store’s core pages like Home, Products, Product, Cart, etc. These pages can’t be deleted, but will be replaced when you change themes.

Custom Pages

Custom pages can be anything you’d like: About Us, FAQ, Return Policy, etc. You can add, edit, and delete these pages, and they will not be replaced when you change themes.

Head over to the Store > Settings page of your store admin and enter your URL in the Website field. Now your store will have a Back to site link at the top that will look something like this:

And as always, with a little CSS it can look any way you’d like:

To customize your store’s styles, you have two options: use our simple controls, or get down and dirty with your own CSS.

Before you get started

It’s probably a good idea to make any changes to your styles while in maintenance mode. This allows you to make a bunch of design changes behind the scenes, and your customers won’t see them until you’re finished.

Simple

Our simple controls give you an easy way of changing colors, fonts, and other common styles. With just a few clicks you can give your store a brand new look. Each theme offers different styling options, so play around with some different looks and see what you like best.

CSS

With CSS (Cascading Style Sheets) you can do anything from add a background image to completely change the look and layout of your store. There are a number of good CSS books and online resources to help you get started. However, if this sounds a bit too advanced for you, you may want to find a web designer to help you out.

Editing CSS offline

Planning a major CSS overhaul? 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 CSSEdit, 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.

The process you use to modify the CSS will vary depending on your tool of choice, but once you have it to your liking:

1. Upload any new images that are used to your own server or file storage location.
2. Turn on maintenance mode in your store so your changes will be made behind-the-scenes.
3. Select all your new CSS and copy/paste it into the CSS field in your admin.
4. Save the changes and check them out on your live store.
5. Turn off maintenance mode.