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 and Sexy are older themes and weren’t built to be mobile-friendly. If you want your store to look great on all devices and screen sizes automatically, you’ll want to consider one of our other built-in themes.

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>