Neat by Big Cartel

View Demo Store


Neat is a theme that focuses on photography, while easily grouping products into collections. It’s a versatile theme with features that encourage beautiful customization and will complement any shop with high-quality images.


  • Responsive and optimized for any type of mobile or desktop device
  • Full screen image slideshow on the Home page
  • Set the number of featured products on the Home page (or leave them off entirely)
  • Display share buttons for Twitter, Facebook, and Pinterest on Product pages
  • Add links to Twitter, Facebook, Tumblr, Pinterest, and Instagram in the footer
  • Click photos on Product pages to open a full screen image gallery, or display them as full screen images underneath product details
  • Display your store’s logo in the header
  • Display product inventory bars on Product pages
  • Show a search button in the header
  • Customizable welcome message that hovers over the Home page slideshow
  • Browse products by Collections, determined by product categories


  • Recommended header image size is 208 x 66 pixels
  • Upload large, high resolution images for the Home page slideshow. Images will be scaled automatically based on the visitor’s browser size, so it’s best to keep the focus of the image towards the center to avoid important details being cropped out
  • Use the Home page slideshow to advertise discounts or show off detailed product shots
  • Use the Home page welcome message to advertise promotions, tell your company’s story, or simply say hi to your customers


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 grey textured overlay on the slideshow?

Head to Customize Design > Advanced > CSS, and paste this in at the very bottom:

.slideshow div.featured_holder {
  background: none

How can I reduce the size of the secondary images on the Product page?

The Neat theme is designed to display high-quality, high-resolution images on the product pages, to best show off the fine details of each product. However, if you find that the secondary product images are a bit too large for your liking and want to test out some adjustments, you can override the width value to a smaller percentage, and adjust the margin to center the images, by adding the following CSS at the bottom of Customize Design > Advanced > CSS page:

@media only screen and (min-width: 801px) {
  .product_photos .product_photo {
    width: 75%;
    margin: auto

You can adjust the percentage based on how large or small you’d like those images.

How can I increase the slide transition speed on the Home page slideshow?

The Neat theme actually includes this piece of the slideshow’s javascript for you within the Layout code. Just head over to Customize Design > Advanced > Layout and find this near the bottom of the page:

$(function() {
  if ($('.slides-container').length) {
      hashchange: false,
      play: 6000

All you’ll have to alter in there is the number 6000. To speed up the slideshow, decrease that number. To slow it down, increase that number. For example, if you want the slides to change at a rate of 2 seconds per slide, just change that number to 2000 and you’ll be good to go.

Head over to Customize Design > Advanced > Home, and replace this chunk of code:

{% get products from products.all limit: theme.featured_products %}
  {% if products != blank %}
    <ul class="products_list">
    {% for product in products %}
      <li class="{{ product.css_class }}">
        <a href="{{ product.url }}">
          <img alt="Image of {{ | escape }}" src="{{ product.image | product_image_url | constrain: '900' }}">
          <b>{{ }}</b>
          <i>{{ product.default_price | money_with_sign }}</i>
          {% case product.status %}
            {% when 'active' %}
              {% if product.on_sale %}<em>On Sale</em>{% endif %}
            {% when 'sold-out' %}
              <em>Sold Out</em>
            {% when 'coming-soon' %}
              <em>Coming Soon</em>
          {% endcase %}
    {% endfor %}
  {% else %}
    <p class="no_results">No products found.</p>
  {% endif %}
{% endget %}

With this:

{% if != blank %}
  <ul class="products_list collections">
    {% for category in %}
      <li class="product">
        <a href="{{ category.url }}">
          {% for product in category.products limit:1 %}
            <img alt="Image of {{ | escape }}" src="{{ product.image | product_image_url | constrain: '900' }}">
          {% endfor %}
          <b>{{ }}</b>
    {% endfor %}
{% endif %}

Now, let’s change the Featured heading to say Collections. On that same page, find this:


Then change to this, and you’re all set: