Shopify design agency: what a design engagement buys, the deliverables, and how to judge a portfolio
Design or development, the five templates that decide revenue, the brief that gets comparable quotes, and the handover that keeps the store yours.
Published by AI Knows Us · Updated 12 October 2026
A Shopify design agency designs the store: the brand expression, the page templates, the navigation, the product page layout and the path to checkout. The output is a design system plus a set of annotated templates that a developer builds in Liquid. That makes it a different purchase from Shopify development, which writes the theme code, the apps and the integrations. Some firms sell both and keep the two teams separate internally, which is fine as long as the contract says who owns which deliverable and when each one is signed off. The single most useful thing you can do before approaching anybody is decide whether you are buying a visual direction, a conversion rebuild, or both, because those briefs attract different studios.
Design or development: which one you are actually buying
| Design engagement | Development engagement | |
|---|---|---|
| The question it answers | What should the store look like and how should it be laid out? | How do we build and extend it on Shopify? |
| Main deliverables | Design system, annotated templates, prototype, content model | Liquid theme, custom sections, metafields, apps, migration, integrations |
| Who signs it off | Brand owner and merchandising lead | Technical owner and data owner |
| How it is judged | Clarity on mobile, consistency across templates, buildability | Speed, correctness, maintainability, clean handover |
| Typical trigger | Rebrand, a store that looks dated, a conversion problem | Migration, catalogue complexity, integrations, app sprawl |
If the store converts acceptably and simply looks tired, you want design. If filters cannot be built because the product data has no structure, you want development first and design second. Our page on hiring a Shopify development agency covers the build side in the same shape.
The deliverables to name in the contract
- A design system, not a set of pictures. Type scale, colour tokens with contrast values, spacing scale, button and form states, card patterns, icon set, image treatment rules. Delivered as a shared library in the design tool, with components rather than flattened artboards.
- Annotated templates for every page type you actually have. Home, collection, product, cart, checkout steps you can customise, search results, blog article, about, contact, account pages, and the empty states for each.
- Mobile designs first, desktop second. Most storefront traffic is on a phone, so ask for the mobile frame of every template and treat desktop as the adaptation.
- A content model. For each template, which fields are editable by your team, which are fixed, and what the character limits are. Without this, the first product your merchandiser adds breaks a layout.
- A clickable prototype of the buying path. Collection to product to variant selection to cart to checkout, on a phone frame, tested with five people before any code is written.
- Asset handover. Source files, exported assets at the right sizes, font licences in your name, and a written statement that you own the design work.
The five templates that decide revenue
- Collection page. Filters that reflect how people shop your category, a sort order that is not arbitrary, enough products above the fold on a phone, and a card that carries price, variant cue and review count.
- Product page. Price and availability visible without scrolling, variant selection that cannot be got wrong, delivery and returns answered on the page, size or fit guidance in place, images that work at thumb size, and the reviews in reach.
- Cart. Line item edits without a reload, shipping stated before checkout, one obvious next action.
- Home page. One clear route into each main category plus one piece of proof. Resist the carousel. The search results page deserves the same care as the collection page and rarely gets it.
Ask any agency which of these five they would change first on your current store and why. The answer tells you more than the portfolio does. For the search side of those same templates, see Shopify SEO and the platform's real constraints.
How to judge a portfolio
- Open three of their stores on your own phone, not case study screenshots, and buy something small in one of them.
- Check page weight and load on a phone connection. A beautiful store that takes six seconds to show a product image is a design problem, not just a development one.
- Ask for one project with the brief and the result. What was asked for, what changed, what number moved and how it was measured. One honest before and after beats ten gallery images.
- Ask who does the work. Name the designer, see their portfolio, and get them in the kickoff, because the contract is what keeps the pitch team on the project.
- Check accessibility basics. Text contrast, focus states, keyboard navigation of the menu, alt text in the templates. Cheap at the design stage, expensive later.
Shopify maintains a public partner programme, and a listing there confirms a working relationship with the platform rather than the quality of a studio's design work, so use it as a starting list and judge on live stores.
The brief that gets comparable quotes
- Current state. Store URL, theme, apps installed, product and variant counts, monthly sessions and conversion rate, top five pages by revenue.
- The problem in one sentence, with the number attached. "Mobile product page converts at well under our desktop rate" is a brief. "We need a refresh" is not.
- Scope boundaries. Which templates are in scope, whether checkout customisation is included, whether email templates and ads are included, whether photography is included.
- Brand inputs. Existing guidelines, logo files, fonts and their licences, photography library, tone of voice. Where these do not exist, say so, because creating them is extra work.
- Who signs off and how fast, plus the build route: their developers, your developers, or a separate agency, which changes the annotation depth required.
Send the identical brief to three studios and compare on approach, named people, revision terms and handover, rather than on the total alone. Our page on the questions and evidence to request before hiring an agency has a proposal comparison grid you can reuse.
Phases, sign offs and the handover
- Discovery. Analytics review, session recordings, five customer interviews. Output: a prioritised list of the problems design will solve.
- Direction. Two routes, shown on the product page rather than on a mood board, because the product page is where the money is.
- System and templates. The design system, then every template at mobile and desktop, then the content model.
- Prototype and test. The buying path, tested with five users, with the fixes made before build.
- Build support. Design review at staging, and sign off against the system rather than against a screenshot.
Put the handover in the contract: source files in your workspace, font licences in your company name, exported assets, the design system documented, and a written assignment of intellectual property. A store you cannot change without the original studio is the most expensive outcome of a design project.
This page covers hiring for Shopify store design. For the build, see the development agency page above. For the enterprise plan and its specific partner requirements, see what a Shopify Plus agency adds. For the marketing that follows launch, see marketing a Shopify store in the order that pays.
Where people get stuck on shopify design agency
What is the difference between a Shopify design agency and a Shopify development agency?
Design decides what the store looks like and how it is laid out, and delivers a design system plus annotated templates. Development builds it in Liquid, configures apps, models the product data and handles migration and integrations. Many firms offer both; what matters is that the contract names the deliverables and the sign off for each.
Do I need a custom design or will a theme do?
A well chosen theme with your brand applied, your photography and a properly designed product page covers most stores under a few thousand products. Commission custom design when your merchandising is unusual, when the brand has to feel distinct in a crowded category, or when a conversion problem is traceable to layout rather than to traffic quality.
How long does a Shopify design project take?
For a standard catalogue, discovery to signed off templates typically runs over a small number of months, driven mostly by your review turnaround rather than by design hours. Name the approver and the review window in the contract and the timeline becomes predictable.
What should I own at the end?
The source design files in your own workspace, the exported assets, the documented design system, font licences registered to your company, and written assignment of the intellectual property in the work. Ask for all five in the proposal rather than at handover.
How do I know the design improved anything?
Set the baseline before work starts: mobile and desktop conversion rate, add to cart rate, product page bounce, and revenue per session for the top five pages. Agree which of those the project is meant to move, and read them four to six weeks after launch rather than in the first week.
One more place your store is being described
Buyers now ask assistants for shopping advice: "best running shoes for flat feet under a hundred pounds", "which brands make this in organic cotton". Those answers name a few stores and they draw heavily on structured product data, reviews and third party write ups rather than on how the store looks. A design project is the right moment to get product data, specifications and review content into the templates properly. AI Knows Us measures whether assistants name a store and shows which sources the answers used, with a free scan and no account needed at aiknowsus.com.