Customizing Snipcart Part 2: Full Screen Cart

If you're familiar with our product, you know we've always wanted to offer as much of a custom shopping cart for developers as we possibly could.

Important notice: Since this post was published, we've updated Snipcart for more flexible and advanced customization. Check out how to customize our shopping cart's v2.0.

In this post, I will assume that you’ve read the previous post about your shopping cart customization titled "Customizing Snipcart to reflect the style of your website" unless you already know how to do it.

Once the cart is opened, the fewer distractions your customers have, the more chances they will complete the purchase process. A full screen page is one way to eliminate some of these distractions. Fortunately, this customization is very easy.

Building on the theme I started in the previous post, the first thing we will do is remove the padding from the .snipcart-checkout-container so we can expand the cart how we see fit.

<!-- lang: css -->

.snipcart-overwrite .snipcart-checkout-container {
    padding: 0;
}

Now that this limit has been removed, it's time to let #snipcart-main-container gain some width.

<!-- lang: css -->

.snipcart-overwrite #snipcart-main-container {
    max-width: none;
    width: 100%;
    overflow-x: hidden;
}

Now let’s hide your website under the cart.

<!-- lang: css -->

.snipcart-overwrite #snipcart-overlay  {
    background: #fff;
}

We’re almost done here. Since the "X" button lost some meaning now that we do not see the website underneath the cart, I removed the image, replaced the "a" tag label and added an arrow so the button doesn’t become too boring.

<!-- lang: css -->

.snipcart-overwrite #snipcart-main-container a#snipcart-close {
    background: none;
    text-indent: 0;
    width: auto;
    color: #50bcd0;
    right: -13px;
    display: block;
    top: 6px;
}

.snipcart-overwrite #snipcart-close:after {
    content: "Return to site \279C";
    color: #fff;
    position: relative;
    left: -33px;
}

You can view the whole stylesheet here. I hope you enjoy your full screen shopping cart :)

Suggested posts: