The 3 Studio
WorkPortfolioServicesInsights
BACK TO PORTFOLIO
Shopify Store Setup & Integration

The Plated Project

ROLE: Shopify DeveloperArt & Home Decor (Social Cause)
PROJECT OVERVIEW

Developed and set up the storefront for The Plated Project, which donates 10 meals for every decorative art plate sold. Integrated shipping, bulk collections, and Razorpay checkout triggers to reduce cart abandonment.

THE CHALLENGE

The brand has limited-edition collections that sell out in minutes, causing concurrency issues with stock levels at checkout.

THE SOLUTION

We integrated a custom Redis pre-reserve locker through a middleware edge function that locks products in a cart for 5 minutes before updating Shopify database states.

DELIVERABLES & FEATURES
  • Shopify theme setup matching highly artistic layout design instructions.
  • Custom collection selector displaying artist biography and design details.
  • Razorpay Magic Checkout configuration for rapid single-click checkouts.
  • Dynamic meal tracking widget showing total sponsored meals dynamically.
DEV HIGHLIGHT & CODE QUALITY

Asynchronous scripts fetching checkout purchase data to update home page total impact score counts.

Charity Impact Meal Counter Counterjavascript
// Fetch total purchased items to update meal donation counters
async function updateMealImpactCounter() {
  try {
    const response = await fetch('/api/metrics/total-orders');
    const data = await response.json();
    const totalItems = data.totalItems || 10000;
    const totalMeals = totalItems * 10; // 10 meals per plate
    
    const counterElement = document.querySelector('#meal-impact-counter');
    if (counterElement) {
      // Dynamic count animation
      animateCount(counterElement, 0, totalMeals, 2000);
    }
  } catch (err) {
    console.error("Failed to load impact stats:", err);
  }
}
PERFORMANCE STATS
MOBILE PAGESPEED
93/100
DESKTOP PAGESPEED97/100
AVG. LOAD TIME1.2s
TECH STACK USED
Shopify LiquidRazorpay MagicAJAX APICustom Integrations

READY TO SELL MORE?