Shopify Product Page Redesign
An eight-week, end-to-end redesign of signage.com's core Shopify product page — from design brief through to a live, event-instrumented release — delivered without a single missed day.
Overview
signage.com is a US-based custom signage platform where the product ordering page is the primary conversion surface. Customers configure, price, and place orders for bespoke signs from this single page, making it the most commercially critical touchpoint on the site.
When the Signage.com team commissioned a full refresh — new design language, improved checkout flow, CMS-backed content management, and analytics from scratch — devSplit took on end-to-end front-end delivery. The scope touched the Shopify product page, the Design Studio configurator, the Airtable data layer, Salesforce lead routing, and the proposal PDF generator.
Context: signage.com runs on Shopify with a custom front-end theme, Airtable as a CMS layer, and Salesforce as its CRM. Changes to the product page required coordinating across all three — making this a systems delivery, not just a visual refresh.
What needed fixing
The Signage.com team — led by Mr. Safox — identified a set of compounding issues on the product page that were creating friction for buyers and leaving the business flying blind on analytics:
- The page design had drifted from the updated brand direction, eroding trust at the point of purchase
- Product metafields (materials, specs, warranty) weren't surfacing consistently — customers were missing key configuration data
- The 'Order Now' button was broken on mobile, causing drop-off at the most critical step in the funnel
- No analytics events were firing anywhere on the page — the team had zero visibility into user behaviour
- The proposal PDF, generated from the same product data, had an outdated design with no portrait-mode support
- The Design Studio configurator had no per-user limits, causing backend load spikes under traffic
How the project unfolded
Reconstructed from daily engineering logs tracked in Slack throughout the project. Every entry below represents verified, logged work.
What we built
Redesigned product page layout
The page was rebuilt in line with the updated brand direction from Mr. Safox — covering desktop and mobile breakpoints. The mobile layout received particular attention following the broken CTA. Clarity session recordings (Hotjar-style) were used mid-sprint to validate layout decisions before the final push.
Metafield surface layer
Alec Hays built out the metafield retrieval system, pulling structured product data — materials, dimensions, finish options, warranty terms — into the page from Shopify's backend. Customers now see accurate configuration information without manual content updates.
Analytics event instrumentation
A complete event layer was added from scratch. Key interactions — product views, configuration steps, CTA clicks, checkout initiations — now fire correctly. This gave the Signage.com team their first reliable behavioural data from their core sales page.
Airtable content management
Child tables were structured in Airtable for each page type, including the product page, allowing the Signage.com team to update sign types, pricing logic, and imagery without engineering involvement. Synced and tested before the live push.
Design Studio per-user limits
Per-user limits were implemented in the Design Studio to prevent load spikes. Sign type imagery and data were updated in the same pass. Both feed directly into the product ordering experience.
Proposal PDF and Hubspot automation
Running in parallel, Erik rebuilt the proposal PDF generation system — new portrait layout, updated footer design, and a repaired Hubspot automation that triggers PDF delivery. The PDF shares the same product data as the ordering page, so both had to be consistent.
The team
| Team Member | Responsibilities | Delivery model |
|---|---|---|
| Shay (lead) | Page architecture, Airtable integration, analytics events, release coordination, team mentoring | Daily Slack logs + PR reviews |
| Alec Hays | Metafield retrieval, responsive fixes, "Order Now" CTA repair | Daily Slack logs |
| Erik | Proposal PDF rebuild, Hubspot automation, Design Studio limits | Daily Slack logs |
What made this work
No blocked days. 200+ hours across 8 weeks with consistent daily output. When one workstream was gated, engineers switched to a parallel task. Nothing sat idle.
Systems thinking first. The product page was treated as a systems problem — Airtable tables restructured, Salesforce routing updated, analytics instrumented — before a pixel of design was finalised.
Parallel without collision. While this shipped, the same team shipped a chatbot and a vendor onboarding portal in the same sprint. Daily logs made it manageable.
Embedded mentoring. Shay supported Perry, Steve, and Alec Hays daily across all workstreams — without it appearing as a separate line item. Senior-level mentoring built into the sprint, not bolted on.
Final thoughts
Client: "The new product page gave us the first real conversion data we've ever had. We can finally see where customers drop off." — Mr. Safox, Signage.com
Engineer: "Every change to the product page had downstream effects — in Airtable, in Salesforce, in the event layer. We had to think like architects." — Shay, Lead Engineer