Static Shopify storefront

I have worked on Shopify and WooCommerce sites for around seven years, and one really common issue with a lot of them is that they run slowly. In fact, even the speedier ones can still feel pretty sluggish compared with a fast-loading static site. That is why, when I was rebuilding my mum’s personal artist site, I took the chance to experiment a bit.

Her old site was built on Weebly, and she also has a Shopify site for her Art Box Gallery business. I’ve long been a fan of Shopify over WooCommerce. Yes, I know Shopify can be a pain when it comes to restricting certain product categories, and it does cost more upfront, but I find it is generally much easier for the person actually running the business.

I can’t tell you how many WooCommerce sites I have been brought in to help with because the client couldn’t manage them. In fact, I suspect many clients end up paying more for WooCommerce once you factor in developer support, plugin costs and downtime caused by compatibility issues. However, I understand why a lot of people use it, and WooCommerce can be a good option when it is built and maintained properly.

With that rambling out of the way, let’s get back to this project.

How it works

I had initially planned to take the old site and rebuild it using the Astro project template and monorepo I use for most clients. However, after a bit of searching, I realised I could make a GraphQL request to Shopify at build time and retrieve the product details for my mum’s collection.

Astro uses that data to generate the catalogue and individual artwork pages as static pages. Visitors can add products to a browser-side cart, remove them if needed and then continue to Shopify to complete the checkout.

Shopify is still responsible for the products, inventory and checkout. The Astro site is simply another storefront for the same catalogue.

This meant I could add functionality that the old site didn’t have without creating another store or maintaining a second set of products. Changes can be made in Shopify as normal and, when the Astro site is rebuilt, they appear on both the Art Box Gallery site and the personal artist site.

Why it is built this way

Avoiding additional Shopify costs was important for this project. Maintaining two separate stores would also mean updating two product catalogues, which would take more time and create more opportunities for the information to fall out of sync.

Reusing the existing Shopify catalogue solves both problems. My mum can continue managing the artworks from a system she already uses, while the personal site gets a proper shopping experience without needing its own Shopify subscription or theme.

Another massive benefit is the improvement to site speed, which was the part I was most interested in. The Astro sites I typically build focus on being as fast as possible, and I wanted to see whether I could get an ecommerce site performing similarly.

The answer is yes, you can. It is really cool building an online shop that loads almost instantly while still using Shopify for the parts it is good at.

I don’t think I would use this exact setup for a large store, as it isn’t dynamic enough for a catalogue that changes constantly. However, I think it works really well for smaller stores and businesses with a limited range of products that doesn’t change very often.

I could also see this being useful for businesses that already use Shopify but want a targeted landing page. Instead of sending someone away from the landing page and risking losing them, products and add-to-cart functionality can be kept within the page itself.

What I learned

The biggest trade-off is that the product catalogue is generated at build time. If a product changes in Shopify, the static site will not show that change until it is rebuilt.

That is manageable for titles, descriptions and prices, but stock is more important. An original painting is normally one of a kind, so if it sells after the latest build, the personal site could continue to make it look available.

Shopify still checks the cart before completing the purchase, so this should not allow the same painting to be sold twice. However, finding out that an artwork is unavailable after trying to buy it would still be a poor experience.

The next step is therefore to check live stock before a visitor adds an artwork to their cart, or to automatically rebuild the site whenever inventory changes in Shopify. That would keep most of the site static while making the part that needs to be current more dynamic.

Where it is right now

The commerce functionality is complete and has been tested against the live store. We are now going through the final approval before making the site live. The remaining launch work is mostly configuration and a few design choices.