Shopify dashboard mockup: an editable store analytics screen

A dashboard mockup is a picture of software doing something: a store having a good day, a concept for a new analytics screen, the phone in the thumbnail of a skit about running a shop. It works when three things are true. The layout is one people recognise, the figures belong together, and nothing on it belongs to somebody else.

Pozer’s store dashboard is built for exactly that. In the editor it’s called Counter, with a Shopify-style tag beside the name: an original design laid out the way modern store admins are, described that way so you can tell what kind of screen it is. It carries no Shopify name, logo or artwork, and it isn’t connected to Shopify or to any store.

The line you don’t cross

A mockup in a portfolio, a UI concept, a slide about ecommerce or the thumbnail for a skit is design work. The same image posted as your store’s results, used in an ad for a course or a dropshipping method, or sent to a supplier, a lender or an investor is fraud, however it was made. Keep other companies’ logos off it too: uploading someone else’s trademark is prohibited by our acceptable use policy, which covers the rest.

What’s on the screen

Home, top to bottom, with the values it opens with:

• Header. A near-black band with a letter tile — Y, for Your Store — or your own logo, the store name (up to 24 characters), a bell showing 3 notifications and a round avatar reading YS.
• Controls. A Today pill, a pill reading 342 visitors with a green dot that pulses, and a Report button.
• Figures. A row that scrolls sideways: Total sales $68,420.50 in large type, then Sessions 26.7K, Total orders 1,284, Conversion rate 4.8% and Average order value $53.29, each with its change — ↗ 38.2%, 24.6%, 31.4%, 5.5% and 5.2%. Tap one and it takes the large type and the chart.
• Chart. One line for the selected figure, an axis reading $8K, $4K and $0, and 12 AM, 12 PM and 11 PM along the bottom.
• Tasks. Two cards: 3 Orders to fulfill and 1 Payment to capture.
• Bar. A search button, then Home, Orders, Products and Menu in a pill, then an assistant button.

The other tabs work too. Orders lists five orders numbered down from #1284, each with its total, time, customer, status badges and item count; tap one for its own page, with the customer, the item and the payment. Products lists five products, each with a colour swatch, its stock and price and an Active or Draft badge. Menu lists the rest of a store admin under the store’s name, for show.

Setting the figures

The editor groups its fields the way the app reads — Header, Sales, Stats, Tasks, Chart, Orders and Products — and every figure on Home is either one you type or one worked out from them. Average order value is total sales divided by orders, and conversion rate is orders divided by sessions, so the row of figures can’t contradict itself; their changes are worked out the same way, from the three change fields you type. The guide to filming the dashboard goes into why that matters on camera.

For a mockup, work backwards from the one number the image is about. Say it’s a homeware store that sold $24,860.35 today. Homeware baskets run larger than T-shirts, so aim for an average order around $70: 350 orders gives $71.03. Then choose sessions for a conversion rate in the low single digits — 13,462 sessions shows 2.6%. That’s three typed numbers, and all five figures agree.

Details a still image gets checked on

A picture can be paused, zoomed and passed around, so the small print gets read.

• Order numbers. On the Orders tab the newest order takes the Latest order number and each row below counts down by one. The default is 1284, the same as the default orders today, which only works if every order the store has ever taken came in today. For an established store, set it far above today’s count: a year at 350 orders a day comes to 127,750 orders. Order numbers print without a thousands separator, because they’re identifiers rather than amounts.
• The task cards against the orders. Orders to fulfill and Payments to capture set the two cards on Home, and the first should be at least the number of orders marked Paid · Unfulfilled on the Orders tab: a card reading 1 Order to fulfill over two unfulfilled orders contradicts itself. Set either count to 0 and its card disappears.
• New rows. Row #1 in the editor’s Orders list is the newest order. A row added with + add row arrives at the bottom of the list, as the oldest order: $60.00 from Customer for Product, 2m ago, Status Paid (shown as Paid · Fulfilled), so rename it before you export. Orders holds up to eight rows, and so does Products.
• Prices that match. An order’s own page divides its amount by the quantity at the end of the item — the ×2 in Signature Hoodie ×2 — and shows a price each, so keep it in step with that product’s price on the Products tab. The defaults agree: $178 for two hoodies at $89.

Shaping the chart

Sales by hour appears in the editor as a row of twelve bars, running from midnight on the left to late evening on the right, each covering about two hours. Drag a bar up or down to reshape the day. The bars respond to a mouse, so do this part on a computer. On screen, the chart for total sales — and for sessions and orders — is the day’s figure broken up by those bars, with an axis that rescales itself to fit: you’re setting a shape, not dollar amounts.

The default has a real day’s rhythm: almost nothing overnight, a bump around lunch, a dip through the afternoon, a peak in the evening and a fall before midnight. Under the bars sit two shortcuts. The trend up button draws a line that climbs all day, which reads more like a running total than sales per hour. The randomize button gives every bar a random height and loses the overnight lull, which is the first thing that makes a sales chart look measured rather than drawn. Use either as a starting point, not a finish.

There’s no comparison line. The change against the period before is printed under each figure instead, from the change fields — ↗ in green when it’s up, ↘ in red when it’s down — and conversion rate and average order value don’t follow the bars at all: charted, they wander around their average.

Matching it to your design

Two colour fields change the look. Chart line, #2b9fdb by default, colours the chart and the letter tile that stands in for a logo. Background, white by default, colours the sheet under the header; the header itself stays near-black whatever you choose. Choose a dark background and the text turns white, the cards and the bar darken and the status badges switch to lighter tones so they stay readable.

Currency switches between USD $, EUR €, GBP £ and IDR Rp. It changes the symbol only, so retype the figures if the new currency needs different ones. The store name sits in the header and titles the Menu tab, so it will be read: invent one rather than borrowing a real shop’s. The same goes for Store logo — upload artwork of your own, or leave it to the letter tile.

Exporting the image

At the bottom of the editor’s settings, under the button that publishes the app, sits Export PNG (3x). It saves the screen exactly as the preview shows it — the app itself, without the phone frame around it — as storefront-mockup.png, at 960 by 2,079 pixels: three times the 320 by 693 screen the template is drawn at. That’s enough to fill the full height of a 1280 by 720 thumbnail with plenty to spare, or to drop into a device frame of your own.

“Exactly as the preview shows it” includes the mark. Unless you’re signed in on Pro, the preview carries the same SIMULATED · POZER.COM mark as a free published app, set as fine print under the chart on Home, under the filter chips on Orders and Products and under the order number on an order’s page; on Menu it floats above the bar as a small pill, and the export carries it too. Pro, at US$12.99/mo, previews and exports a clean screen.

The preview is live, so one set of figures gives you more than one image. Tap the Today pill and Home moves to Last 7 days, figures, changes and chart together; tap a figure to chart it instead; tap Orders or Products in the bar, or open an order. Export after each and you have a matching set. Reset values puts every field back to its default when you want a clean start.

The editor holds your work only while the tab is open. Close it without publishing and the fields go back to the defaults, so export before you leave. Publish, and the app keeps your figures; from then on you change them from the app itself.

Using it in a thumbnail or a slide

Use it on the thumbnail of a skit or a clearly labelled concept, never on a video that presents the figures as a real store’s sales: that is the misuse our acceptable use policy bans, however small the image.

At thumbnail size, the selected figure — total sales, unless you tap another — is often the only thing anyone reads: it’s the largest type on Home. So choose it first and let everything else follow from it. Show the whole screen, tilted in a hand or set into a device frame, rather than a tight crop: the header, the chart and the cards read as texture around the figure, and they’re what make it look like software rather than a number on a card. The change under the figure brings its own colour, green with ↗ for up and red with ↘ for down, which carries at sizes where the digits don’t.

For a slide or a UI concept, use the whole screen and label it as a concept. In a portfolio, say what it is: a mockup of a store dashboard, with invented figures.

When the phone has to be in someone’s hand — scrolled, tapped, filmed from a few angles — a picture stops being enough. Publish the same dashboard and install it: the template page shows it running as an app.