/ WEB DEVELOPMENT ·Part of the Web Engine

Code that ships.
Performance that holds.

Commerce code is harder than it looks. It has to render fast on a phone with poor signal, integrate cleanly with seven third-party apps, survive a Black Friday traffic spike, and stay maintainable eighteen months after launch. We build commerce code that does all four — not just the first one.

Shopify Plus and standard. Magento legacy and migrations. Custom headless setups when the requirements demand it. Core Web Vitals as a build target, not a post-launch cleanup. Component architecture, not theme spaghetti. API integrations built clean. Performance budgets enforced.

Get a Technical AuditFree Site Performance Review
/ PROJECT: pearl-source-theme · BRANCH: feat/cart-drawer-redesign · MODIFIED
product-card.liquid
cart-drawer.liquid
theme.css
/ EXPLORER
▾/sections
▾/product
product-card.liquid
product-grid.liquid
product-recommendations.liquid
▾/cart
cart-drawer.liquid
cart-item.liquid
▸/collection
▸/checkout
▾/snippets
price.liquid
rating.liquid
responsive-image.liquid
▾/assets
theme.css
theme.js
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{%- comment -%}
Product Card · v2.4
Used in: collection grid, cart drawer, recommendations
{%- endcomment -%}
 
<article class="product-card"
data-product-id="{{ product.id }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}">
 
<a href="{{ product.url }}" class="product-card__media">
{%- assign image = product.featured_media -%}
{% render 'responsive-image',
image: image,
sizes: '(min-width: 768px) 33vw, 50vw',
widths: '300, 400, 600, 800' %}
</a>
 
<div class="product-card__body">
<h3 class="product-card__title">{{ product.title }}</h3>
{% render 'price', product: product %}
{% render 'rating', product: product %}
</div>
 
<button type="button"
class="product-card__cta"
data-add-to-cart="{{ product.selected_or_first_available_variant.id }}">
Add to Cart
</button>
</article>
/ LIVE PREVIEW
IMG
Modern Velvet Sofa
$1,499
★★★★★(247)
✓ Compiled in 187ms
✓ Bundle: 42.3KB gzipped
✓ 18 components updated
❯shopify theme dev
LCP 1.4s · INP 64ms · CLS 0.02 · LIGHTHOUSE 98
Liquid · UTF-8 · LF · Ln 24, Col 38AB-WEBDEV · 088
98Avg Lighthouse Performance Score Post-Engagement
<1.5sAvg LCP Across Active Shopify Engagements
~8–16 wkTypical Magento → Shopify Migration Timeline
/ The Web Dev Reality

Fast to ship.
Built to last.

Most agency-built commerce code looks good for six months and becomes a maintenance nightmare by month eighteen. Theme spaghetti, copy-pasted components, third-party app integrations duct-taped onto the cart, performance optimizations that broke when the next Shopify update shipped. The brands that compound on their commerce stack don’t have prettier code — they have code that survives the next 24 months of shipping.

snippets/price.liquid · LEGACY
01
02
03
04
05
06
07
08
09
10
{% if section.settings.show_price_v2 %}
{% if product.compare_at_price > product.price and section.settings.show_sale_2024 %}
<span style="color:#FF0033;font-size:18px;">${{ product.compare_at_price | money }}</span>
<span style="color:#000;font-size:22px;font-weight:bold;">${{ product.price | money }}</span>
{% elsif section.settings.use_legacy_pricing %}
{% include 'snippets/old-price-display' %}
{% else %}
<span>${{ product.price | money }}</span>
{% endif %}
{% endif %}
/ Most Agencies · Theme Spaghetti

Inline styles. Hardcoded colors. Legacy fallbacks. Six conditionals to render one price. One developer wrote this. Three more “fixed” it. The next developer rewrites the whole template.

sections/product.liquid · CURRENT
01
02
03
04
05
{%- comment -%} Price · v3 · uses --price-* tokens {%- endcomment -%}
{% render 'price',
product: product,
variant: variant,
show_compare: section.settings.show_compare %}
snippets/price.liquid · CURRENT
01
02
03
04
05
06
07
{%- comment -%} snippets/price.liquid {%- endcomment -%}
<div class="price{% if variant.compare_at_price > variant.price %} price--on-sale{% endif %}">
{% if variant.compare_at_price > variant.price and show_compare %}
<span class="price__compare">{{ variant.compare_at_price | money }}</span>
{% endif %}
<span class="price__current">{{ variant.price | money }}</span>
</div>
/ Act Bold · Component Architecture

One component. CSS handles the styling via design tokens. Conditionals minimal and intentional. Any developer on the team can extend it without breaking anything else.

The Difference: Spaghetti Looks Fine In Week 1. Architecture Looks Fine In Month 18.
73%
of Shopify themes have unused CSS exceeding 100KB on first load.
Shopify Theme Audit Benchmark · 2024
3–5×
longer feature-shipping velocity on themes with component architecture vs. monolithic templates.
Forrester eCommerce Dev Velocity Study · 2024
$28K
avg cost of "we need to rebuild the theme" projects we've inherited from prior agencies.
Act Bold Multi-Client Engagement Data · 2025
98 / 100
avg Lighthouse Performance score across Act Bold-shipped Shopify themes.
Act Bold Live Engagement Performance Data · 2025
/ The Web Dev Stack

Four disciplines.
One commerce engine.

Web Development at Act Bold isn’t four contractors duct-taped together. It’s four disciplines run by an integrated team, with the architecture decisions made at the engagement level — not deferred to the developer who happens to be free that sprint.

01

Frontend Development

The theme layer. Component architecture, responsive design, accessibility-first markup, design system implementation. Shopify Liquid + custom JS where needed. The work that makes the design real on every device, at every breakpoint, for every user.

  • Component-based theme architecture (Shopify 2.0, Magento PWA Studio)
  • Design token integration (Figma → CSS variables → Liquid)
  • Accessibility implementation (WCAG 2.1 AA minimum baseline)
  • Responsive build (mobile-first, tested at 6+ breakpoints)
Build Pipeline
02

Backend & API Integration

The integration layer. Custom Shopify apps, ReCharge subscription flows, Klaviyo data sync, Yotpo review integration, search/PIM connections, ERP data flows, custom Liquid/Ruby logic. The work that makes the commerce stack actually function as a stack.

  • Shopify API integration (REST + GraphQL Storefront/Admin)
  • Marketing stack connections (Klaviyo, ReCharge, Yotpo, Gorgias, Rebuy)
  • ERP / PIM / OMS integration (NetSuite, Brightpearl, Akeneo)
  • Custom app development when off-the-shelf doesn't fit
API Integration Map
03

Performance Engineering

Speed as a build target, not a post-launch cleanup. Core Web Vitals optimization built into the theme architecture. Image pipeline, JS bundle management, critical CSS, lazy loading patterns, CDN configuration. Performance budgets enforced at the build step.

  • Core Web Vitals optimization (LCP, INP, CLS targets enforced)
  • Image pipeline (responsive, WebP/AVIF, lazy loading)
  • JS bundle management (code splitting, tree shaking, deferred loading)
  • Critical CSS extraction + above-the-fold optimization
Core Web Vitals
04

Migration & Replatforming

Magento → Shopify is the most common migration we run, but we also handle BigCommerce → Shopify, custom platforms → Shopify, and Shopify → Shopify Plus. Data migration, URL mapping (preserve every redirect), SEO continuity, integration re-platforming, and zero-downtime cutover. Migration is risky; we de-risk it.

  • Product / customer / order data migration (with audit trails)
  • URL mapping + 301 redirect plan (preserve SEO equity)
  • Integration re-platforming (apps, ERPs, marketing stack)
  • Cutover plan with rollback safety + zero-downtime deploy
Migration Workflow
/ Performance Engineering Dashboard

Performance is a build target.

Most agencies treat performance as a post-launch optimization. We treat it as a build requirement — performance budgets enforced at compile time, Core Web Vitals scored on every PR, and Lighthouse scores reported every month. Here’s what the dashboard looks like across active engagements.

/ Performance Metrics · Live · 30-Day Rolling · Active Shopify Engagements14 sites · live
LCPGOOD
1.4s
GOOD: <2.5s
FIX: 2.5–4s
POOR: >4s
75th percentile · 14 active sites
INPGOOD
82ms
GOOD: <200ms
FIX: 200–500ms
POOR: >500ms
75th percentile · 14 active sites
CLSGOOD
0.04
GOOD: <0.1
FIX: 0.1–0.25
POOR: >0.25
75th percentile · 14 active sites
/ PERFORMANCE BUDGETS · ENFORCED AT BUILD STEP
MetricTargetCurrentStatus
JavaScript bundle (gzipped)<80KB42KBPASSING
CSS bundle (gzipped)<40KB28KBPASSING
Hero image weight<120KB87KBPASSING
Total page weight<800KB612KBPASSING
Lighthouse Performance>9098PASSING
/ TYPICAL TRANSFORMATION · MAGENTO → SHOPIFY MIGRATION
BEFORE · MAGENTO LEGACY
LCP4.2s
INP380ms
CLS0.18
Total Page Weight2.4MB
Lighthouse38
Same brand. Same products. Different engine.
AFTER · SHOPIFY REBUILD
LCP1.3s
INP64ms
CLS0.02
Total Page Weight680KB
Lighthouse98
98 / 100
Avg Lighthouse Performance Score
<1.5s
Avg LCP Across Active Engagements
100%
Engagements Hit CWV 'Good' On All 3 Metrics
0
Performance-Regression Incidents (Last 12 Months)
/ Web Dev Case Studies

Three brands.
Three different builds.

From 10K+ SKU migration to enterprise Magento at $3M+/month — three brands that needed Web Development to function as commerce infrastructure, not theme decoration.

MAGENTO → SHOPIFY · 10K+ SKU · MIGRATION

Parts Place Inc

/ Multi-Thousand SKU Magento → Shopify Migration
+55%
Conversion Rate Lift Post-Migration
−70%
Admin Time Reduction (Site Operations)
10,247
SKUs Migrated With Full Data Integrity

“They moved us from a Magento setup we'd outgrown to a Shopify build that actually works the way our team works — without losing a single product or breaking a single redirect.”

See Case Study →
MAGENTO → SHOPIFY · LUXURY DTC · DESIGN SYSTEM

ML Furs

/ Luxury Magento → Shopify Build with Design System Integration
3×+
Organic Growth Post-Rebuild
Since 2014
Design System Still in Production Use
Year-Round
Architecture Survived Seasonal Pivot

“Ten years on the same design system. Three pivots. Same architecture. That's the test we put any web build to.”

See Case Study →
MAGENTO · ENTERPRISE · ONGOING DEV

WPS Publish

/ Enterprise Magento Ongoing Development Program
$3.3M+ / mo
Revenue Run-Rate on the Platform
Enterprise
Scale Across Catalog, Order, Customer Data
Multi-Year
Continuous Development Engagement

“Enterprise Magento doesn't run itself. Act Bold has been our development team for years — every release, every integration, every performance optimization.”

See Case Study →
/ Investment

Three phases.
One commerce engine.

Engagements typically run as a sequential Build Journey — Discover first to scope the work honestly, Build to ship the code, then Maintain to keep the platform compounding. Each phase scoped on its own terms.

PHASE 01 · DISCOVER

Technical Audit & Scope

Fixed price
OR INCLUDED IN BUILD

Pre-build technical audit covering platform fit, integration scope, performance baseline, and migration risk (if applicable). Scoped fixed-price standalone or absorbed into the Build phase if the engagement progresses.

  • Platform + stack assessment
  • Integration scope mapping
  • Performance + Core Web Vitals baseline
  • Migration risk audit (if replatforming)
Talk to us →
→ FEEDS INTO BUILD
PHASE 02 · BUILD

Full Web Build

Custom · SOW-scoped
TYPICALLY $50K – $250K+

The build phase. Theme architecture, component implementation, integration work, performance engineering, migration execution (if applicable). Scoped via SOW based on the Discover phase findings. Typical timeline: 8-20 weeks depending on scope.

  • All 4 Web Dev Stack pillars (Frontend / Backend / Performance / Migration)
  • Typical timeline: 8–20 weeks
  • Scoped via Full Web Build SOW
  • Hands off to Maintain phase OR your existing team
See Web Build pricing →
→ TRANSITIONS TO MAINTAIN
PHASE 03 · MAINTAIN

Web Retainer

$2,500 / month
16 HOURS / MONTH

Ongoing development support after launch. Feature shipping, integration updates, performance monitoring, security patching, theme evolution. Capacity-based, predictable, scoped for ongoing engagement.

Talk to us →
Fixed Price (Discover) · Scoped SOW (Build) · Month-to-Month (Maintain) · 30-Day Cancel · 10% Annual Discount On Retainer
/ Web Dev Questions

Five questions worth a real answer.

Platform fit, Magento → Shopify migrations, timelines, ongoing support models, and how we keep Core Web Vitals in the “Good” range as a build target.

Shopify and Shopify Plus are our primary platforms — they're where the majority of $2M-$20M DTC commerce now runs and where we have the deepest team. We also work on Magento (legacy maintenance and the source side of migrations), BigCommerce (specific use cases), and custom headless setups when requirements genuinely demand it (Hydrogen, Next.js + commerce APIs). We're platform-agnostic in the strict sense — but we'll be honest in the Discover phase about whether your requirements actually need a custom platform or whether Shopify/Shopify Plus would serve you better.

Yes — it’s one of our most common Build engagements. We’ve migrated Parts Place Inc, ML Furs, and others from Magento to Shopify, including product catalogs of 10K+ SKUs, multi-integration stacks, and significant SEO equity that had to be preserved through URL mapping and 301 redirect planning. We handle data migration (products / customers / orders), integration replatforming (apps + ERPs + marketing stack), URL preservation, and cutover with rollback safety. Migrations typically run 8-16 weeks depending on scope.

Depends on scope. A focused theme build on an existing Shopify store (new design, no migration, existing integrations) typically runs 8-12 weeks. A full rebuild with custom integrations runs 12-16 weeks. A Magento → Shopify migration with significant complexity (10K+ SKUs, multi-integration stack, custom B2B requirements) runs 16-20 weeks. Enterprise builds with custom apps and headless architecture can run longer. We scope timelines during the Discover phase, not during the sales call — generic timelines from agencies that haven't audited your stack are sales theater, not project planning.

Yes — most engagements transition into a Web Retainer (Phase 3 of the Build Journey) for ongoing development support. The retainer covers feature shipping, integration updates, performance monitoring, security patching, and theme evolution at 16 hours/month capacity. Some clients (especially enterprise) need more dedicated capacity and scope retainers larger than the standard 16-hour package. Some hand off to their internal dev team after launch — and we provide thorough documentation and handoff materials when that’s the path.

Performance is built into the theme architecture from day one — it isn't a post-launch optimization phase. Specifically: we enforce performance budgets at the build step (JS bundle <80KB gzipped, CSS bundle <40KB, total page weight <800KB), implement responsive image pipelines with WebP/AVIF, defer non-critical JS, extract critical CSS for above-the-fold content, and validate Core Web Vitals scores on every pull request. Our average Lighthouse Performance score across active Shopify engagements is 98/100. We also monitor real-user Core Web Vitals (LCP, INP, CLS) in production via the Chrome User Experience Report and report monthly via the Web Retainer — performance regression isn't theoretical, it's something we actively prevent.

/ Let's Talk · Web Development

Ready to ship code that holds?

Tell Act Bold about your current platform, your performance pain points, and whether you’re contemplating a migration or platform move. We’ll send back a no-fluff technical audit covering platform fit, performance baseline, integration scope, and a recommended Build Journey — within 48 hours.

Book a Call30-Min Build Screening
Get a Performance ReportFree · 48HR Turnaround
info@actbold.comactbold.com30-Day Cancel · Month-to-Month