Introducing the New Snipcart Merchant Dashboard

First, why the revamp?


Gone baby gone.

Well, for starters, our original merchant dashboard was already two years old. Needless to say, our designer and front-end developers were itching to create something fresher for our users. Esthetical quirk apart, we also needed this revamp for functional reasons: our original layout wasn’t scalable enough for the big features we’ve got cooking.

So what's new?

For the end-user


As of right now, the new dashboard offers the same set of features as the previous ones. Still, we made you a quick list wrapping up important stuff regarding the change:

  • The two Live / Test modes are still there, and work the same way.
  • There’s now a standard paging in lists such as orders and customers.
  • The account section on the right corner is where the configurations are now located.
  • The same credentials as before are required.
  • The cart itself won’t be affected by this dashboard change.

Some of the modifications we made were also based on direct user feedback. Thanks to a few users' comments, for instance, the regional settings section is now organized much more clearly. Enabling countries of operations isn't a pain as it previously was.

Two different menus

We also revised the ergonomics of the application a bit to better segment the types of actions performed in the dashboard. As you can see from the images below, we now have two different menus. First one, on the left, is the Manage store menu. This is where you can overview sales/orders, manage customers/orders lists and create discounts for your store. The second menu is triggered when you hit the small user icon on the top right corner. It's the Account configurations menu, where you can configure your store (payment gateway, shipping carriers, etc.) and your Snipcart account (credentials, billing details, etc.).


Manage store menu


Account menu

Notification center

We also changed how we notify our users. Gone are the sticky notifications in the inferior part of the screen. We created a clear, simple notification center that can be triggered with the ! icon on the top right corner. You'll find there messages reminding you the important steps or actions that need to be taken regarding your Snipcart account.


Notification center

Responsive re-design

Oh, we almost forgot: One big change we made is to make it fully responsive (one front-end dev literally forced us to do it). Merchants can now track and manage their e-commerce operations directly on their smartphones or tablets.


Mobile view

Front-end improvements

Geek alert: this sub-section is going to be a bit on the advanced technical side of things.

We decided to keep the core of our actual front end stack and apply some slight, targeted changes. For instance, we switched from the Underscore templating engine to Jade’s. Yes, both our integrators and developers are very happy about this change.

We also abandoned Grunt in favor of Gulp, largely reducing the amount of code required to compile our front end assets in the process.

To increase our development efficiency, we added Browsersync to the mix, which refreshes our development browsers across multiple devices automatically. If you don’t know about Browsersync, give it a look; it’s an awesome tool.

For the CSS part, we decided to use Sass, a powerful and popular CSS extension language. Thanks to Autoprefixer, we also got rid of all vendor prefixes. We can now easily set up which browsers we want to support. We wrapped the whole CSS thing up by using the BEM methodology, improving consistency, reusability and scalability with its low selector specificity.

Anything users should be looking forward to?

You bet. We’re actively looking into creating a better onboarding process for our users so it’s easier for them to configure their account. It should be live in the next couple of months.

Many features are also on the way for our whole shopping cart platform, and this new dashboard will help us support and release them. For instance, we’ll eventually be adding more in-depth analytics to our platform, which we’ll display directly in the merchant dashboard.

So, that’s it?

Oh no. We’re also releasing a brand new website in the upcoming weeks. We look forward to showing off our hard work to our active and potential users. We’ll be updating you guys and asking for your feedback for sure! Stay tuned, we’re on a roll here.

Any suggestions or feedback regarding the new dashboard? Shoot us an email. Should you have questions or comments, the section below is yours, as always. And if you want to help us spread the word about our new moves, go ahead and share this post on Twitter.

Suggested posts: