Customizable Products on Meta Shops
Meta · 2023-2024
Customizable products, such as engraved jewelry and accessories, are popular as gifts or for special events, and the businesses selling them represented a growing segment of Meta Shops advertisers.
Merchants offering these type of products will typically let shoppers choose a design variant and request some custom text to be placed on the product.
The Shops platform on Meta did not previously support these types of products, so the businesses advertising them on Instagram and Facebook would redirect shoppers to their own websites or their Etsy shops.
In 2024, Meta started requiring businesses to link their product ads directly to Onsite Shops on Instagram or Facebook instead of their offsite shopping destinations.
Without platform support for customizable products, Meta would lose a large source of advertising revenue for this $14+ billion market, and many small businesses would abandon their Meta Shops.
Our goal was to support the largest number of products on Meta Shops before offsite product ads would be deprecated.
For this project, I led the design effort for the public launch of customizable products, which included buyer and seller experiences.
My Role
- Product Strategy
- User Experience Design
- Interaction Design
- Visual Design
- Software Prototyping
Research and Product Definition
Opportunity Sizing for Customizable Products on Meta Shops
I started the project by helping the team define the scope of our public launch.
Since the overwhelming majority of customizable product sellers had been linking to their Etsy shops, our baseline experience would need to support the customization features there.
With an infinite number of product customizations possible, Etsy simplifies the buyer experience by enabling seller-provided instructions and only a single freeform text field for requesting product customization.
The team quickly ruled out the structured customization inputs found on some seller websites in order to simplify workflows for businesses already selling on Etsy.
Feature Prioritization
Design Concepts for Requesting Customization
I designed the Customized Products experience to fit within the existing Shops design system.
Because of the aggressive timeframes we were under, I kept visual design variances to a minimum.
In starting the buyer experience concepts, I needed to consider how to handle required or optional customizations.
I also explored whether the customization instructions and inputs would live within the Product Page or outside of it.
For customization inputs on a bottom sheet or separate page, I considered whether a separate button or link would be necessary to reveal the customization input and seller instructions.
In reviewing the design concepts, we ruled out concepts which showed seller instructions and direct customization input on the PDP, since these could take up too much space.
We also did not want to design a customization feature that would look like a 3rd call-to-action button.
I chose to develop Concept F since it had minimal impact to the existing Product Page while allowing for dedicated screen real estate for seller instructions and buyer customization input.
Detailed Screen Layouts and Purchase Flows
Our team divided the project into two milestones.
Our first milestone would be an internally-facing technical proof of concept while the public launch would support the full range of Cart scenarios required for purchasing customizable products.
Milestone 1: Purchase Experience Without Cart
As a technical proof-of-concept to test the purchase experience and our seller flows, our first internal milestone would omit Cart features.
Buyers would be able to see seller instructions for customization, then type a customization request which would be added to the order before checkout.
Features included:
- Customization input and seller instructions for customization
- Checkout supporting customization metadata
- Post-transaction emails and customization details
Features excluded:
- Cart features
- Structured customization inputs
Public Launch: Full Purchase Experience Including Cart
Cart features were added as a requirement for public launch, and these flows added signficant complexity, since we needed to support multiple customizations of the same product variant and the same customization of multiple product variants.
Features included:
- Customization input and seller instructions for customization
- Cart features for multiple customized products
- Checkout supporting customization metadata
- Post-transaction emails and customization details
Updating items in cart
Multiple customizations of the same variant
Multiple variants with the same customization
Email order confirmation
Order details
Seller Design Concepts to Enable Customized Products
In addition to designing buyer flows, I worked with our Catalog team to create concepts to enable sellers to add customizable products to their Meta Shops.
We would automate catalog ingestion as much as possible for existing Etsy sellers that published their listings to Meta Shops using Shopify.
For other Shopify sellers requiring manual editing of their catalog, I proposed two technical approaches: Using Block Extensions directly in the Shopify Catalog and supplemental data editing in the Shopify Meta App.
Seller Catalog Approach 1: Using Shopify Block Extensions
In this approach, Meta would create a Shopify Block Extension that would enable editing of customizable product data directly in the Shopify Catalog.
The block extension would be packaged along with the Shopify Meta App (SMA), so users of SMA could see a Facebook & Instagram card in their Catalog with supplemental fields related to customizable products.
Since sellers expect to manage all of their product metadata in the Shopify Catalog, this would be the preferred approach if it was technically feasible.
Seller Catalog Approach 2: Supplemental Data Editing in the Shopify Meta App
As a fallback approach, we would enable editing of supplemental data within the Shopify Meta App, which we had total control over.
Sellers could already see a list of products synced to their Shops from the Shopify catalog.
Tapping a product from this list would show customizable product fields (and other supplemental data specific to Meta Shops) that the seller could edit.
