Shopify Subscription Portal Redesign (Loop Subscriptions App)

Project Overview Graffeo, a specialty coffee roaster on Shopify, needed their customer subscription portal (powered by the Loop Subscriptions app) redesigned to match their brand — replacing Loop's default grey, rounded-corner UI with a clean white/green, square-corner design across both desktop and mobile. The engagement covered layout, styling, and UX flow of the subscription-management experience customers use to edit, pause, skip, or cancel their coffee subscriptions.

The Challenge Loop Subscriptions is a client-rendered React SPA embedded in the Shopify storefront, and the client only had access to it through Loop's admin-provided Custom CSS/JS panel — no access to the underlying app code. That meant every change had to work within a re-rendering React tree: reparenting or restructuring React-owned DOM nodes crashes the app outright. On top of that, the client wanted structural changes Loop didn't natively support — merged navigation buttons, a second "Edit Frequency" action alongside "Edit Product," a reorganized card layout, and hidden sections — all while previewing against a real, live customer account, so testing had to be done without ever triggering a Pause, Cancel, or Skip action.

My Role Sole developer responsible for translating the client's approved desktop and mobile mockups into working Custom CSS and Custom JS, end to end — from reverse-engineering Loop's rendered markup and class names (no documentation was available) to implementing, testing, and iterating on both stylesheets across breakpoints.

Research and Key Insights I started by inspecting the live portal's rendered HTML/CSS to map Loop's actual class and ID structure, since there was no public documentation for its DOM shape. Key findings that shaped the approach: the portal re-renders on nearly every state change, so one-time DOM edits get wiped and anything injected needed to survive re-renders; some data (like the subscription status badge and ID) only existed inside a block the client wanted visually hidden, meaning it had to be cloned into new nodes rather than relocated; and the product row used a full-row click handler for "Edit Product," so simply adding a second button nearby would have both buttons trigger the same action.

Design or Development Process I built two coordinated layers. Custom CSS handled brand colors, square corners, unified button typography, and CSS Grid re-ordering of page sections (using grid-row/grid-column overrides rather than moving DOM nodes) for both the 7:3 desktop split and the stacked mobile layout, plus responsive breakpoints for every relocated section. Custom JS added a MutationObserver-driven script that re-applies all DOM-level changes (cloning the status badge/ID, injecting the "Edit Frequency" button, merging navigation buttons) on every portal re-render, guarded by an applying flag to avoid re-entrant loops, and written to only ever add or clone nodes rather than reparent React-owned ones.

Key Decisions and Challenges Click-proxy pattern for "Edit Frequency": since the product row's whole surface was a click target for "Edit Product," I added a separate visible button that intercepts clicks in the capture phase (stopImmediatePropagation) and forwards them to Loop's real, hidden frequency-edit control, giving two distinct actions without touching Loop's own event handlers. CSS Grid over DOM relocation: instead of moving cards in the DOM (risky with a re-rendering React tree), I re-pinned sections using explicit grid-row/grid-column values, which is safe against re-renders and kept every node under React's control. Mobile card order: the desktop 2-column grid collapses to mobile in a specific order the client's mockup called for (Product, Next Delivery, Shipping, Payment) rather than the default row-major stacking order, which took an explicit mobile-only row map to get right. Safe testing constraint: because previews ran against a real customer account, all verification was visual-only, with no functional testing of Pause/Cancel/Skip, which meant being extra disciplined about only ever adding or cloning nodes, never removing or rewiring existing Loop controls.

Final Solution A fully on-brand, responsive subscription portal delivered entirely through Loop's Custom CSS/JS panel: square-corner white/green buttons and cards, a reorganized subscription-details header, merged "View Past Orders / View Upcoming Orders / Manage All Subscriptions" navigation, a second "Edit Frequency" action on the product line, a redesigned "Next Delivery" card with helper copy and renamed action buttons, and consistent header-style "Edit" controls on the Shipping and Payment cards, all matching the client's approved desktop and mobile mockups, with no changes to the underlying app or vendor code.

Results and Impact The client received a portal redesign that matched their brand identity and approved design across devices, implemented with zero app-code changes or ongoing vendor dependency. The entire solution lives in two editable files (Custom CSS/JS) the client can maintain or hand to any future developer through Loop's own admin panel.

What I Learned Working against a black-box, re-rendering React app with no documentation reinforced the value of defensive, idempotent DOM scripts, treating every function as something that must run safely dozens of times per session rather than once. It also sharpened a general principle: when you can't touch the source, the safest lever is almost always CSS layout (grid/flex reordering) over DOM manipulation, and DOM manipulation should be additive-only whenever the underlying app doesn't belong to you.