🛍️ Shopify Developer Test – Custom Sections Project

This project was built as part of a Shopify Developer Test. It showcases two fully custom-built sections, a popup modal with Add to Cart functionality, and a smart cart rule — all made using vanilla JavaScript.

---

🎥 Demo Video

🎬 Watch the full demo on YouTube: 👉 Click here to watch

Or play directly below 👇

---

✨ Features

• 🧩 Two Custom Sections from Scratch

  • Banner Section: Editable text & animated button
  • Product Grid Section: 6 products selectable from theme customizer

• 💬 Popup Modal

  • Shows product details, variants, and an Add to Cart button

• 🧠 Smart Rule

  • If a product with Black + Medium variant is added → Soft Winter Jacket auto-added to cart

• 🧹 Clean Code

  • Written in vanilla JavaScript, clean, structured, and commented

• 🔄 Git Workflow

  • Code pushed to development → PR to master → deployed live

---

⚙️ Tech Stack

• Shopify (Dawn Theme)
• Liquid
• HTML / CSS
• JavaScript (Vanilla)
• Git & GitHub

---

🚀 How It Was Built

1. Created a public GitHub repo and connected it to the Shopify store
2. Downloaded and unzipped the Dawn theme
3. Built two new custom sections from scratch
4. Implemented a popup modal and cart rule logic
5. Wrote clean vanilla JS code
6. Pushed to dev branch, created PR to master, and deployed live

---

👩‍💻 Author

Rani Rajpurohit Shopify Developer | Frontend Developer 🔗 [LinkedIn](#) • YouTube