One of my favorite things about Shopify's Storefront API is it allows developers to create highly customizable e-commerce experiences. My friend has a Gatsby powered Shopify storefront, and he wanted to do a special release of an upcoming book he's going to self publish. All the products in his store are prints, and he wanted this one to be a standalone product. That's when I had the idea - why don't we spin up a microsite for this one product?
The first task was to isolate the print products from this book product, and the easiest way was to group the prints using Graphql.
Since I built his print shop w/Gatsby, I just need to adjust the gatsby-node file to filter out a specific product type - in this case, prints.
{
allShopifyProduct(filter: {productType: {eq: "Prints"}}) {
edges {
node {
id
handle
productType
}
}
}
}
This only creates pages from this code base with the productType = Prints. I also had to follow the same step on the '/prints' store to ensure the book would not show up alongside the other prints.
I followed the same steps for the book site - but since this was only a one pager, I didn't have to dynamically create pages for each product, so I just adjusted the Graphql query to point at productType = Books.
Here's the URL of his new site for his book: https://tokyo.ellington-hammond.com/
PS - If you sign up for a Shopify account using this link, I get a small commission from Shopify.