Articles

Shoppable Recipe Cards for Shopify Grocery Stores

I’ve been working hard releasing plenty of new features onto my recent (well, 1 year old) Shopify app called Recipe Kit. It has been an incredible year working with now almost 1000 different Shopify stores, building features and enabling their companies to post high quality recipe cards onto their blog. By far the #1 request I’ve received for app features is to implement an ‘add to cart’ function into the app’s recipes.

App Launch: Recipe Kit, an easy recipe builder for Shopify stores.

I’ve been focusing on building Shopify apps ever since I launched my first app called Wait.li - which is a product waiting list app for Shopify stores looking to launch new products. I’ve had the privilege of working with various Shopify store owners over the past 4 years of freelancing all over the world, and recently found a gap in the app store marketplace. There was simply no way to write and post good looking recipes on your Shopify store.

Shopify Liquid String Interpolation

While building my Shopify app Wait.li I discovered that Shopify’s Liquid has no built in interpolation function / filter. I am storing user settings in Shopify metafields, and one setting is a string that is displayed on the Shopify storefront. This string has the possibility of including other Liquid variables (assigned previously on the page). Attempt 1: My metafield was string that contains the following value (notice the curly brackets):

Double-Blocked Sections in Shopify

A while back I was building out a slider component on a client’s Shopify store. In general, sliders/carousels are dead simple once you get the gist of it, but the challenge with this specific slider was that the client wanted two different ‘sides’ of the carousel, and wanted to be able to edit each. Basically, both the 3⁄4 image (left) and the 1⁄4 image (right) are independent sliders, but edited from within the same Shopify section.