<section class="product-grid" data-section="collection">
  {% for product in collection.products %}
    <product-card
      handle="{{ product.handle }}"
      price="{{ product.price | money }}"
    ></product-card>
  {% endfor %}
</section>

{%- liquid
  assign available = false
  for variant in product.variants
    if variant.available
      assign available = true
    endif
  endfor
-%}

<button data-add-to-cart data-variant-id="{{ variant.id }}">
  {{ 'products.add_to_cart' | t }}
</button>

<section class="product-grid" data-section="collection">
  {% for product in collection.products %}
    <product-card
      handle="{{ product.handle }}"
      price="{{ product.price | money }}"
    ></product-card>
  {% endfor %}
</section>

{%- liquid
  assign available = false
  for variant in product.variants
    if variant.available
      assign available = true
    endif
  endfor
-%}

<button data-add-to-cart data-variant-id="{{ variant.id }}">
  {{ 'products.add_to_cart' | t }}
</button>

const cart = await fetch('/cart.js').then((r) => r.json());

document.querySelectorAll('[data-add-to-cart]').forEach((el) => {
  el.addEventListener('click', async (event) => {
    event.preventDefault();
    const id = Number(el.dataset.variantId);
    await addToCart({ id, quantity: 1 });
    dispatchEvent(new CustomEvent('cart:updated', { detail: cart }));
  });
});

function formatMoney(cents, currency = 'GBP') {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency,
  }).format(cents / 100);
}

const cart = await fetch('/cart.js').then((r) => r.json());

document.querySelectorAll('[data-add-to-cart]').forEach((el) => {
  el.addEventListener('click', async (event) => {
    event.preventDefault();
    const id = Number(el.dataset.variantId);
    await addToCart({ id, quantity: 1 });
    dispatchEvent(new CustomEvent('cart:updated', { detail: cart }));
  });
});

function formatMoney(cents, currency = 'GBP') {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency,
  }).format(cents / 100);
}

export async function loader({ params }) {
  const { product } = await storefront.query(PRODUCT_QUERY, {
    variables: { handle: params.handle },
  });
  if (!product) throw new Response('Not found', { status: 404 });
  return json({ product });
}

const PRODUCT_QUERY = `#graphql
  query Product($handle: String!) {
    product(handle: $handle) {
      id
      title
      variants(first: 100) {
        nodes { id availableForSale price { amount } }
      }
    }
  }
`;

export async function loader({ params }) {
  const { product } = await storefront.query(PRODUCT_QUERY, {
    variables: { handle: params.handle },
  });
  if (!product) throw new Response('Not found', { status: 404 });
  return json({ product });
}

const PRODUCT_QUERY = `#graphql
  query Product($handle: String!) {
    product(handle: $handle) {
      id
      title
      variants(first: 100) {
        nodes { id availableForSale price { amount } }
      }
    }
  }
`;

<section class="product-grid" data-section="collection">
  {% for product in collection.products %}
    <product-card
      handle="{{ product.handle }}"
      price="{{ product.price | money }}"
    ></product-card>
  {% endfor %}
</section>

{%- liquid
  assign available = false
  for variant in product.variants
    if variant.available
      assign available = true
    endif
  endfor
-%}

<button data-add-to-cart data-variant-id="{{ variant.id }}">
  {{ 'products.add_to_cart' | t }}
</button>

<section class="product-grid" data-section="collection">
  {% for product in collection.products %}
    <product-card
      handle="{{ product.handle }}"
      price="{{ product.price | money }}"
    ></product-card>
  {% endfor %}
</section>

{%- liquid
  assign available = false
  for variant in product.variants
    if variant.available
      assign available = true
    endif
  endfor
-%}

<button data-add-to-cart data-variant-id="{{ variant.id }}">
  {{ 'products.add_to_cart' | t }}
</button>

const cart = await fetch('/cart.js').then((r) => r.json());

document.querySelectorAll('[data-add-to-cart]').forEach((el) => {
  el.addEventListener('click', async (event) => {
    event.preventDefault();
    const id = Number(el.dataset.variantId);
    await addToCart({ id, quantity: 1 });
    dispatchEvent(new CustomEvent('cart:updated', { detail: cart }));
  });
});

function formatMoney(cents, currency = 'GBP') {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency,
  }).format(cents / 100);
}

const cart = await fetch('/cart.js').then((r) => r.json());

document.querySelectorAll('[data-add-to-cart]').forEach((el) => {
  el.addEventListener('click', async (event) => {
    event.preventDefault();
    const id = Number(el.dataset.variantId);
    await addToCart({ id, quantity: 1 });
    dispatchEvent(new CustomEvent('cart:updated', { detail: cart }));
  });
});

function formatMoney(cents, currency = 'GBP') {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency,
  }).format(cents / 100);
}

Custom Apps & Integrations

When Shopify won't do the thing you need, we build the thing. Private and public apps, checkout extensions, Shopify Functions, and the integrations that keep your systems talking to each other instead of to a spreadsheet.

Start a conversation →See the work

Development

Themes, apps, integrations and migrations, built properly.

A fixed-scope build, then a small monthly to keep it running and patched.

Sound familiar?

Someone is copying and pasting this every morning.

There's usually one job in the business everyone knows is silly and nobody's had time to fix. That's the one we'd like to hear about.

A person is the integration.

Orders get exported, reformatted and re-uploaded by hand. It works beautifully, right up until that person goes on holiday.

The app store nearly does it.

You've tried four. Each gets you 80% of the way and charges monthly for the privilege. The missing 20% is the bit that actually matters.

Your stock numbers disagree.

Shopify says one thing, the warehouse says another, and everyone has quietly picked a favourite. Overselling is now a monthly event.

How it goes

Small, boring, reliable.

Integrations are unglamorous and they have to work at 3am. We build them to be dull on purpose.

01Week 1
Map what's really happening
We follow one order all the way through — Shopify, ERP, warehouse, courier, inbox — and write down every hop, including the manual ones nobody mentions. The map is usually the surprise.
A diagram of how things really work, not how they're meant to.
02Week 2
Agree the smallest useful version
We'd much rather ship one job end to end than six half-connected ones. The scope starts with whatever is costing you the most time right now.
A scope, a fixed price and a date.
03Weeks 3–6
Build it and run it alongside
It goes live quietly and runs next to your current process for a while, so you can compare the two before you trust it. Then we turn the old one off.
A working integration, plus logging you can actually read.
04Ongoing
Keep it alive
APIs change, credentials expire, odd edge cases turn up. We watch it, get alerted before you do, and fix it.
Monitoring, alerts, and a human who knows your setup.

What's in scope

The stuff between Shopify and everything else.

If two systems need to agree on something, it lives here.

Private & custom apps
Public app development
Shopify Functions
Checkout & post-purchase extensions
ERP integration
3PL & warehouse sync
CRM & helpdesk
Subscription logic
Product configurators
Bulk data tooling
Internal dashboards
Webhooks & queueing

What you get

Something that runs without you watching it.

Built to be forgotten about, in the nicest way.

A scoped build with a fixed price
Proper error handling and retries
Logs and alerts you can read without us
Documentation written for your team, not for developers
A staging environment to test against
Recorded handover session
Ongoing monitoring, if you want it
Source code in your repo, under your account

FAQ

The questions we always get asked

Is a custom app overkill for us?

Sometimes, and we'll say so. If an off-the-shelf app does 95% of it for £29 a month, take the app. We're interested in the jobs where that isn't true.

What happens when it breaks?

It will, eventually — APIs change and servers have bad days. The difference is whether it fails loudly and retries, or silently loses an order. Ours do the first one.

Who owns the code?

You do. It sits in your repo, under your account. If you ever want to take it elsewhere, nothing stops you.

Can you work with our ERP?

Almost certainly. We've connected Shopify to plenty of systems, including a few that had no business having an API. If it can talk, we can talk to it.

Do you do Shopify Plus checkout work?

Yes — checkout extensions and Functions for discounts, shipping and payment rules. It's one of the more common reasons people call us.

Pairs well with