🛍️ Shopify Custom Theme

A production-grade Shopify theme built on Dawn, powered by a modern Webpack + Tailwind + SASS build pipeline and shipped automatically with GitHub Actions.

---

📖 Overview

This repository is a customizable Shopify storefront theme built on top of Dawn (Shopify's reference theme) and re-tooled with a real front-end engineering workflow. Instead of editing theme files directly in the Shopify admin, the theme is written in a clean src/ source tree, compiled with Webpack, styled with Tailwind CSS + SASS, and auto-deployed to Shopify through a GitHub Actions pipeline on every push to main.

It doubles as a portfolio of custom Liquid sections — hero layouts, an API-driven product comparison tool, a vendor filter, a reusable design system page, and more.

💡 Why it's interesting: most Shopify themes are edited live in the admin. This project treats a Shopify theme like a proper software project — versioned source, a build step, and continuous deployment.

---

✨ Features

• 🧱 Modular Liquid architecture — 69 sections, 66 snippets, and full template coverage (product, collection, cart, blog, customer accounts, search, 404, password).
• ⚡ Modern build pipeline — Webpack 5 bundles JS with Babel and compiles SCSS into a Shopify-ready theme.css.liquid.
• 🎨 Tailwind CSS + SASS — utility-first styling layered on top of Dawn's component CSS with PostCSS + Autoprefixer.
• 🔌 API-driven sections — a product comparison feature that fetches live product data (title, price, description, SKU) via the Shopify Admin/REST API using async/await.
• 🦸 Custom sections — bespoke hero, image-with-text, dynamic homepage, product vendor filter, and a design-system showcase page.
• 🚀 Continuous deployment — GitHub Actions builds the theme and pushes it live with the Shopify CLI on every merge to main.
• 🔥 Live theme development — shopify theme dev hot-reloads the compiled dist/ output against your store.

---

🛠️ Tech Stack

Layer	Tools
Templating	Shopify Liquid
Styling	Tailwind CSS 3, SASS/SCSS, PostCSS, Autoprefixer
Bundling	Webpack 5, Babel (@babel/preset-env), mini-css-extract-plugin
Tooling	Shopify CLI, npm-run-all, copy-webpack-plugin
CI/CD	GitHub Actions

---

📂 Project Structure

.
├── .github/workflows/
│   └── deploy-theme.yml      # CI/CD: build + deploy to Shopify on push to main
├── src/                      # Source of truth (edit here)
│   ├── assets/               # JS + component CSS
│   ├── config/               # Theme settings schema
│   ├── layout/               # theme.liquid
│   ├── locales/              # Translations
│   ├── sections/             # Liquid sections (hero, comparison, filters…)
│   ├── snippets/             # Reusable Liquid partials
│   ├── templates/            # JSON/Liquid page templates
│   └── styles/theme.scss     # SCSS entry point
├── dist/                     # Compiled theme (served/deployed by Shopify CLI)
├── webpack.config.js         # Build configuration
├── tailwind.config.js        # Tailwind configuration
└── postcss.config.js         # PostCSS configuration

Build flow: you edit src/ → Webpack compiles JS/SCSS and copies Liquid into dist/ → the Shopify CLI serves or deploys dist/.

---

🚀 Getting Started

Prerequisites

• Node.js (LTS)
• Shopify CLI — npm install -g @shopify/cli
• A Shopify store (or development store)

Installation

# 1. Clone the repository
git clone https://github.com/topshopifydev/Shopify-App.git
cd Shopify-App

# 2. Install dependencies
npm install

# 3. Start local development (builds + live theme preview)
npm start

Available Scripts

Command	Description
npm start	Runs Webpack in watch mode and shopify theme dev in parallel
npm run dev	One-off development build
npm run build	Production build into dist/
npm run watch	Rebuild on file changes
npm run theme:dev	Serve the compiled dist/ theme with the Shopify CLI

---

🎯 Highlighted Custom Work

Section	What it does
New Hero	Responsive hero with adaptive image srcset, review stars, and an "as seen in" logo strip.
Product Comparison (v1–v4)	Lets shoppers pick products and compare them side by side, loading product data live from the Shopify API with fetch + async/await.
Vendor Filter	Filters the product grid dynamically by vendor.
Design System Page	A living style guide showcasing the theme's typography, colors, and components.
Dynamic Homepage Section	Merchant-configurable content blocks driven by section settings.

---

🔄 Continuous Deployment

Every push to main triggers deploy-theme.yml, which:

1. Checks out the repository
2. Installs Node dependencies
3. Runs the production build (npm run build)
4. Installs the Shopify CLI
5. Deploys the compiled theme to the connected Shopify store

Store credentials are provided via GitHub Actions secrets — no sensitive data lives in the repo.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-section)
3. Commit your changes (git commit -m 'Add an amazing section')
4. Push to the branch (git push origin feature/amazing-section)
5. Open a Pull Request

---

📄 License

This project is licensed under the ISC License.

---

⭐️ If this project helped or inspired you, consider giving it a star! ⭐️

Built with Liquid, Webpack, and a lot of ☕