Activated Studio’s longtime client, Apiece Apart, sells elevated basics for women. Their website runs on a combination of Shopify with Drupal 8, hosted on Pantheon.
Apiece Apart’s content strategy emphasizes telling real women’s inspiring stories. These women wear Apiece Apart. Thoughtful copywriting and gorgeous photography pair with a minimalist design. Site visitors settle in with the storytelling. As they engage with the authenticity of the brand, they become loyal customers.
Drupal CMS provides the customizable toolset for immersive storytelling. Shopify e-commerce platform handles all the processes to support sales. Both platforms deliver best in class toolsets for what they do. But merging two distinct platforms combine into one system capable of robust cross-selling? Easier said than done.
- How does the site integrate Shopify product data with Drupal contextual relationships (related products, related stories) to create a seamless user experience?
- How does the site maintain its core purpose of being a simple tool for admins to market and sell products?
Let’s take a closer look at an advanced content management use case. In this article, we’ll examine how we empowered our client’s content marketing and cross-selling needs with a seamless integration of Shopify with Drupal.
History of ApieceApart.com
Previous versions of apieceapart.com utilized Drupal 7, with Drupal Commerce handling sales. This recipe worked well as the company scaled. As each new season’s collection rolled out, site admins had to update all the products and variations. They would feature special items, and put some items on sale, and shift the previous collections to a background position. They managed daily orders and inventory updates. Writing and publish featured content pieces took time and attention to detail. But it helped Apiece Apart build a community of fans and customers.
By 2016, inventory and content management were getting harder to keep up with. Realizing this friction point, the client reached out to Activated Studio for guidance. The client also wanted a subtle site redesign. We began to audit and estimate their needs. They were happy with Drupal, and Drupal 8 would be the core version to rebuild on. But Drupal Commerce modules were still in beta for Drupal 8 at that time.
Recommending Shopify
Apiece Apart engaged us to perform due diligence on ecommerce platforms. Suitable candidates would need to fit well with Drupal, and deliver excellent online store features. Shopify emerged as a strong contender in our research. Now one of the world’s leading commerce platforms, Shopify provides tools to start, grow, market, and manage retail business at any scale. Shopify rates ‘best all around’ by leading ecommerce platform reviewers.
High notes include its:
- smart inventory system
- ability to sell across many channels
- breadth of features
- customer satisfaction
With products originating in Shopify, we needed to find a way to pull them into the Drupal site. Contextual storytelling was so important to the client’s content marketing strategy. Product information needed to be next to woman’s stories. However, they needed control over presentation of that data—not your standard ‘add to cart’ button. How could we combine the promise of Shopify with the benefits of Drupal, without sacrificing flexibility?
Storytelling and Cross Selling: Shopify With Drupal
Apiece Apart founders love the talented, clever, and self-starting women that wear their clothes. They celebrate them by telling their original stories on the website. They invest in high-end photography. Showing how women layer Apiece Apart building blocks into their personal wardrobe and daily life is a marketing priority.
For example, they publish original magazine-like interviews in the ‘Stories’ section of the website. Their popular Woman series explores ‘long-form conversations with women from around the world.” Full screen images replace text areas as the user scrolls down on Woman stories. In the lower right corner, a block slides in showing product information (thumbnail, product name, price).
Clicking on this block opens a cart selection window, where the user can add the item to their cart. This linkage between marketing content in Drupal and the Shopify cart system is accomplished via a product reference on the Woman node.
It sounds simple.
It works intuitively.
In reality, this represents a great deal of custom development.
Syncing Products from Shopify into Drupal
Without some development intervention, Shopify product data doesn’t get to the Drupal side of the equation. Enter the Shopify Ecommerce module.
Using this module, we could make Shopify products copy to the Drupal site to leverage the advantages of both platforms.
It works like this:
- The Shopify subscription maintains all product data. Product data means pricing, inventory, product images, product description, tags, etc.
- Products and product data get copied—aka synced—into the Drupal site as Drupal entities.
- Drupal product entities are fieldable and themable. We can layer the product entities with features, transforming them into rich content.
- When the user clicks add to cart on the Drupal site, Drupal passes product id information to Shopify.
- When customers want to check out, they enter Shopify’s checkout workflow.
- All order processing, fulfillment, shipping, inventory and all store-related features happen in Shopify.
How Syncing Enabled Custom Content Feature Development
Using this sync method as a jumping off point, we could problem solve for client feature requests. We could layer Shopify with Drupal for the site visitor innumerable ways, like:
- Filtering product result sets by size and sorting by price
- Distinguishing in stock vs out of stock size and color variants on the front end
- Managing ‘notify me when back in stock’ form requests for particular product variants
- Showing sale pricing on products
- Showing ‘you may also like’ related products with entity references
- Displaying the users cart updates on the Drupal site
Extending and Customizing Shopify with Drupal
The Shopify Ecommerce module gave us our foothold. Now we needed to climb the Shopify with Drupal mountain. To get over the top for our client, we had to improvise and leverage our experience. For instance, Views integrations for the Shopify module was incomplete. So we brought Views to the synced entities where needed.
But the most challenging work lay in streamlining the sync from Shopify to Drupal. By default, a sync pulls all products from Shopify. Consequently, Apiece Apart’s product list grew very large. That made the mirrored product entity management on the Drupal side unruly. Sync failures occurred due to the vast load of data writing from Shopify to Drupal. There were ‘needle in the haystack’ problems within the data itself, like bad html markup.
We had ideas for improvement.
Reworking our Sync Process
The client approved a major reworking of the Shopify module’s core functionality. This would address issues that were costing them time and money.
- Scrubbing the incoming product data to filter out bad markup.
- Giving the client a way to select a subset of products from Shopify to sync with Drupal. Limiting the amount they had to manage on the Drupal side.
- Creating an admin interface for maintaining the selective sync list
- Providing a product addition and removal method tied to the admin interface
- Adjusting the sync method itself. Batching the product sync operations together. Running sync faster and smoother.
- Sanity checks – mitigation methods to allow sync to fail gracefully. Alerting about issues without aborting the entire sync.
That’s how we tamed the wild beast. We made the client’s site management chores much easier. Store admins could curate the custom sync list in Shopify daily. When they would run the sync, all product data sets would update on the customer facing Drupal site. The Drupal CMS would remain uncluttered by redundant product entities. As a result, Apiece Apart could focus their attention on customer facing content experiences.
A New Approach: Shopify API Updates Force a Change for the Better
Shopify announced it will be updating its API in 2020.
Henceforth, Shopify will no longer support calls made in the Drupal Shopify module. These changes will break the sync method in place.
Yes, this means we have to rebuild much of the backend setup between Drupal and Shopify. However, this also presents an opportunity. Now we can create a more flexible and lightweight Shopify with Drupal experience.
The Shopify module relied on server side PHP calls to the Shopify REST API endpoints. It would then perform a sync, and attempt to duplicate Shopify data on the Drupal database. Current iterations on the Shopify side now all favor GraphQL calls. Made from the client side, we can leverage this in our rebuild in interesting ways.
Client side calls can resolve a lot of the inherent issues we’ve faced all along.
Now Shopify related data will pull directly from Shopify, but only if that data changes. Functionality and theming will be generally the same. We should have better options for how Shopify related sections look and behave.
Transitioning the Site for Shopify API changes.
After studying the new client-side call implications, we saw where the opportunities were:
- New admin product entity management. Query on the Shopify product list and manage which items display on the Drupal side, and in what order.
- Rebuild of the shop sections. No longer relying on Views. Passing queries along to Shopify and rendering the JSON results, instead.
- Restructuring product pages. We’ll be able to template the new entity type, and all Shopify related content will be rendered API results.
- Modified reference views for product view blocks like ‘you may also like’. Rendered via API results from Shopify.
- General product references in Woman, New Woman, Homepage, etc. There will be a new product entity we can reference. However, rendering and display will once again rely on data coming from Shopify API calls.
- Add to cart and checkout mechanisms. We can handle this via Storefront API rather than session/POST implementations.
Benefits of the Shopify API Rework
So, Shopify API changes are forcing an extensive refactoring project. On the plus side, we can reassure our client that these changes will be difference makers. They will find it easier to develop new content features using product data from Shopify. And their customers will have a more immersive shopping experience. One big benefit? Better site performance!
- Lighter load on the system by eliminating the sync process.
- No need to store any product information from Shopify other than the Shopify product ID.
- No need for human intervention to synchronize Shopify with Drupal. Previously, if anything changed in Shopify (like a typo), staff would have to sync to Drupal. No more.
- Less complexity, more flexibility in the features we can support
- Faster page load times, way faster!
With the changes outlined above, we’ll be leveraging Shopify with Drupal better than ever. As much as we worked to optimize the old system, the sync method was always trying to take too big a bite in the first place. In the new system, we only need to store the content that’s added to the base Shopify item.
Conclusion
In this article, we wanted to showcase a technical journey to exemplify how we approach a business challenge.
We hope this case study demonstrates how a client’s commitment to content strategy, investment in technology, and partnership with Activated Studio produces profitable results.
ApieceApart.com recognized the value of pairing Shopify with Drupal. They counted on us to integrate separate platforms into one cohesive selling tool.
Combining Drupal contrib modules with our own custom development experience, we figured out a reliable way to provide Shopify product data for advanced content features. With new Shopify API changes coming, we will be able to optimize Shopify with Drupal even further.
In future articles, we will have more to say about the business case for using Shopify. Do you have questions about how to leverage Shopify for your existing website CMS? Contact us today. Thank you for reading!
