As we've seen to this point, Snipcart gave us a pretty easy way to build an online store with a shopping cart.
While the Snipcart design team did a fantastic job with the UI, it doesn't really look like our site. 🤔
Snipcart comes with a variety of customization options to make sure we can keep our brand consistent.
In this lesson, we'll learn how to theme our Snipcart shopping cart and even completetly customize widgets with Snipcart templates.
- Review existing shopping cart
- Use CSS properties to customize shopping cart
- Add styles based on Snipcart state
- Override components with templates
- Use a custom HTML page to manage templates
The easiest way to get started with Snipcart Theming is by using CSS properties (variables).
Snipcart uses CSS properties to define styles for the shopping cart UI including things like button and link color.
This means we can override those values to use colors that match our brand!
Override the Snipcart shopping cart custom properties to match your brand styles.
Tip: You can find _snipcart.scss at the top of the styles directory to use for Snipcart-specific styling.
src/styles/_snipcart.scss
One fun thing about how Snipcart works is any time the cart is open, a class is appended to the document body node.
We can take advantage of this and apply custom styles whenever the modal is open.
Add custom styles to the app that apply whenever the Snipcart shopping cart is open.
src/styles/_snipcart.scss
- Browser developer tools inspector
If we want to take our customizzations up a notch, Snipcart lets us completely override components with their template customization.
The components use Vue, so we can even use advanced syntax if we want (hey isn't this a React workshop? 👀).
But this gives us the opportunity to craft our experience exactly how we want.
Customize a Snipcart UI template.
src/pages/_document.js
By default, we're able to configure all of our template overrides right inside of the Snipcart initialization snippet.
But as we could imagine, working with a bunch of Vue templates there (or even just one) can start to become a little hard to manage.
Instead, we can specify a separate templates file to help organize and improve our development experience.
Create and link to a Snipcart templates file to manage component overrides.
public/snipcart-templates.htmlsrc/pages/_document.js
Now that we have an idea on how to customize our shopping cart UI, let's try another component!
Set up a new template to override a shopping cart component.
public/snipcart-templates.html