Front end

🏃JS Libraries

• UI

  • Ajaxinate - Ajax pagination plugin for Shopify themes

• Cart

  • Liquid Ajax Cart - A JavaScript library for building Shopify Ajax-carts using Liquid templates.

  • Cart.js - A JavaScript library to power your Shopify theme's cart.

  • goCart.js - Complete Shopify Ajax cart solution written in vanilla JS

🚰 Liquid

• Shopify Schema Generator
  1. Github
• liquidjs - A simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript.

🏗️ Builds

• Theme

  • shopify-tailwind-starter-base - Shopify Dawn theme with Tailwind CSS & Prettier integrations

  • shopify-vite - Modern frontend tooling for Shopify theme development using Vite for a best-in-class developer experience.

  • shopify-sunrise - Shopify Store 2.0 Starter theme with Tailwind CSS & Alpinejs

  • Shopify Theme Lab - Customizable modular development environment for blazing-fast Shopify theme creation, bundled with Vue.js and Tailwind CSS.

  • Shopify Packer - Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

• Headless

  • astro-shopify - Astro starter theme to build a headless ecommerce website with Shopify

  • next-shopify-starter - fully functional eCommerce store that uses Next.js + Tailwind CSS in the front end and leverages the Shopify Storefront API to interact with your Shopify backend.

  • shopify-next.js-tailwind - the production ready Headless Shopify storefront using Next.js, Shopify Storefront API (GraphQL), Tailwind CSS, and Vercel.

  • gatsby-shopify-starter - Gatsby Shopify starter

  • nextjs-shopify - The ultimate starter for headless Shopify stores

  • next-shopify-storefront - Next Shopify Storefront

⚒️ Tools

• VS Code extensions

  • Shopify Liquid - Official VS Code extension for Shopify Liquid storefronts and Theme App Extensions.

  • Liquid - The essential vscode extension for Liquid. Supports completions, validations, formatting and intelliSense capabilities for Shopify, Jekyll and 11ty Liquid variations.

  • Shopify Schema Helper - A powerful VS Code extension that makes it easy to visualize and validate Shopify section and theme block schemas.

• Browser extensions

  • Shopify Theme Inspector for Chrome - Profile and debug Liquid template on your Shopify store.

  • Shopify Theme Wizard - Detect which theme a Shopify store is using.

• Workflow

  • Shopify Theme Actions with Public App - A GitHub Action that enables fast Shopify theme development workflows using a public app's access token.

• Command Line Tools

  • Shopify CLI - Shopify CLI helps you build against the Shopify platform faster

  • Shopify Theme Kit - Shopify theme development command line tool. ⚠️

  • Shopify Development Tools - Assists with the development/maintenance of apps and stores: manipulate metafields and webhooks, open admin pages, retrieve information about shops, etc.

  • Shopify ID Export - Dump Shopify product and variant IDs —along with other identifiers— to a CSV or JSON file.

  • Shopify Email Template Sync Client - Shync can checkout/download the Shopify email templates from your Shopify store admin to your local machine, and push/sync your email templates on your local machine to Shopify.

• Themes

  • Shopify Dawn - Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.

• Polaris

  • Shopify Polaris - Polaris is a React component library designed to help developers create the best experience for merchants.

  • Shopify Polaris design system for Vue JS - Polaris Vue based on Shopify Polaris style guide, built especially for Vue 3.

  • Polaris icon explorer - A collection of simple and informative icons that draw on the visual language of the Polaris design system.

🎨 Designs

• Figma - Shopify's Dawn Theme - Online Store 2.0 - If you're designing themes for the new Shopify online store 2.0 and you wished you had the Dawn theme as a nicely put together Figma file.

• Shopify Polaris for Admin Figma UI kit - Polaris for Admin Web UI kit is now available in Figma. You can access the full kit in Figma with reusable components and up-to-date Polaris guidelines, icons, and color palette.

• City Ecommerce UI Kit - City is free ecommerce UI kit based on a fictional fashion apparel shop. (Prototyping Shopify Store design)