--- title: "E-Commerce with Angular, Shopify & Netlify Serverless Functions" description: "Use this reference template to build out a products page and cart using Angular, Shopify, and Netlify Serverless Function." source: "https://www.netlify.com/blog/2021/08/25/e-commerce-with-angular-shopify-and-netlify-serverless-functions/" last_updated: "2026-07-10T20:45:28.000Z" --- > Check out the same-same-but-different projects using [11ty](https://www.netlify.com/blog/2021/07/20/build-your-own-shop-with-the-shopify-storefront-api-eleventy-and-serverless-functions/), [Astro](https://www.netlify.com/blog/2021/07/23/build-a-modern-shopping-site-with-astro-and-serverless-functions/), [Gridsome](https://www.netlify.com/blog/2021/07/19/shopify-announces-enhanced-storefront-apis-a-first-look-with-gridsome-and-netlify/), and [Nuxt](https://www.netlify.com/blog/2021/07/21/building-a-headless-shopify-e-commerce-site-with-nuxt-and-the-storefront-api-part-1/) by some very talented developers. [Shopify recently added cart functionality](https://twitter.com/Shopify/status/1409928422541910020?s=20) to their Storefront API so we decided to try it out with Angular and [Netlify functions](https://ntl.fyi/3irS2hc) for some serverless action. May I introduce to you a reference template to help you build out an e-commerce site of your own. ![The Products page from our Angular build template](/v3/img/blog/screen-shot-2021-08-18-at-9.18.39-am.jpg "The Products page from our Angular build template") > Per usual, I would like to offer you this magical button that allows you to just click it and have this project transported to a Netlify account near you (and by that I mean _your_ Netlify account.) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tzmanics/angular-shopify&utm_source=blog&utm_medium=ng-shopify-tzm&utm_campaign=devex) ## The basics of our Angular template for Shopify stores This template is based on a charcuterie dealership but if for some reason, that’s not your business, you can customize the products and headers. This template sets up the process to: - Grab products from Shopify for the main products page - Use [NgRx](https://ngrx.io/) to manage the state of the cart & products list - Loop through the products in a details page that uses the product title as the route - Add radio buttons for products with multiple variants - Utilize the Shopify cart to add and remove items and - Add taxes and shipping to show the user the total amount ![a screenshot of the product detail page from our Angular build template](/v3/img/blog/screen-shot-2021-08-17-at-11.54.00-pm.jpg "product detail page") ## The Pieces Using the Angular CLI, this project was created from the default template. A cart and products service was generated to interact with the Netlify serverless Functions that are grabbing the data from Shopify via GraphQL. Then a cart and product store were created using NgRx to keep their states. > 🧠 to make this project your own remember the project name `ng-shopify` will need to be replaced throughout the whole project (find/replace all works best). The Netlify Functions live in `netlify/functions` and are set up and maintained by Netlify. Their logs can be seen when running locally using Netlify’s [`netlify dev`](https://ntl.fyi/3kxvgqY) or in the project’s Netlify dashboard. I have a whole [blog post on getting started with Netlify Functions](https://ntl.fyi/2W0ZEQB) that can provide more information. And finally, the [Shopify Storefront API](https://shopify.dev/api/storefront) made it so that my team could make one Shopify store and pull the data to use with all different frameworks (Astro, Gridsome, Nuxt, Eleventy, and more)! It was interesting to see that not only did Shopify offer up a great UI but made it so that we could use one set of serverless functions to rule them all, ehm, I mean use on all our projects 🤓. ![screenshot of cart page with items our Angular build template](/v3/img/blog/screen-shot-2021-08-17-at-11.54.20-pm.jpg "cart page") ## Links to the Angular template and demo I hope you are able to use this reference template to make all your e-commerce dreams come true. Use it wisely, or not, just have fun and make monies! Happy coding 👩🏻‍💻! - [Ng-Shopify Repo](https://github.com/tzmanics/angular-shopify) - [Live Demo](https://angular-shopify.netlify.app) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=A Template for Building Shopify Stores with Angular and the Storefront API&url=https://www.netlify.com/blog/2021/08/25/e-commerce-with-angular-shopify-and-netlify-serverless-functions//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F08%2F25%2Fe-commerce-with-angular-shopify-and-netlify-serverless-functions%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/08/25/e-commerce-with-angular-shopify-and-netlify-serverless-functions//) - [Bluesky](https://bsky.app/intent/compose?text=A Template for Building Shopify Stores with Angular and the Storefront API+https://www.netlify.com/blog/2021/08/25/e-commerce-with-angular-shopify-and-netlify-serverless-functions//) * * * ### Tags - [Angular](/blog/tags/angular/) - [Shopify](/blog/tags/shopify/) - [E-commerce](/blog/tags/e-commerce/) - [Netlify Functions](/blog/tags/netlify-functions/) ## Keep reading ![](/_astro/bbe3cfe0b5d5228f5d0a66e26ce057de315c7712-1200x675_ZQfk21.webp) Tools & Services December 3, 2025 [ ### Vibe coding to production with Kiro powers ](/blog/vibe-coding-production-kiro-powers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz ![](/_astro/b596a7453ede5fe6739bd12506636fe522828198-2400x1351_1ANtEG.webp) Tools & Services February 21, 2025 [ ### Secure local development with Codezero for Netlify ](/blog/secure-local-development-codezero) - Kathleen Randall ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)