Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
Ecommerce + PHP, Javascript & React + Platform Integrations

A custom ecommerce experience with Shopify

By:

Mark Biek
Mark Biek

on 6/15/2020

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.

Share to

Related Posts

UX / UI
UI Animation in eCommerce, Some Do's and Don’ts

By:Morgan Plappert on 11/2/2018

Applied with intention, animation can enhance your eCommerce UI by making it fun and memorable and drawing the user where you’d like them to go. Applied haphazardly, however, UI animations can be intrusive and annoying to a user.

Read More »
Integrating Shopify into your Custom Website, and Keeping Google Analytics Happy

By:Ben Wilson on 11/15/2018

Have you integrated Shopify into a website you’ve built? It’s super easy to do with Shopify’s excellent documentation, support and infrastructure. Here at VIA Studio, we use Shopify primarily for sites that don’t need a lot of custom functionality, but need to function flawlessly and look good.

Read More »