How to Customize Snipcart's v2.0 Shopping Cart

We're here. Snipcart's v2.0 has officially launched. Creating a custom shopping cart with our platform just got a whole lot better.

Our new, default theme cart is now fully open-source. Here's the GitHub repo:

snipcart/snipcart-theme

Developers can now fork our code and use the same set of compilation tools we do. This opens the door to more advanced, quicker Snipcart customizations.

See our official documentation for customizing Snipcart's v2.0 and for upgrading from the v1.0 to the v2.0.

Like we mentioned in this post on versioning, we'll keep supporting the v1.0 100%. This release won't affect your v1.0 Snipcart shopping cart.

Looking back, I'd say four different factors triggered the development of our v2.0:

  • The requests and feedback hundreds of developers sent our way
  • The hard-to-kick refactoring habit of our lead developer
  • The fascist perfectionism of our yours truly
  • The desire to stick to our developer freedom core value

A lot of thinking went into helping our users better customize their shopping cart. You can read about both our train of thought and development methods in our previous Code Journal entries (suggest posts below the article).

We're proud of the system we came up with, and, more importantly, eager to share it with our community. We've cleaned up legacy code, reduced CSS (55.41 to 17.13 KB) & JS files, and defined a more structured workflow. Now it's time to take our v2.0 for a spin with some real customization.

In this post, I'm going to show you how I developed two different demo carts.

The first one will please techie front-end devs who don't mess with design much (read: the author). It'll be a blazing fast, simple cart customization demo, similar to the one we provided when we launched our product.

The second one, however, will show how extensively Snipcart can now be customized. Way more design-centric than the first one, it'll help understand how flexible cart elements have now become.

Simple shopping cart customization to match your site's branding

Now I'm not the designer type of front-end fella. Not at all. In fact, our designer and I argue all the time on Slack.

snipcart-v2-customization-basic-cart-pop

See the live demo for this customization.

Usually, I would've been afraid to come up with an authentic customization for any other type of shopping cart. But our v2.0 leverages two major Sass functionalities that made it painless for me: Sass maps and the colors function.

Sass maps

Following developer Fred Carlsen's advice, we ended up using Sass maps to define colors and font sizes in the v2.0. Basic cart customization is now much, much faster. Adapting your site/brand's color scheme on Snipcart's modal shopping cart now comes very easily:

$palettes: (
    footer: (
        background: #f4f6f8,
        color--highlight: #aaa
    )
);

Add a neat little Sass function to the mix, and you can call your colors just like that:

.snip-footer {
    background: palette(footer, background);
}

.snip-footer__highlight {
    color: palette(footer, color--highlight);
}

In other words, you can come up with a unique, customized shopping cart by only editing one file!

Top it off with Browsersync (see our documentation section explaining the optimized workflow we suggest for the v2.0), and all changes and experiments will load automatically in your browser while you're testing.

Colors functions

Being the non-artsy dev that I am, I often struggle with matching a color I like with appropriate colors declinations.

If you're like me, you can simply use the Sass color functions to avoid this hurdle:

$palettes: (
    button: (
        background: #ddd,
        background--highlight: #a2c1df,
        background--hover: lighten(#ddd, 5%),
        background--highlight-hover: darken(#a2c1df, 33%),
        color: darken(#a2c1df, 33%),
        color--highlight: #fff
    )
);

Using Sass maps & color functions, I built an authentic, customized shopping cart—and avoided a soul-sucking episode of searching for colors.

snipcart-v2-shopping-cart-basic-customization

Coming up with the above took me an hour or two tops, and I feel pretty proud of the result. Other than editing my color file, I only changed 20 lines of CSS from Snipcart's original stylesheet.

We told you it'd be easy in our Code Journal entries!

Advanced shopping cart customization with unique layouts

snipcart-v2-customization-advanced-cart-pop

 See the live demo for this customization.

Disclaimer: this advanced cart customization demo aims at showing how extensively you can play with the cart elements layout. It's not meant as a foolproof e-commerce UX example. :)

The new main ID

​ While I was experimenting with customization for this v2.0 demo, I had a hard time targeting individual items in a specific step of the cart (the shipping method step, for instance). This was due to our use of BEM and its strong modular and component-based approach. Customizing the table component in one cart step would impact every instance of the table. ​ Realizing this could be a pain for other developers, I poked Charles, our lead engineer, directly. I asked him to improve our new cart by adding a main ID on each of its step/page. Once this was done, it was quite easy to target the specific table I needed to change for my demo.

With the v2.0, we exclusively use CSS on class names. So when you target by ID, you already have a stronger specificity. Forget about insanely hard selectors to overload existing CSS rules! ​

Low specificity

​ This whole ID thing brings us to our next topic: low specificity. We covered the matter in a previous Code Journal entry, but it only becomes meaningful when you're actually customizing the cart. ​ Low specificity makes it easy to override existing CSS and allows us to avoid using the !important rule most of the time.

In fact, I only need to use it a couple of times, mainly to prevent JavaScript style changes (show/hide) from happening.

And we'll now try to show you how you can customize the cart without using JavaScript: only pure ol' CSS! ​

Completely changing your shopping cart layout

snipcart-v2-shopping-cart-advanced-customization

In the demo above, I worked on two main areas: the cart header & the product lists. ​ For the header—now at the right of the cart—I decided to use position: absolute. I control the width and height of the header, so it was the fastest solution. You can use the "position" solution for all other parts. But be cautious when you're working on dynamic blocks, like the products list for instance.

snipcart-v2-shopping-cart-advanced-customization-address

Address screen with two columns

Yes, you could use JavaScript for styling. But it's not recommended.

And I will most definitely not high-five you if you do that. Sorry! ;) ​ For the product lists, I used flexbox. Doesn't ring a bell? Let's just say it's one of the future keys to building powerful and modular layouts. You could build the whole new cart with it if you want; assuming you don't want to support IE9. It should allow you to move every part of the cart wherever you want, as if you were changing the HTML directly!

snipcart-v2-shopping-cart-advanced-customization-confirmation

Confirmation screen

Quick note: we use flexbox with a graceful degradation trick for some small part of our new modal cart, so feel free to take a look!

A regular work day: that's all the time it took me to deliver this brand new, highly-customized shopping cart. Funny thing is the cart didn't look like this at all in the first place. Thanks to my teammates' feedback, I revamped the whole thing twice during customization. And with Sass maps, flexbox, and the main ID, I did this in an impressively quick stretch.

See the code on GitHub for the simple & advanced customization in this post.

Feedback and thoughts on our v2.0

​ We did have our fair share of geek fun developing the v2.0 and these demos. But what we're really looking forward to is seeing the e-commerce projects you craft with Snipcart. And we want to be as much a part of it as we can. So don't hesitate to reach out to us with questions or completed projects: we'd love the help you with integrations, or help you spread the word about your stuff! ​ From now on, thanks to our versioning, we believe you'll have better control on your cart over time.

And, like​ always, I'd like to put some emphasis on our openness towards developer feedback. Including Sass maps into our workflow was the direct result of a Snipcart user's recommendation. So if you have suggestions & tips you think our user base could benefit from, send them our way!

Happy customization!


If you enjoyed this post and found it valuable, please, take a second to share it on Twitter. Your thoughts and questions regarding the cart v2.0 are also welcome in the comments below!

Suggested posts: