Shoppable Blog Post

The e-commerce world is amazing, customers can find nearly everything they want out there, but sometimes things are not exactly the way they expect. In response, merchants started offering their customers some options like customizations and DIY tutorials.

Reading through a blog post, to then search for a product to add to the cart makes for a frustrated user experience.

In this post, we will briefly discuss one possible solution for merchants that want to provide their customers an easy way to buy products as they read through a blog post.

The Challenge

There are many approaches we can think of to achieve this, so we need to consider a couple of things before deciding which path to take. Some of them are:

• Which platform are we using?
• What are the tools and features available?
• What are the expectations?
• Do we need some additional tooling?
• How can we make the implementation consistent with the website look and feel?

The Solution

After considering all the above and discussing different options with the client, we came up with a simple yet flexible solution that empowers the merchant to offer their customers a list of supplies (products) used on their tutorial.

This particular approach used Shopify metafields. We listed the products referenced in the tutorial and give the customer a quick way to add it to the cart.

The list of products on both top and bottom of the page making sure it is available to the customer at the beginning and the end of their reading.

The user should not only be able to add the products to their cart but also keep track of which ones are already in the cart, with that in mind we added a feature to highlight which products were already in the cart, making sure that both lists (top and bottom) are always synchronized.

Conclusion

If you want to know more about the solution mentioned on this post or have any other feature you want to add to your website, contact us and our ponies will work with you to find the best solution to give your business more horsepower.