DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Faith Morante
Faith Morante

Posted on

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
      },
    })
})  
Enter fullscreen mode Exit fullscreen mode

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

context: {
        collection: node,
        productCount: node.products.length
      },
Enter fullscreen mode Exit fullscreen mode

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>
    ))}
  )
Enter fullscreen mode Exit fullscreen mode

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>
    )
}

Enter fullscreen mode Exit fullscreen mode

Hope it's helpful!

Cheers,

FM

Top comments (1)

Collapse
pradeepsingh37 profile image
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.

🌚 Life is too short to browse without dark mode