Customizing Snipcart to Reflect the Style of Your Website

To get a feel of how you can turn Snipcart into a fully custom shopping cart with a few lines of CSS, you can take a look at the screenshot above.

Or you can look directly at the code here.

To customize the cart you will have to overwrite the styles of the Snipcart stylesheet. To do so, you will have to be specific in your declarations.

You can add the overwriting styles with your generic stylesheet or on a specific, just as long as it comes after Snipcart's default stylesheet.

<script 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"    
    type="text/javascript"></script>

<script type="text/javascript" 
    id="snipcart" 
    src="https://app.snipcart.com/scripts/snipcart.js" 
    data-api-key="YOUR_API_KEY"></script>

<link id="snipcart-theme" type="text/css"
    href="https://app.snipcart.com/themes/base/snipcart.css" 
    rel="stylesheet" />

<link type="text/css"
    href="PATH TO YOUR STYLESHEET" 
    rel="stylesheet /">

Be aware that Snipcart's styles are responsive, so you might have overwritten a style declaration for a certain resolution, but not necessarily all resolutions. To make sure this does not happen, you should add a special class to the body of your page add it before every snipcart selector. I decided to use snipcart-overwrite for mine.

To help you figure out exactly what to overwrite, I would recommend using a tool such as “Web Developer Tools” for Google Chrome or “Firebug” for Firefox. Other browsers all have a similar tool as well.

Changing the color of the buttons

Of course, that the bright green might not be a match for every website. It is probable the reason why you are reading this article, so you might get rid of it.

Below is the css code that makes the buttons green:

#snipcart-main-container a.snipcart-next, #snipcart-main-container a.snipcart-finalize, #snipcart-main-container a.snipcart-mainaction {
  background: rgb(135,219,87);
  background: -moz-linear-gradient(top,  rgba(135,219,87,1) 1%, rgba(101,203,54,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(135,219,87,1)), color-stop(100%,rgba(101,203,54,1)));
  background: -webkit-linear-gradient(top,  rgba(135,219,87,1) 1%,rgba(101,203,54,1) 100%);
  background: -o-linear-gradient(top,  rgba(135,219,87,1) 1%,rgba(101,203,54,1) 100%);
  background: -ms-linear-gradient(top,  rgba(135,219,87,1) 1%,rgba(101,203,54,1) 100%); 
  background: linear-gradient(to bottom,  rgba(135,219,87,1) 1%,rgba(101,203,54,1) 100%);
}

So, if you want to affect all the buttons without forgetting any, you will add a rule to all of the following elements: #snipcart-main-container a.snipcart-next, #snipcart-main-container a.snipcart-finalize, #snipcart-main-container a.snipcart-mainaction

Here, we could either change the background color for a flat color or add a gradient like the green one. The original gradient was created using the gradient generator from ColorZilla. By copying the the generated result, you should have no problem overwriting the default one. If you are changing it by hand, overwriting should be easier using the background property instead of the background-color one. That applies for everywhere you want to change the background color because gradients are set on the background property.

I decided to change the color of the primary buttons to a light blue going on teal (or Shakespeare according to this site).

.snipcart-overwrite #snipcart-main-container a.snipcart-next, .snipcart-overwrite #snipcart-main-container a.snipcart-finalize, .snipcart-overwrite #snipcart-main-container a.snipcart-mainaction {
    background: #50bcd0;
    border: none;
    text-shadow: none;
}

I also changed the color of the secondary buttons. This declaration should be placed before the previous one since it affects every button.

.snipcart-overwrite #snipcart-main-container a.snipcart-btn {
    background-color: #82999d;
    color: #fff;
    font-family: Verdana, sans-serif;
}

I thought having a different style for the hover state would be a good idea, so I went and added these few lines:

.snipcart-overwrite #snipcart-main-container a.snipcart-btn:hover {
    color: #333;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

Changing the font

You will see that I also changed the font family to a more general one. I actually did so for the whole cart also.

Instead of having a general declaration that would target every element in the cart, I went and overwrote every element that had its font-family set to brandon_grotesquebold or brandon_grotesquemedium. This way we could group a few of them to set another font-family or keep certain element set to brandon grotesque.

.snipcart-overwrite #snipcart-main-container span.snipcart-unit-price,  .snipcart-overwrite #snipcart-main-container span.snipcart-total-price, .snipcart-overwrite #snipcart-main-container table.snipcart-list span.snipcart-product-name, .snipcart-overwrite #snipcart-main-container table.snipcart-list span.snipcart-shipping-method-name, .snipcart-overwrite  #snipcart-main-container table.snipcart-list span.snipcart-shipping-method-price, .snipcart-overwrite #snipcart-main-container table.snipcart-list span.snipcart-confirm-item-quantity, .snipcart-overwrite #snipcart-main-container table.snipcart-list span.snipcart-confirm-item-price, .snipcart-overwrite #snipcart-main-container table.snipcart-list span.snipcart-confirm-item-total-price, .snipcart-overwrite #snipcart-main-container label, .snipcart-overwrite ul#snipcart-steps li span.snipcart-step-text, .snipcart-overwrite #snipcart-main-container table.snipcart-list th, .snipcart-overwrite #snipcart-main-content .snipcart-column span.snipcart-title, .snipcart-overwrite table#snipcart-confirm-prices tr td span, .snipcart-overwrite #snipcart-main-container .snipcart-full-width-text span.snipcart-title, .snipcart-overwrite #snipcart-main-container .snipcart-full-width-text, .snipcart-overwrite #snipcart-step-content-emptycart .snipcart-full-width-text p, .snipcart-overwrite #snipcart-blocked .snipcart-full-width-text p, .snipcart-overwrite #snipcart-header #snipcart-total span, .snipcart-overwrite #snipcart-header #snipcart-title  {
    font-family: Verdana, sans-serif;
}

Removing "Powered by Snipcart"

This element helps us being recognized by online shoppers. It also helps you by directing to our site so that the customer can get the information needed to feel more secure towards making a purchase online, so you do not need to answer too many emails about it. But if you really need to remove it, you can do so easily.

.snipcart-overwrite #snipcart-footer #snipcart-powered {
    display: none;
}

This will only remove the link and the image. If you want to remove the whole dark bar, you could remove #snipcart-powered and get this result:

.snipcart-overwrite #snipcart-footer {
    display: none;
}

Add a logo in the header

You will have to add your logo as a background image since you do not have access to the html generated by Snipcart.

.snipcart-overwrite #snipcart-header #snipcart-title {
    color: #50bcd0;
    background: url('../images/snipcart-blue.png') no-repeat 0 center;
    padding-left: 60px;
}

Do not forget to adjust the padding according to your logo size and add a at least 10 or 15 pixels so that the text does not start from your logo.

Changing the step icons

You can also change the step icons by changing the font used to display them. You can either have your own icon font and associate the icons this way:

StepLetterHtml CharacterPayment Methodf\66Shipping Methode\65Shipping Addressd\64Billing Addressc\63Confirm Orderb\62My cart's Contenta\61Order Info (if you have custom fields)g\67

Or you can change them for numbers this way:

.snipcart-overwrite ul#snipcart-steps li span.snipcart-step-number {
    font-family: Verdana, sans-serif;
}

.snipcart-overwrite .icon-Snipcart-6:before {
    content: "1";
}

.snipcart-overwrite .icon-Snipcart-4:before {
    content: "2";
}

.snipcart-overwrite .icon-Snipcart-3:before {
    content: "3";
}

.snipcart-overwrite .icon-Snipcart-2:before {
    content: "4";
}
.snipcart-overwrite .icon-Snipcart:before {
    content: "5";
}
.snipcart-overwrite .icon-Snipcart-5:before {
    content: "6";
}

That is if you do not have any custom fields. If you do have any custom fields, you will have to change the numbers accordingly and add another rule where x is the position of the step.

.snipcart-overwrite .icon-Snipcart-7:before {
    content: "X";
}

You have the basics covered

As of now, you should have the basics covered. Stay tuned for more advanced customization. If you want to start from my modifications, you can download my stylesheet here.