A collection of personal projects. For professional experience, click here.

Shopify Custom Storefront

Vue.js | Shopify Storefront API

Homepage of the app after connecting a store

Shopify Custom Storefront utilises the Shopify Storefront API to create a headless eCommerce experience built on Vue.js.

The app has been created to work with any store provided that the store domain and storefront access token has been provided.

Features include:

  • Fast navigation through collections, products and variants
  • Interactive side cart (update quantity of items in the cart instantly)
  • Blog page
  • Customer account section - Log in and update your customer details
  • Footer - Automatically lists the pages available in your store and reads them
  • User can update the number of products shown per page

Play with the DEMO

Shopify Additional Page Content

Vue.js / Koa.js / Shopify Admin API / Shopify Polaris

Adding a block of additional content

Shopify Additional Content Page Content is a simple app for adding additional blocks of content to a product page.

While Shopify does give merchants the ability to add additional sections to the product template, merchants often need additional content that is unique to each product.

Using the app, merchants can select a product from their store and add up to 5 blocks of additional content with each block comprising of a heading and body.

The content is then stored in metafields and drawn onto the product page using a combination of Liquid and Javascript.

The inspiration for the app came from a reoccurring need from clients to display multiple content blocks on product pages with different content for each product however further refinement is required in order for the app to be production-ready.

DEMO available on request