A custom ecommerce experience with Shopify

Why Shopify?

Shopify is one of our favorite hosted ecommerce platforms. It does a great job of making it easy to manage products, product variants, coupons, refunds, etc etc etc. It also has a pretty decent theme system so you can customize your online store to match your brand.

It’s a perfect example of “pick one thing and do it really well”. But that also means it’s not a replacement for an entire website.

When we landed a project to build FirstBuild’s website, they already had a large Shopify store. They had several years of sales data they wanted to preserve and they wanted to continue managing all of their product inventory on Shopify.

They wanted lots of content and other functionality on the website-proper so re-theming the existing Shopify store wasn’t an option.

The lazy route would’ve been to build the website and kick users over to Shopify anytime they were doing something product related. However, we at VIA Studio, are not lazy! We want to find the best solutions for our clients and their customers and we want to do it on time and on budget too.

Luckily, Shopify has us covered by offering a great developer experience.

First of all, the have a great Admin API. Using that and WordPress, we built an admin system that let Firstbuild pull in available products from Shopify. They could then extend those products in WordPress with additional imagery, copy, videos, etc. Any time they added or updated a product in Shopify, those changes were immediately available in WordPress.

On the end-user side of things, we wanted to have a rich easy-to-use shopping experience. Shopify also makes this super simple with their Storefront Javascript SDK.

This takes care of all of the complicated stuff like managing a shopping cart, quantities of products, pricing, etc. We could whatever exciting UI we want and easily wire it up to Shopify. Then, when it’s time to pay, we send them to Shopify and they take it from there.

It’s the best of all possible worlds. We get the flexibility of using a tool like WordPress while letting Shopify handle all of the complexity of ecommerce.

Some Development Notes

One issue we ran into with the Shopify API was trying to marry data from the Admin API vs the Storefront API. The problem is that they use different ID formats!

On the Admin-side, a product might have an ID like 745225814030 while that same product has an ID of Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc0NTIyNTgxNDAzMA== on the Storefront.

This lead to loads of initial headaches trying to move data around from the admin to the front-end and still know which product we were dealing with in the code.

After a bit of research, we realized that the Storefront ID has just a Base64-encoded version of the Admin ID!

In fact, Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc0NTIyNTgxNDAzMA== equals gid://shopify/Product/745225814030.

That lead us to write this handy little function and all of our woes were solved*:

* It’s been a couple of years since we did this so there may be a better way to do it. If anyone knows what it is, we’d love to hear it.