@moltin/gatsby-theme-moltin

gatsby-theme-moltin

🛍 Gatsby theme for building Moltin powered eCommerce websites.

Install

yarn add @moltin/gatsby-theme-moltin

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `@moltin/gatsby-theme-moltin`,
    options: {
      clientId: '...',
      // See additional options below
    },
  },
]

Options

Option	Default	Required	Description
clientId	null	Yes	Your Moltin Client ID
basePath	/	No	Useful if you wish to mount your store at /store
productsPath	products	No	Change the path to products
collectionsPath	collections	No	Change the path to collections
categoriesPath	categories	No	Change the path to categories
brandsPath	brands	No	Change the path to brands

Component shadowing

You can use Gatsby component shadowing to change the behaviour/appearance of components.

If you wanted to change the default /categories page, you could create the following file inside your Gatsby project.

// src/@moltin/gatsby-theme-moltin/components/CategorySection

import React from 'react'
import { Link } from 'gatsby'

import { ProductGrid } from '@moltin/gatsby-theme-moltin'

const CatalogSection = ({ id, path, name, description, products }) => {
  return (
    <section key={id}>
      <h2>
        <Link to={path}>{name}</Link>
      </h2>
      <p>{description}</p>

      <ProductGrid products={products} />
    </section>
  )
}

export default CatalogSection