Sidecar by Big Cartel

View Demo Store

Sidecar

Sidecar is a fresh take on showcasing your products - making the most of of any screen size with two product display options for your home page, auto-loading products as customers scroll, and a sidebar that stays in place throughout your store.

Features

  • Responsive and optimized for any type of mobile or desktop device
  • Display product inventory bars on Product pages
  • Display your store’s logo in the sidebar
  • Display a repeating background image on every page
  • Display products in uniform rows or a flexible grid pattern
  • Customizable image size for your products
  • Fixed sidebar stays in place while customers scroll down the page

Tips

  • Supports a header image size up to 150 pixels wide

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 make the Add to Cart button redirect to the Cart page?

Head to Customize Design > Advanced > Layout, and add the following code near the bottom under the last </script> tag.

<script>$(document).ready(function() { $('form.add').unbind('submit'); }); </script>

How can I change the number of products loaded on the Home page?

You can change the number of products that load from 20 to any number up to 100. Head to the Customize Design > Advanced > Home section of your admin, click the Home page, then the custom button to see the default HTML. From there you’ll see the following code at the top:

<div class="page home">
  {% paginate products from products.all by 20 %}

Change the number 20 to how many products you’d like to immediately load on the homepage. Keep in mind that the homepage was meant to display 100 products, so if you don’t have 100 products to display there will be space at the bottom of the page–you’d need to customize your CSS to change that, and you can use these resources if you need help.

How can I add a quantity field to the Product page?

Head to the Customize Design > Advanced > Product page. From there you’ll paste the following bit of code just above the closing </form> tag:

{{ product | product_quantity_input }}

Head to Customize Design > Advanced > Layout and find this line of code:

<section>
  <h2 class="title">
    <a href="/products" class="{% if page.full_url contains '/products' %}current{% endif %}">
      Products
    </a>
  </h2>

Replace Products with your preferred title - Shop, Artwork, Classes, etc.