Blocks by Big Cartel

View Demo Store

Blocks

Blocks features a product grid on your Home page with a prominent cover photo, allowing you to highlight a key product. While it’s one of our older themes, it’s still extremely customizable and provides a great shopping experience for your customers.

Heads up! Blocks has been removed from our theme collection because it is old and doesn’t work well on mobile devices. If, for some reason, you’d like to use this theme, you’ll need to contact us to enable it for you.

Features

  • Display your store’s logo in the header
  • Display a repeating background image on every page
  • Set the number of featured products on the Home page
  • Sort featured products by their order in your admin, newest, number of sales, or number of views
  • Show inventory bars on the Product page
  • Show a search bar in the header
  • Show newest and top selling products in the footer
  • Show RSS feed in the footer

Tips

  • Recommended header image size is 255 x 110 pixels

Customizations

If you're on a paid plan and don't mind getting your hands dirty in the code, then here are a few common advanced customization questions we get for this theme.

How can I remove the extra squares on the Home page?

If you don’t have enough products to fill the product grid on the Home page, head to Customize Design > Advanced > CSS and paste this in at the bottom to get rid of the extra squares:

ul#home_products {
  background: none
}

How can I display more categories in the header navigation?

To add more categories to the header navigation, head over to Customize Design > Advanced > Home and find the following code:

<ul id="nav">
  <li class="first"><a href="/products" title="All Products">All</a></li>
  <li>{% for category in categories.active limit:2 %}</li>
  <li>{{ category | link_to }}</li>
  <li>{% endfor %}</li>
</ul>

Just change limit:2 to the number of categories you’d like displayed in the top navigation.

How can I remove the shopping cart image at the top of the page?

Head to Customize Design > Advanced > CSS and paste the following code at the bottom to remove the mini cart icon:

#minicart_count {
  background-image: none
}

Head to Customize Design > Advanced > Layout and scroll down near the bottom of the page until you see this section of code:

<div id="pod_categories" class="pod">
  <h4>Products</h4>
  <ul>
    <li class="first"><a href="/products" title="All Products">All</a></li>
    {% for category in categories.active %}<li>{{ category | link_to }}</li>{% endfor %}
  </ul>
</div>

Right below that section, add the following code, and edit your links:

<div class="pod">
  <h4>Social Media</h4>
  <ul>
    <li><a href="http://twitter.com/yourusername" title="Twitter">Twitter</a></li>
    <li><a href="http://facebook.com/yourusername" title="Facebook">Facebook</a></li>
  </ul>
</div>