The 3 Studio
WorkPortfolioServicesInsights
BACK TO PORTFOLIO
Shopify Storefront Development

Selection Centre Sports

ROLE: Associate Interface Developer (Agency)Sports Retailer & Equipment
PROJECT OVERVIEW

During my time at the agency, we built the official e-commerce website for Selection Centre Sports. I was responsible for custom storefront developments, integrating review platforms like Judge.me, and building the interactive multi-sport selection filter.

THE CHALLENGE

The massive sports gear inventory has varied sizing variables (racket weight, grip sizes, cricket bats), which made filters bulky and hard to use.

THE SOLUTION

We refactored the tag-based filtering structures to use metafield indexes, enabling clean group filters without loading heavy search plug-ins.

DELIVERABLES & FEATURES
  • Custom sports filtering matching paddle, tennis, cricket, and soccer gear.
  • Seamless integrations with Judge.me for social proof and rating widgets.
  • Cart drawer updates with automatic free-shipping tier indicator bar.
  • Fully responsive and mobile-optimized touch navigation.
DEV HIGHLIGHT & CODE QUALITY

Vanilla JavaScript function calculating free shipping progress and dynamically updating the cart drawer UI elements.

AJAX Cart Progress Meter Logicjavascript
// Dynamic free-shipping bar updates based on checkout thresholds
function updateFreeShippingMeter(cartTotal, thresholdAmount = 500000) { // e.g. 5000 INR
  const barProgress = Math.min((cartTotal / thresholdAmount) * 100, 100);
  const progressBarElement = document.querySelector('.shipping-progress-bar');
  const statusMessageElement = document.querySelector('.shipping-status-message');
  
  if (progressBarElement) {
    progressBarElement.style.width = `${barProgress}%`;
  }
  
  if (statusMessageElement) {
    if (barProgress >= 100) {
      statusMessageElement.innerHTML = "🎉 CONGRATS! YOU GET FREE SHIPPING!";
    } else {
      const remaining = ((thresholdAmount - cartTotal) / 100).toFixed(2);
      statusMessageElement.innerHTML = `Add ₹${remaining} more for FREE SHIPPING`;
    }
  }
}
PERFORMANCE STATS
MOBILE PAGESPEED
91/100
DESKTOP PAGESPEED96/100
AVG. LOAD TIME1.5s
TECH STACK USED
Shopify LiquidJavaScriptAjax APICustom CSS

READY TO SELL MORE?