Webshop development that fits your brand: start with the customer journey

Webshop development for a brand that already sells? Start with six moments in the customer journey, plus team editing, migration and accessibility.

TL;DR: Looking at webshop development for a brand that already sells online? Start with the customer journey, not the platform. Describe six moments, from the first click to the second order, and put them in your brief. Then you build around your customer instead of around a feature list.

You have a marketing team and maybe sell in several countries. Still, your team is afraid to edit a page because the design breaks. And moving to a new webshop feels risky for your Google rankings. If you want a new webshop built that fits your brand, you need someone who thinks along with you, not someone who ticks off a list. In this article I explain how I approach it, with examples from my work for Orangefit, The Laundry Story and Chunky Cherry Coffee.

Why a customer journey makes a better brief than a feature list

Every developer says yes to a feature list. Filters, reviews, subscriptions: it's all on there, but nobody knows what the customer is supposed to do with it. Often every line then becomes a separate app. With every app, your webshop gets slower and harder to manage.

A brief based on the customer journey describes what a customer must be able to do. For example: "A regular customer in Belgium reorders the same coffee on her phone without searching." You can design for that. And a sentence like that forces choices. Where is her last order? How many taps does it take? Does she see the price with Belgian shipping costs straight away?

Dutch shoppers now buy more often on their phone than on a laptop or desktop (Thuiswinkel.org). And people who leave a cart often do so for reasons you can design away: high extra costs, a forced account or a checkout that takes too long (Baymard Institute).

You don't have to make the customer journey up. You already have most of the input:

• Your customer service. Which questions come back every week? Every recurring question is a gap in your webshop.
• Search Console and your own search bar. Which words bring people in, and what do they search for without results?
• Your analytics. Which pages do people land on, and where do they drop off, especially on mobile?
• Reviews and returns. What surprises customers, for better and for worse?

That way your brief is based on what customers actually do, not on what you think they do.

The six moments in the customer journey

Use this table for your brief.

For each moment below, you'll read what often goes wrong, what goes in your brief and how I solved it in earlier projects.

1. Arriving: the first seconds after the click

Many visitors arrive through a campaign or Google, often in the built-in browser of an app like Instagram. Write down per channel and country where they land and what they see first. Think about:

• The right language, currency and shipping info, straight away. A Belgian customer who sees Dutch shipping costs already has doubts.
• A page that matches the ad. If someone clicks on an offer, show that offer, not your homepage.
• Switching country or language themselves. Don't send anyone to another version of your webshop without asking.

Orangefit sells in several countries and languages. There, the content of a product page can differ per country, so every customer reads what's right for their country.

Speed matters here too. A page should respond the moment someone taps (web.dev). On the headless Orangefit webshop, which I built with my colleagues at Superhero Cheesecake, all Core Web Vitals are green. Busy days like Black Friday run without problems.

Speed isn't something you sort out once. Every new app, tracking script and video can make a page slower. So write in your brief that the Core Web Vitals must be green on mobile, and who keeps an eye on that after launch.

2. Searching: products and stories together

Customers don't search the way you organise your range. They type in their own words, with typos, and sometimes in a different language from your site. Put in your brief:

• Real search terms from your customer service, Search Console and the search bar of your current webshop.
• Synonyms and typos the search bar needs to understand.
• What happens with zero results. An empty page is a dead end. Show popular products or another way in.
• What a customer should already see in the results. At Chunky Cherry Coffee, the product cards show taste labels. So you can choose without opening every page.

Let search find your content too. At Orangefit, one search bar (Algolia) finds products from Shopify and recipes and blogs from the CMS, in every language, within 100 ms. From the recipes you can buy the products straight away. That way your content becomes a way into your shop, instead of a separate blog on the side.

3. The product page: take away doubt

A good product page answers questions before the customer asks them. For a brand that already sells, one question is often missing: why this product, from this brand? A good brief lists these five questions for every product page:

• What is it, and is it for me? In one sentence at the top.
• How do I use it? An explanation, video or recipe from your own content.
• What do others think? Reviews close to the button, not at the bottom.
• When will I get it, and can I return it? Delivery time, shipping costs and returns, per country.
• Why from this brand? Origin, maker, the choices you make. A standard page misses this.

Agree for each question where the answer comes from. Price, variants and stock live in Shopify. Stories, explanations and recipes are made by your team in the CMS. Reviews usually come from an app. That way everyone knows who keeps what up to date.

On a phone you only see the top of the page at first. Write in your brief what needs to be there: product name, price, the most important choice and the button. The rest can go below.

You answer that last question, why from this brand, with stories your team already makes. At The Laundry Story, every product and collection page comes from Shopify first. A story from the CMS adds to it. If there's no extra content yet, there's still a complete page. And blog posts contain product blocks so readers can buy straight away.

At Chunky Cherry Coffee, where I built the Shopify theme, you choose size, roast and grind on the product page. The scanned coffee bags rotate in 3D, so you see the real packaging from every side. The lines in the background are built to be light, so the shop stays fast. An effect like that should make choosing easier, not make the page slower.

Does your current webshop no longer fit your brand? Send me the link and three things your customers must be able to do with you. Then we'll look together at where the journey gets stuck. Send me your link.

4. The cart: show that it worked

A customer taps "Add to cart", sees nothing happen, taps again and ends up with two. So agree up front what the button does: it reacts straight away and visibly, and a screen reader reads out the message.

Also agree what happens next:

• Does a cart open at the side, or does the customer stay on the page? Both work, as long as it works the same everywhere.
• What if the product has just sold out? Say so straight away, not at checkout.
• What does the customer see in the cart? The total including shipping, the delivery time and a clear button to checkout.

For your developer:

<button class="add-to-cart" type="button">Add to cart</button>
<p class="cart-status" role="status"></p>

const button = document.querySelector('.add-to-cart');
const status = document.querySelector('.cart-status');
let busy = false;

button.addEventListener('click', async () => {
  if (busy) return; // no second item from two quick taps
  busy = true;
  button.setAttribute('aria-disabled', 'true');
  button.textContent = 'Adding…';
  status.textContent = ''; // clear first, so a new message is read out again

  try {
    await addToCart(variantId); // your own add-to-cart call
    button.textContent = 'Added';
    status.textContent = 'Added to your cart.';
  } catch {
    button.textContent = 'Add to cart';
    status.textContent = 'That didn\'t work. Please try again.';
  }

  setTimeout(() => {
    button.textContent = 'Add to cart';
    button.removeAttribute('aria-disabled');
    busy = false;
  }, 1500);
});

.add-to-cart { transition: transform 150ms ease-out; }
.add-to-cart[aria-disabled="true"] { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .add-to-cart { transition: none; }
}

The button shows right away that it's busy and ignores a second tap. With aria-disabled it stays reachable by keyboard. With role="status" a screen reader reads out the message. And people who have reduced motion turned on get no animation.

5. Checkout: no surprises, in any country

In a Baymard survey, 12% of people who abandoned a cart said they couldn't see the total cost up front (Baymard Institute). So show these on the product page and in the cart already:

• Shipping costs and delivery time, for the customer's country.
• Your returns policy, in one sentence.
• The payment methods the customer knows.

In the first half of 2026, Dutch shoppers paid for 73% of their online purchases with iDEAL|Wero (Thuiswinkel.org). Show the payment methods people use in each country before they open the checkout. If you also sell in Belgium, customers there expect Bancontact. Agree per country which currencies, shipping options and payment methods you show.

Let customers order as a guest, too. They can still create an account after the purchase.

You can only change Shopify's checkout a little. The pages before it are yours to shape. So focus on the product page and the cart. That's where you take away doubt, before someone goes to pay.

6. After the purchase: work towards the second order

After a purchase, several tools often send messages: a subscription tool (such as Firmhouse), a loyalty programme (such as Yotpo) and your email tool (such as Klaviyo). Agree which tool sends which message. Otherwise the customer gets two confirmations, or none. A simple overview in your brief helps:

• Order confirmation and shipping updates: usually Shopify itself.
• Subscription deliveries, pausing and cancelling: your subscription tool.
• Points and rewards: your loyalty programme.
• Welcome, abandoned cart, post-purchase follow-up and winning customers back: your email tool.

Which email flows to set up, and in what order, is in my article on Klaviyo email flows for Shopify (in Dutch).

With a headless webshop, there's one extra thing to watch. Your email tool needs to know which products a customer views and adds to the cart. The website doesn't pass that on by itself, so put it in the scope. Otherwise a flow like abandoned cart won't work.

Also describe how a regular customer reorders, for example from her account or through a link in an email. That's the sentence from the start of this article: the same coffee, on her phone, without searching.

Let your team publish on its own

In many older webshops, a developer has to build every landing page. The result: campaigns wait for a developer, or your team changes something itself and the design breaks.

The fix is a set of fixed building blocks in your brand style. Think of a block for a campaign image, a row of products, a story or frequently asked questions. Your team picks the blocks and fills them in, but can't break the design by accident. Put in your brief:

• Which pages your team makes itself, such as campaign pages, landing pages per country and blogs.
• Which building blocks that needs, and what you can change in each block.
• Who publishes, and what only a developer changes, such as the checkout.
• Where things live: product data in Shopify, stories and campaigns in the CMS or the Shopify editor.

This is how it works in practice:

• Orangefit: the content team makes and changes pages and campaigns itself, in a few minutes.
• The Laundry Story: editors pick products from a list in the CMS instead of copying product codes. So no wrong link goes live. Every page can be checked first in a preview that looks like the live site. When they publish, only the changed pages are refreshed, so an update is online quickly.
• Chunky Cherry Coffee: the team changes everything in the Shopify editor, without code.

Moving to a new webshop without losing your rankings

A new webshop also means a migration. You already have Google rankings, customer accounts and order history. You want to take them with you. The key steps:

• List all your old URLs: products, collections, blogs and landing pages. Get them from your sitemap, Search Console and analytics.
• Map every old URL to a new page. Shopify with a theme uses fixed paths, such as /products/ and /collections/. So your URLs almost always change. With headless, you choose the paths yourself.
• Prepare 301 redirects before launch, and check them straight after.
• Bring your data along: products, customers, reviews and your email lists. Decide up front whether and how your order history comes along.
• Tell your regular customers what's changing. Customer passwords don't move to Shopify, so email your regular customers at launch about how to log in again.
• Pick a quiet moment. Don't go live just before your busiest weeks, such as Black Friday.
• Check Search Console every day in the first week, and fix errors straight away.

All the steps are in my Shopify migration checklist.

Accessible ordering

Since 28 June 2025, the European Accessibility Act applies, and in the Netherlands the ACM (the Dutch consumer authority) supervises webshops. The ACM checked about 100 large Dutch webshops. On 61% of them you couldn't place an order with assistive technology, such as a screen reader (ACM).

According to the ACM, the rules apply if you employ 10 or more people or have an annual turnover above 2 million euros (ACM). A brand that already sells online often falls under that.

Write in your brief that ordering must work with only a keyboard and with a screen reader. In practice, that means:

• Every button and field can be reached with the Tab key, and you can always see where you are.
• Buttons and fields have a name a screen reader reads out, including buttons with only an icon, such as the cart.
• Messages are read out, like with the button above.
• Text has enough contrast, and images have a description.
• Apps count too. A review widget, chat or cookie notice you can't close with the keyboard blocks the whole order.

The common benchmark is WCAG 2.1 at level AA. Have it checked before launch, and again when you add new apps.

Shopify: premium theme, custom theme or headless?

Headless here means: I build the website your customers see separately from Shopify, and Shopify handles products, stock and checkout.

Premium theme. If your customer journey fits a premium theme, that's often enough. You're live sooner and have less to maintain. Your brand does stand out less.

Custom theme. For Chunky Cherry Coffee I built a custom theme with flexible sections, in Dutch and English. The team manages everything in the Shopify editor. The 3D coffee bags give the brand its own face, within Shopify.

Headless. The big advantage: everything is on-brand. Every page, from campaign to product page, follows your own design instead of the limits of a theme. Only the checkout stays with Shopify. Choose this if you have lots of content, sell in several countries or connect many systems. At Orangefit, Shopify, the CMS (DatoCMS) and search (Algolia) work together in one website. But be honest about it: headless means more build work. Apps from the Shopify App Store that show something on your page don't always work out of the box. Your developer has to build them in.

Not sure? Start with two questions. Where does your content come from, and how many countries do you sell in? If you also connect an ERP, till system or warehouse, write in your brief which system leads for stock, prices and orders.

If you're mainly after a quick, cheap webshop, I'm not the right fit. I build webshops your team manages itself, on Shopify and headless.

How we work together

• We start with a conversation. I want to know what's not working now and what the new webshop needs to deliver.
• Everything on paper. You get a proposal with what I deliver, when, and for what fixed price. If something is still uncertain, that's in there too.
• You see the work as I build. I work in short rounds and regularly show where I am. I process feedback quickly. If the scope changes, we discuss it straight away, not on the invoice.
• I know the tools. I'm a DatoCMS Agency Partner and a Klaviyo Certified Partner.
• I stay involved. A webshop is never finished. After launch I maintain your webshop, without an expensive contract: monitoring, bug fixes, Shopify updates, app management and a monthly report. I still maintain Orangefit today.

For our first conversation, it helps to have this to hand. None of it needs to be finished:

• The link to your current webshop, and what you're missing.
• Three things customers must be able to do with you.
• The countries and languages you sell in, now and later.
• The tools and apps you use, such as your email tool, subscriptions or reviews.
• Who in your team makes and publishes pages.
• Any fixed date, such as a launch or a busy period.

How a project continues from there is on my process page (in Dutch).

Frequently asked questions

What does custom webshop development cost? It depends on the scope: page types, integrations, countries and languages, and the migration. After a first conversation you get a written proposal from me with scope, planning and a fixed price.

How long does it take to build a webshop? It depends on the scope and on how quickly content and feedback come in. The headless webshop for The Laundry Story was ready in three months.

Can my team manage the webshop without breaking the design? Yes. I build fixed building blocks in your brand style. That way your team makes its own pages from day one, without breaking the design.

Is headless always better? No. Headless gives you the most room, so everything is on-brand, but it also takes more build work and maintenance. If your customer journey fits a theme, a theme is often the better choice.

What happens after launch? I keep maintaining your webshop, without an expensive contract. That covers monitoring, bug fixes, Shopify updates, app management and a monthly report.

Does the European Accessibility Act apply to my webshop? Probably. According to the Dutch ACM, the rules apply to companies with 10 or more employees or an annual turnover above 2 million euros. This isn't legal advice, so check your own situation.

Planning a new webshop for your brand?

Tell me who your customers are, where you sell and what your team wants to do itself. After an introductory call you get a written proposal with scope, planning and a fixed price. So you know what you get before I build anything. Book an introductory call about your webshop, email info@petercoolen.com or call +31 6 57 54 60 27.

Sources

• Thuiswinkel.org: Online aankopen in het buitenland blijven groeien, nu één op zeven (Thuiswinkel Markt Monitor, H1 2026, in Dutch)
• Baymard Institute: 50 Cart Abandonment Rate Statistics 2026
• ACM: klant met beperking kan bij merendeel grote webwinkels niet terecht (in Dutch)
• ACM: Accessibility of e-commerce services and electronic communications services
• web.dev: Interaction to Next Paint (INP)