5 minute read
Designing a third-party extension for Shopify merchants to reorder products on Faire
50,000
Merchants using the integration in the first month
20%
increase in customer lifetime value
$1M
in sales run through the integration
Context
Shopify and Faire entered a contractual aggreement
Shopify signed a contractual agreement with Faire, designating Faire as the go-to B2B marketplace for Shopify merchants. As part of the deal, Shopify agreed to roll out a reorder flow for products sourced from Faire.
Merchant problem
Faire products in Shopify weren’t visible or easy to reorder
Before this agreement, products sourced from Faire.com would automatically sync to Shopify, but merchants couldn’t tell these products came from Faire or easily reorder them within Shopify. This made restocking harder and reduced customer lifetime value.
Goal
Quickly identify Faire products and reorder
#
As a merchant I need...
1.
2.
Process
My first step was to identify where merchants make reordering decisions. After interviewing merchants, I found that this usually happens on the product details page, where all inventory levels are displayed. At Shopify, we prioritize quick iterations and early feedback, so I explored a few options and shared them with the team for input.
Iteration 1
Adding a Supplier field
In the first iteration, I kept it simple by adding a 'Supplier' text field in the product details card to indicate the product was from Faire, along with a link icon directing merchants to Faire.com. This achieved the two project goals.
Iteration 2
Extensible Action List
After receiving feedback from the team, we agreed that the solution should be extensible rather than hardcoded into our Shopify admin. To address this, I utilized our existing extensibility pattern under the 'More actions' button and added a 'Reorder on Faire' link.
Considerations
Aligning the team
After presenting the iterations to the team, I created an updated list of constraints and requirements based on their feedback. This helped our team quickly align on the final solution.
Constraints
No hardcoding for Faire
Solution
Design
Designed a new extensible block extension pattern for 3rd party apps
None of the existing patterns suited this project, so I collaborated with Shopify’s extensibility team to create a new third-party block extension. This block achieved our goals by prominently identifying Faire as the source of the product, enabling merchants to distinguish these items easily. It also laid the groundwork for Faire to build an entire reorder workflow and incorporate helpful reordering data. Initially, we anticipated that our engineers would fully develop the reorder workflow within the block. However, after discussions with the engineering teams, we pivoted to a more flexible approach: designing the framework and components while allowing Faire to develop the extension in alignment with Shopify’s extensibility principles.
This solution not only supported Faire’s needs but also established a scalable pattern for other third-party apps to create block extensions in the future in Shopify. The block extension pattern earned approval from Shopify leadership, and we also introduced an index pattern to grant third-party apps access to our index views.
Guidelines
Created a block extension UI component library and framework
We established a UI framework for the block extension so we could create a standard for all 3rd party apps. We also created a UI component library of all the components Faire could use to build out their extension inside the block. Check them out below!
Examples
Pitched the solution and examples to the Faire CEO
I presented this solution to Faire’s CEO and secured alignment. Additionally, I created examples of blocks that Faire could develop using our component library. I recommended adding data not available in Shopify, such as Order Minimums and Get It By Dates, to help merchants make more informed purchasing decisions before visiting Faire.com.
Final Result
Implemented an 'Add to Faire Bag' workflow
Merchants sourcing products from Faire.com now see the Reorder on Faire block extension under their inventory card, indicating previous purchases from Faire. To minimize switching between Shopify and Faire.com, Faire’s designers and I developed a workflow that automatically adds the last purchased quantity to the cart on Faire for immediate checkout. This streamlined process received positive feedback, reducing reorder time and improving efficiency.
Added a direct product link to Faire.com
To give merchants quick access to more product details on Faire.com, we made the product name clickable, creating a direct link to the product page as an additional access point.
