Display Shopify Collections in your Gatsby Ecommerce Site

GatsbyJS is used for JAMstack websites. You can create blogs and in this case, you can create ecommerce sites along with Shopify API.

You need to go through this to setup your Shopify account:
Ecommerce site with Gatsby and Shopify

I'm assuming that you have configured your gatsby-config.js for the gatsby-source-shopify plugin

Collections are equivalent to categories in Shopify. If you have followed the tutorial in the link I gave above, you will be able to list all products. What about displaying Collections?

So in your gatsby-node.js

const collections = await graphql(`
    query {
      allShopifyCollection (sort: { fields: [title] }) {
        edges {
          node {
            id
            title
            handle
            products {
              title
              images {
                originalSrc
              }
              shopifyId
              handle
              description
              availableForSale
              priceRange {
                maxVariantPrice {
                  amount
                }
                minVariantPrice {
                  amount
                }
              }
            }
          }
        }
      }
    }
  `)

  collections.data.allShopifyCollection.edges.forEach(({ node }) => {
    createPage({
      path: `/collection/${node.handle}`,
      component: path.resolve(`./src/components/Collection.js`),
      context: {
        collection: node,
        productCount: node.products.length
      },
    })
})  

We are going to create pages like /collection/men for Men collections.

context: {
        collection: node,
        productCount: node.products.length
      },

Here we are passing node from graphql as collection variable and productCount from counting the products by node.products.length.

Now create your Collection component, could be Collection.js

const Collection = ({ pageContext }) => {
  const { collection, productCount } = pageContext


  ....


  return (
    { collection.products.map((product) => (
      <div key={product.shopifyId} className="col-md-4">
        <div className="card card-product-grid">
          <div className="img-wrap">
            <img src={product.images[0].originalSrc} alt={product.handle} />
          </div>
          <a href="#" className="title">{product.title}</a>
          <div className="price-wrap mt-2">
            <span className="price">${product.priceRange.minVariantPrice.amount}</span>
          </div>
        </div>
      </div>
    ))}
  )

Now you can access this collection if you have a link to it, like this:

{
   allShopifyCollection.edges.map((d, i) => 
        <DropdownItem key={i}>
            <Link to={`/collection/${d.node.handle}`} className="nav-link">{d.node.title}</Link>
        </DropdownItem>
    )
}

Hope it's helpful!

Cheers,

FM

Comments

[pradeepsingh37]

i am facing an issue while impliemnting this i am using template instead of using component and getting an error please see the sceenshot and help me to figure out this
thanks.