Upgrade Merch theme to run Snipcart 3

Snipcart 3.0 and Umbraco CMS.

Our theme, Merch, uses a headless eCommerce solution from Snipcart (https://snipcart.com/) and runs version 2 of their framework. On Tuesday 22nd October 2019 Snipcart released the long-awaited version 3.0, and it looks like an amazing overhaul of their frontend cart and checkout processes, including, moving away from JQuery dependency. 

Find out what others are saying about Snipcart 3.0 on Product Hunt and check out the Snipcart v3 documentation.

However, this will mean that our Merch theme is running a slightly older version of Snipcart - although, v2 is still a great and stable solution for any eCommerce site. That being said, we will show you, in a quick 3-step process, how to upgrade Snipcart from v2 to v3 in Merch. 

Step 1

Update the references to <header> in the CSS (or SCSS, if you prefer working with pre-compiled styles) provided with Merch: 

Step 1.a - CSS Method

Open /css/usn-global.css and find references to:

header

and change to:

header:not(.snipcart-cart-header):not(.snipcart-modal__header)

Step 1.b - SCSS Method

Open /scss/usn-modules/_usn-layout.scss and go to lines 148 to 273 then change all references of: 

header

to: 

header:not(.snipcart-cart-header):not(.snipcart-modal__header)

You should now compile your SCSS files to the CSS file used on your site.

Step 2

Go to Partial Views > USNShop > Open USN_SnipcartGlobalScript > Find lines 11 to 19 > Replace with: 

<script src="//cdn.snipcart.com/themes/v3.0.0/default/snipcart.js"></script> <link rel="stylesheet" href="//cdn.snipcart.com/themes/v3.0.0/default/snipcart.css" /> <div hidden id="snipcart" data-api-key="@globalSettings.SnipcartApikey"></div>

Step 3

Go to Partial Views > USNShop > Open USN_SnipcartBasket > Find lines 10 to 16 > Replace with:

<nav class="shopping-cart snipcart-summary"> <a href="#" class="snipcart-checkout"> <em class="hidden">Cart</em> <i class="ion-bag"></i> <span class="amount snipcart-total-items snipcart-items-count"></span> </a> </nav>

And that's it, you will now be running Snipcart 3.0 with Merch theme for Umbraco CMS.

#h5yr! 

comments powered by Disqus

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.

NEW eCommerce theme!

Our much anticipated eCommerce theme, Merch, is now available.