Design that survives contact with the CMS
Most storefronts do not fail on aesthetics, they fail on the seams: a template that cannot hold a long product name, a badge with nowhere to go, a section nobody can reorder. We design components together with their edge cases, document the rules, and build them so the marketing team can compose pages without asking for help.
The pages we design, and the decision each one supports
A store is a series of small decisions. We design each page around the one decision it has to support, and we test the design against that decision.
Collection pages: which products deserve a closer look? Filters that follow how people choose (size, material, use), sorting that does not bury what is in stock, and product cards that show price, variants and availability without a click.
Product pages: is this the right one, and can I trust it? Variant selection that shows stock, delivery and returns next to the buy button, and specifications from structured data instead of a wall of text.
Search: can I find it fast? Predictive results, useful zero-result pages and synonyms for the words customers type, not the words in your catalogue.
Cart: is the total what I expected? Free-shipping thresholds, discounts and delivery estimates visible before checkout, so the surprise does not happen on the payment step.
Checkout: can I finish without doubt? Shopify’s checkout is not a theme template. We design it within Checkout Extensibility, and on Shopify Plus that includes extra content and fields on the information, shipping and payment steps.
B2B buyers decide differently: quick order lists, customer-specific prices, reorders. See Shopify B2B.
Designed for Shopify's theme architecture
Since Online Store 2.0, every page in a Shopify theme can be a JSON template built from sections, and sections are built from blocks. Your team adds, reorders and removes them in the theme editor without a developer. We design inside that system, not on top of it.
The system has limits, and a good design respects them. According to Shopify’s documentation, a JSON template renders up to 25 sections, each section holds up to 50 blocks, and a theme contains at most 300 theme blocks. Theme blocks can be reused across sections and nested inside each other. Shopify’s own Horizon themes, launched with the Summer ‘25 Edition, are built that way.
Sections that each do one job, with settings named in your team’s words.
Content that differs per product, such as sizing, care or specifications, in metafields: connected to the template once, filled per product.
Recurring content such as size guides, designers or store locations as metaobjects. With the online store capability, each entry can get its own page and URL.
Header and footer as section groups, so a campaign can change them without code.
The result: a new campaign page is assembled from existing sections, not built from scratch. Where a theme cannot carry what you need, we say so and look at Shopify development or headless Shopify.
Performance, mobile and accessibility
Speed is decided in the design. Hero videos, carousels and extra font files cost load time before any code exists. So we set budgets during design, against Google’s Core Web Vitals thresholds:
Largest Contentful Paint (LCP): 2.5 seconds or less.
Interaction to Next Paint (INP): 200 milliseconds or less.
Cumulative Layout Shift (CLS): 0.1 or less.
Google assesses these at the 75th percentile of real page loads, for mobile and desktop separately. Since July 2024 Google crawls and indexes all sites with its smartphone crawler, so the mobile version is the one that ranks. We design mobile first: buttons within thumb reach, filters in a drawer, no desktop layout squeezed small.
Accessibility is now a legal matter. The European Accessibility Act applies since 28 June 2025 and covers e-commerce services for consumers in the EU. Microenterprises providing services (fewer than 10 people and annual turnover or balance sheet total of at most €2 million) are exempt. For everyone else the practical benchmark is EN 301 549, which builds on WCAG 2.1 level AA. We design for a contrast ratio of at least 4.5:1 for body text, visible focus states, full keyboard use and touch targets of at least 24 by 24 pixels: the bar Shopify sets for its own Theme Store.
Approach and what you get
Five phases. Each one ends with something you can review and approve.
Research: analytics, site search terms, session recordings where available and a review of the current store. We look for where customers drop off, and why.
Wireframes: structure per page type, mobile first. Content and hierarchy are agreed before anything looks finished.
UI and design system in Figma: components, type, colour, spacing and every state, including empty, error, sold out and loading. Each component maps to a Shopify section or block.
Build: our developers build the theme from the Figma file, with sections, blocks and metafields as designed.
Test: on real devices, against the Core Web Vitals budgets and with an accessibility check, before launch.
You get the Figma file with the design system, a theme your team can extend, documentation of every section and its settings, and a handover session for the people who run the store. Moving platform at the same time? Then design and Shopify migration run as one project. On Shopify Plus, checkout design is part of the scope.
F.A.Q.
We’d love to answer all your questions
Can you redesign our store without changing the theme?
Often, yes. If your theme uses Online Store 2.0 JSON templates, we redesign templates and sections inside it. If it is an older theme with fixed templates, a new theme is usually less work than retrofitting the old one. We decide this in the research phase, not upfront.
How much of the Shopify checkout can we change?
Less than a theme, by design. checkout.liquid stopped working for the information, shipping and payment pages on 13 August 2024, and customisation now runs through Checkout Extensibility. Checkout UI extensions on those three steps are available only on Shopify Plus. On other plans the design work focuses on branding and the thank you and order status pages.
Does the European Accessibility Act apply to our store?
If you sell to consumers in the EU and are not a microenterprise, very likely yes. It applies since 28 June 2025; microenterprises providing services, with fewer than 10 people and turnover or balance sheet total of at most €2 million, are exempt. Have your exact obligations confirmed by a legal adviser. We make sure the design meets WCAG 2.1 level AA.
Will a redesign hurt our search rankings?
Not if it is planned. A redesign on the same Shopify store keeps the product and collection URLs, so the risk lies elsewhere: removed content, changed headings and slower pages. We map the content that ranks before we design and check speed before launch.
Do we own the design files?
Yes. You receive the Figma file with all components and states, plus documentation of the sections and their settings. Your own team or another partner can continue from there without starting over.