TLDR

Using Gadget’s Shopify connections, metafield support, and custom code effects, Planet of the Vapes was able to build a custom Shopify application that automated the manual process of updating product pricing information on their popular blog. When rolled out across their entire blog, this saved PotV hundreds of hours of manual work and allows them to focus on generating more blog content without worrying about future maintenance costs.

“The best part is, if I had to do this again, it would only take a matter of hours.”
         - Mircea Piturca, Shopify app developer + PotV dev team lead

The Problem

Planet of the Vapes (PotV) is a large online retailer of vapes and vaping accessories. A major driver of sales is their blog containing in-depth product reviews, buyer’s guides, and comparisons. Blog posts reviewing or discussing products have embedded links that take the shopper directly to the product page, allowing for quick checkouts. Pricing is a major component of product reviews and comparisons, and it is important to maintain up-to-date pricing on all posts.

When products in PotVs’ Shopify store went on sale, product pricing needed to be manually updated in their blog. For major sales events where a massive number of products were discounted, such as Black Friday, hundreds of blog articles needed their product pricing to be updated. A single person would spend days going through the articles to update prices, a process that was both time-consuming and error-prone. To solve these issues, PotV decided that they could build a custom app that would automate the price updates in blog articles so they stay in sync with store pricing.

The PotV dev team, consisting of Micrea Piturca and Daniel Bissinger, determined that keeping pricing on the blog in-sync with the Shopify store was too complex a problem to be solved by adding vanilla JS to the blog. And while they could have gone about setting up and deploying a backend server themselves, it would have been a time-consuming process that also required maintenance work, such as managing security updates, after the app’s deployment. Not to mention they would have to deal with all the required error handling and retry logic required by a robust webhook subscription. To avoid this extra work, the team began looking for a managed solution. They came across Gadget on Twitter, and booked a demo call with co-founder, Mo.

The Solution

After learning more about Gadget from Mo, the dev team was able to develop a solution in about 5 days of working time.

Gadget’s managed Shopify connection was key to PotV’s solution. They were able to use the connection to sync Shopify Product, Blog, and Article data into their Gadget app, without needing to worry about all the nuances of writing a proper data sync. They could also skip past writing their own webhook handling to keep track of product updates, Gadget handled it for them.

Dealing with Shopify metafields can be a pain because they are treated as a completely separate resource with their own API. Thankfully, Gadget has built-in support for importing metafield data. Without having to write any code, the dev team was able to use metafields to associate blog articles with referenced products.

Most of the work done up to this point did not require any code to be written! By managing the Shopify connection, webhooks, and metafield information, Gadget allowed PotV to focus on the final step: writing the code that really matters, the custom business logic required to pull all the pieces together.

While the dev team was importing Shopify models and metafield data, Gadget was automatically updating a CRUD API available for use in their code. When a product’s pricing changes in the store, the webhook connection triggers PotV’s custom code. The generated API was used to query for the Shopify Articles that needed to have embedded product pricing updated. The last step was to apply the price updates in the article, which the dev team was able to accomplish with some simple DOM parsing and replacement.

The Result

The custom application was tested out on select products for PotV’s 4th of July sale, which sees increased traffic to their store and blog. As expected, the prices of Shopify product listings embedded in the blog post updated automatically as a discount was applied in the Shopify store.

Thanks to the initial sale’s success, the application will be rolled out across additional blog articles and store products. PotV will be able to keep the blog in sync with product prices on their store without dedicating the time required to keep things up to date manually. They will save valuable working hours that would have been dedicated to manually updating pricing on their blog, and the automated solution will scale as their blog and product library continue to grow.

The PotV dev team is going to continue using Gadget to develop custom and public Shopify applications.

“Everything that requires something to respond, webhooks, stuff like that, fire up Gadget, connect to a model and apply your logic. We’re definitely going to use Gadget in the future.”
    - Mircea Piturca, Shopify app developer + PotV dev team lead

The time saved using Gadget will allow the team to develop more applications, faster. They will also be able to focus on doing what they enjoy - writing pristine frontend applications, while Gadget takes care of any required backend and database infrastructure.