[SYS_STATUS: ONLINE] DIGITAL WORKSHOP v2.0

ATUL MUNDAKKAL SHOPIFY DEVELOPER & FULL-STACK ENGINEER

I build and optimize high-converting Shopify storefronts, solve complex commerce problems, and create custom developer tools.

Liquid Shopify APIs Variants Metafields Performance Full Stack

EXPLORE MY WORK →

ATUL CORE

ENG ENGINE

💎 LIQUID

📦 METAFIELDS

🏷️ VARIANTS

🛍️ STOREFRONT

🛒 CART

⚡ APIs

WHAT I BUILD

Engineered capabilities for custom storefronts, commerce logic, and tools.

STOREFRONTS

Building pixel-perfect, accessible, lightning-fast Shopify Dawn/Custom Liquid themes from scratch or Figma designs.

Liquid Theme Architecture Sections & Snippets Vanilla JS Performance

> Liquid section rendering API
> Zero framework overhead
> 90+ Lighthouse targets

COMMERCE LOGIC

Solving complex variant matrices, custom price calculations, discount thresholds, and asynchronous AJAX cart workflows.

Variants Inventory Handling Drawer Cart Pricing Rules Discount Logic

> Asynchronous variant swatches
> Live cart drawer updates
> Custom bundle validation

DATA & APIS

Configuring rich Metafield/Metaobject schemas for non-technical merchant editing and integrating Storefront/Admin APIs.

Metafields Metaobjects Storefront API Admin API GraphQL

> Structured Liquid specs
> GraphQL query optimization
> App Proxy integration

DEVELOPER TOOLS

Creating VS Code extensions, theme snippet helpers, and automation scripts to accelerate developer productivity.

VS Code Extensions Shopify Utilities Automation Cloudflare Pages AI Workflows

> Snippet auto-completion
> CLI theme dev helpers
> Edge worker deployment

THINGS I'VE FIXED

Select a problem category to inspect the diagnostic approach & technical resolution.

CATEGORY: VARIANT LOGIC

Multi-Option Variant & Image Swatch Synchronization

[!] PROBLEM

High SKU products with 3+ option dimensions (Color, Size, Material) breaking swatch UI, showing out-of-stock options as selectable, or failing to swap gallery images on swatch click.

[>] APPROACH

Built a centralized variant state listener in Vanilla JS. Analyzed Shopify's `product.variants` JSON object directly in Liquid and mapped valid option combinations dynamically to update pricing, image galleries, and add-to-cart button state in real time.

[#] TECHNOLOGY

Liquid `json` filter JS State Manager Section Rendering API

User Selection

→

State Listener

→

Variant Matrix Check

→

Inventory & Price Update

→

Cart Ready

SELECTED WORK

Interactive project laboratory showcasing full-stack & Shopify builds.

PROJECT / 01 FULL-STACK / INTERACTIVE WEB APP

Interactive Shell & Mini-Game Portfolio

A retro interactive terminal shell with a custom JS parser and canvas arcade game, engineered to demonstrate custom DOM state handling.

HTML5 CSS3 Grid Vanilla JS Canvas API

LIVE DEMO → SOURCE CODE

PROJECT / 02 SHOPIFY / CUSTOM STOREFRONT APP

Shopify Custom Wishlist Engine

A zero-framework client-side wishlist system syncing local guest selections with Shopify Customer Metafields via App Proxy.

Liquid Storefront API Metafields App Proxy

INQUIRE DETAILS → GITHUB

SHOPIFY, BUT DEEPER.

Hover or click layers in the architecture stack to inspect engine specialization.

LAYER 01 Storefront & Liquid Theme Architecture RENDER ENGINE

LAYER 02 Liquid Templates, Sections & Dynamic Blocks TEMPLATING

LAYER 03 Product & Multi-Dimensional Variant Logic PRODUCT MATRIX

LAYER 04 Metafields & Metaobjects Custom Schemas DATA ARCHITECTURE

LAYER 05 Cart AJAX API, Upsells & Discount Rules COMMERCE FLOW

LAYER 06 Storefront GraphQL & Admin REST APIs INTEGRATIONS

INSPECTING: LAYER 01

Storefront & Liquid Theme Architecture

Designing clean section schemas (`{% schema %}`), modular snippet includes, and decoupled JS components for Dawn and custom theme bases.

section-product-main.liquid

{% schema %}
{
  "name": "Custom Product Core",
  "settings": [
    { "type": "checkbox", "id": "enable_ajax_cart", "label": "Enable AJAX Drawer", "default": true }
  ]
}
{% endschema %}

TOOLS I'VE BUILT

Developer tools engineered to streamline theme coding and workflow speed.

Visual Studio Code — Shopify Liquid Snippets Helper

12345678

const vscode = require('vscode');
// Register Shopify Liquid Auto-complete Helper
function activate(context) {
  const provider = vscode.languages.registerCompletionItemProvider('liquid', {
    provideCompletionItems() {
      return ['metafields.custom', 'metaobjects', 'section.settings'];
    }
  });

Shopify Liquid Snippets Helper

Streamlines theme development by auto-completing Liquid tags, Metafield paths, and section schema settings inside VS Code.

GITHUB SOURCE → DEVELOPER PROFILE

EXPERIENCE

Verified engineering track record in Shopify & full-stack software development.

Software Developer @ Webandcrafts

Dec 2024 – Present

Engineered custom, high-converting Shopify theme components using Liquid, resolving complex variant logic for high-SKU catalogs.
Developed modular, reusable Shopify theme sections and dynamic blocks for marketing campaigns and storefront promotions.
Collaborated with design and QA teams to guarantee 100% responsiveness and accessibility across mobile and desktop devices.

ABOUT ATUL

Engineering perspective and core philosophy.

KOCHI, INDIA / REMOTE

Shopify & Full-Stack Software Engineer

I specialize in Shopify theme architecture, Liquid template engineering, and custom web applications. Rather than relying on heavy third-party plugins that degrade site speed, I build lightweight, native Shopify solutions using clean Liquid code, structured Metafields, and asynchronous JavaScript.

My approach combines technical rigor with AI-assisted developer workflows to deliver reliable, maintainable commerce systems that scale effortlessly.

50+ Storefront Projects

0 Framework Bloat

100% Custom Liquid

READY TO BUILD?

GOT A SHOPIFY PROBLEM?
LET'S SOLVE IT.

Available for theme customizations, variant system fixes, custom app proxy integrations, and full-stack projects.

START A CONVERSATION →