Customizing Snipcart Shopping Cart v2.0

Customizing Snipcart Shopping Cart v2.0

In a previous blog post I mentioned creating a suite of features to support Snipcart in Orchard CMS. Since then Snipcart has released v2.0 of the shopping cart to support better customization. I made some adjustments to the Snipcart Orchard CMS Modules to support a custom shopping cart theme. Of course, to do so, I had to experience for myself what it was like to customize the Snipcart Shopping Cart in v2.0 as well as deploy it on a sample website.

Snipcart Shopping Cart v2.0

First, customizing the shopping cart is really easy to do. You can pretty much clone the GitHub repo and start adjusting the color pallete ( Sass maps ) right away.

I diverged a little bit since I wasn't proxying an existing project and instead wanted the repo to be a stand alone solution for customizing a shopping cart. I made some minor adjustments to my copy of the repo to serve a static page and have Gulp watch for changes in the static page as well as Sass. Browsersync is configured a bit differently, but the results are the same- as I change the static page and Sass maps associated with the shopping cart those changes are automatically synced and displayed in the browser. It's a wonderful workflow that we have come to expect these days of modern front-end development.

I start by running the sync task defined in gulpfile.coffee. The browser displays the static page and I start adjusting colors and fonts at will. Simple as that!

gulp sync

Just a quick mention of Visual Studio Code, which I am trying out this week. Visual Studio Code can be configured to work with Gulp. Once you configure Gulp as the task runner, you can run the sync task without ever leaving the editor. This, of course, is possible with other editors, but I thought I would mention it since I just wrote a blog post on it: Run Gulp Tasks from Visual Studio Code.

Running Gulp Tasks from Visual Studio Code

I think most developers will just adjust the colors, but certainly you have the source so go crazy. I modified the _colors.scss file to give the shopping cart a more patriotic look.

Here is a quick tip for Visual Studio Code if you want to make this gloriously simple. Switch to the version control view and select the _colors.scss file. This view will show you unstaged changes as well as the original file side-by-side ( diff view ). It's a perfect view when making these variable changes, because you can 1) see the original Sass values and your new values side-by-side and highlighted, and 2) keep making changes in this view! Yes, please!

Customize Snipcart Shopping Cart with VIsual Studio Code

Lots of red and blue for my custom, patriotic Snipcart Shopping Cart Theme. Shield your eyes!

Customized Snipcart Shopping Cart

Once I finish making my changes to the custom shopping cart I run the Gulp deploy task. This creates snipcart.css and snipcart.min.css as well as bundles all associated images, fonts, etc.

gulp deploy

Conclusion

I am pretty happy with this workflow. It was really easy to make custom color changes to the shopping cart, and I suspect the same will be true of fonts, etc. I came across a couple of minor issues while trying to max out my use of red and blue. Some of the variables in the Sass maps are shared acrossed elements and changing one will change the other, which doesn't give you full customization of every item in the shopping cart. This is probably not an issue for most shopping carts. I was going a bit over the top in my theme and just noticed it.

Check out the GitHub repo to try this yourself!