First time using the Bllush API? First, read the Getting Started guide.
Why Complete the Look?
The majority of shoppers are not experts in styling products. The question “How will I be able to wear this? “ pops up subconsciously and adds friction to the buying journey. By displaying outfits of expert influencers, users see different ways to style the product. This results in less friction and higher satisfaction.
What are we building?
In this example, we’re going to add a product recommendation component to the product detail page. It will show an inspiring image of that product along with other products that complete the look.
How do I build this experience?
Our starting point with this experience is a single product. We are assuming you have the product SKU in a global variable that can be called. We will use the get_cu_by_sku endpoint to pull all the content we have for a single product.
Once we fetched all the content units for this product, you can design your content block using your preferred framework.
Here is an example using basic pseudo-code:
Call BlushApi(path = get_cu_by_sku) ForEach product in cu.product_matches: Enrich(product.sku) //Enrich product data from your DB using SKU CreateContentBlock(cu)
It will be better to make the enrichment call once providing a list of all product_matches SKUs and then sorting/enriching on the client-side.
The final result is shown below:
That’s about it. We’ve used some styling to make it look a bit nicer and published this project. You can view the live example here.