0

I'm building an ecommerce platform using GatsbyJS and Snipcart. It works well, but I want to override the default theme provided by Snipcart, and when I want to change the main default CSS through gatsby-config.js for some reason, it does not work. Anyone has a solution? Thanks. This code below makes the snipcart to stop functioning, exactly when I add the styles option:

  {
    resolve: 'gatsby-plugin-snipcartv3',
    options: {
      apiKey: 'API_IS_HIDDEN_FOR_A_REASON',
      autopop: true,
      styles: '.src/components/layout.css'
    }
  },

The question is how to make Snipcart version 3 to accept different styles provided by me when used with GatsbyJS? I tried their documentation, but there was not much, also looked on github as well.

Shalaw Fatah
  • 31
  • 4

1 Answers1

0

I found the easiest way to do this was as follows:

  1. In the snipcart plugin config options, set styles to false so it doesn't link the default stylesheet

{
  resolve: 'gatsby-plugin-snipcartv3',
  options: {
    apiKey: process.env.SNIPCART_KEY,
    autopop: false,
    styles: false
    }
 }
  1. Create a new stylesheet (e.g., src/styles/cart.css)
  2. Copy the styles from Snipcart's default stylesheet into your cart.css, and make your desired customizations
  3. Import your cart.css into your Layout component (or into gatsby-browser.js)
choshin314
  • 1
  • 1