← Back Home

Create multiple storefronts with the same Shopify Backend

July 29, 2020

Peter Hironaka - Front End Developer

@peterhironaka

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.

© 2009-2020 Peter Hironaka