(This is part 3 of a series. For Part 1, see How Elevar Prototyped a Headless E-Commerce Store with Gatsby; for Part 2, see How Elevar Used Storybook With Gatsby to Support a Modular Design Process)
When StriVectin was ready to upgrade their e-commerce experience, they knew they had an abundance of structured content for their products that didn’t fit conveniently in Shopify’s standard product fields.
Luckily, Gatsby’s content mesh approach made it easy for them to plug in a complementary headless CMS. The team chose Prismic which enabled them to create a richer experience with detailed information on StriVectin’s product.
A Rich Content Wrapper to Complement Shopify
When the Elevar team started the project, they knew they were migrating from Magento to Shopify, but they hadn’t made any other decisions about how all of the pieces were going to fit together–or even what pieces they were going to use.
While Shopify powered the core product information, inventory management, and checkout experience, its content management tools weren’t extensive or flexible enough for StriVectin’s needs.
StriVectin had two additional needs: first, types of product-associated content like before and after photography and instructions — a category known as product experience management. Second, they also had a variety of other relational, structured content, such as a blog and information on the science behind some of their products, for which they needed a headless CMS.
Both product experience management and a headless CMS are common cases for using another CMS and Shopify together with Gatsby. So instead of being limited by the Shopify content management tools, they chose Prismic to serve as the content management system side-by-side with Shopify.
And with all of the content already modeled in Storybook along with the React components and Typescript, it was relatively easy for them to define and create their content schema in Prismic.
— Thomas Slade, VP Engineering, ElevarHeadless e-commerce stores with tools like Gatsby [let you] put the merchant first. It’s the way of saying: ‘what are your requirements? What do you need?’ rather than selling them a prepackaged solution.
Prismic’s integration fields enabled Elevar to create richer product information to complement the existing core product information from Shopify.
Prismic Integration Fields & Shopify
Previously, StriVectin was limited to a degree by their prior vendor (Magento)’s existing functionality. But with the switch to Gatsby and Shopify, Elevar knew they could select the tools that were right for their business goals a la carte and Gatsby would be able to integrate with them effortlessly. One such example is replacing the limitations of Magento’s content management with Prismic’s support for richer content options.
While the products, pricing, variants, and inventory are stored in Shopify as the primary source, most product information lives in Prismic with a link between the two using Prismic’s Integration Fields. That approach provided them all of the benefits of using Shopify for products and checkout while Prismic provided them with flexibility for content structures that didn’t fit neatly in Shopify’s schema. It also allows the StriVectin team to manage virtually all of the content for products and the rest of the site in a single tool.
Prismic’s Slices also provided a much richer interface for end users to create rich content without needing to know anything about the resulting HTML. That resulted in a better experience and reduced errors because non-technical users could contribute without a steep learning curve.
From Magento to Shopify
The migration from Magento to Shopify was straightforward with Shopify’s standard migration tools. They also used the Excelify app for Shopify to import historical orders so that customers could maintain their order history. The migration from Magento to Prismic was more involved, though. Much of the content stored in Magento included embedded markup that had to be removed and ported to Prismic. They were also performing a complete redesign, adding new rich content, and making other various improvements, so that process was heavily manual but handled primarily by the client once the Prismic structure was set up.
One drawback with Prismic is that it doesn’t include validation of the content (an explicit decision on Prismic’s part). So the Elevar team couldn’t designate required fields of formatting for the content. For Elevar, they address the lack of validation in the Prismic interface during the site build process with a combination of extensive content validation and null coalescing. If there are any validation failures during the build, notifications are sent to the development team, and the site isn’t deployed.
Recently, the Gatsby implementation also gave the Elevar team the ability to release a localized version of the site in the UK. On the back-end, each version of the site has both its own Prismic and Shopify instances, but the Gatsby codebase is shared fully between both instances. We’ll explore this further in a future article, but suffice it to say that Gatsby made it easier and saved significant development effort.
Gatsby’s Flexibility Powering Product Experience Management
Creating a rich e-commerce experience while limited only to tools that integrate directly with the e-commerce platform can be difficult. But by adding Gatsby to the solution, it became possible for Elevar and StriVectin to add additional, well-integrated content sources — sometimes called a content mesh approach. The end result is the ability to select more powerful specialized tools for each portion of the experience.