How the Online Editor Works: A Step-by-Step Overview

31 min read 6,017 words

Whether you're a designer building a DeFi app prototype, a content creator explaining blockchain concepts, or a developer putting together a pitch deck, having realistic crypto wallet UI mockups makes your work look polished and professional. This guide walks you through how to use an online screenshot template editor to create Phantom wallet-style mockups — no Photoshop, no coding required.



The crypto and finance template library covers:

  • Token transfer confirmation pages
  • Transaction history layouts
  • Blockchain app onboarding screens
  • USDT and stablecoin transfer receipts

How the Online Editor Works: A Step-by-Step Overview

Using Zoobic's browser-based mockup editor follows a straightforward workflow:

Step 1 — Browse and Select a Template Use the left-side category panel to filter by "crypto," "wallet," or "blockchain." The keyword search bar lets you narrow results further. Preview thumbnails update in real time as you scroll.

Step 2 — Open the Form Editor Step 3 — Edit Your Fields Type directly into the form fields. Changes reflect instantly in the left-side live preview. For a Phantom wallet-style mockup, you'd typically update:

  • Token symbol (SOL, USDC, or custom)
  • Transaction amount and direction (sent/received)
  • Date and time stamp
  • Network confirmation status

Step 4 — Adjust Status Bar Details Zoobic's status bar editor lets you set the device time, battery percentage, signal strength, and toggle dynamic island visibility — details that make a mockup look like an authentic app screenshot rather than an obvious template.

Step 5 — Export as PNG

Editing Crypto Transaction Fields in Detail

Amount fields — Set the primary token amount and its fiat equivalent. For builder code revenue demonstrations, showing a SOL balance alongside a USD conversion helps audiences understand the value at a glance.

Transaction labels — Swap default labels like "Transfer" or "Receive" with custom strings: "Builder Fee Received," "Referral Credit," or any label that fits your presentation narrative.

Network and gas fields — Some templates include network name and fee display areas. Update these to reflect Solana network conventions if you're building a Phantom-specific mockup.

Confirmation status — Toggle between pending, confirmed, and failed states to illustrate different transaction outcomes in educational or demo content.


Status Bar Customization for Realistic Mockups

One detail that separates a convincing app screenshot template from an obvious mockup is the status bar. Zoobic gives you full control over:

  • Time display — Set any time to match your scenario
  • Battery icon — Percentage and charging state
  • Signal bars — Carrier signal and WiFi indicator
  • Dynamic Island — Toggle on or off for iPhone 14 Pro and newer frame styles

For blockchain app presentations, having a status bar that matches the rest of your slide deck's visual language keeps the audience focused on the content rather than distracted by mismatched UI details.


Web3 Product Designers — Rapid prototyping for investor decks and user flow presentations. Instead of building a full interactive prototype, a set of PNG mockups from an online editor communicates the UX clearly and quickly.


Accessing Templates: Browser-Based, No Install Required

Zoobic runs entirely in the browser. Go to app.zoobic.com.ph, log in with your licensed account, and the full template library is available immediately. There's no desktop app to download, no mobile app dependency, and no compatibility issues across operating systems.

The template library is organized so crypto and finance templates are easy to locate:

  • Use the left sidebar category tree to expand "Crypto" or "Finance"
  • Use the search bar with terms like "wallet," "transfer," "blockchain," or "Solana"
  • Filter by device frame (iOS, Android, generic) to match your target audience's platform

Licenses are purchased through zoobic.com.ph and activated with an authorization code, which unlocks HD PNG export and removes usage caps on the template library.


Exporting and Using Your Mockup

Once your screenshot template is edited and the status bar is configured, exporting takes two clicks:

  1. Click the Export button in the top-right of the editor The exported file is high-definition, suitable for:
  • Embedding in Google Slides or PowerPoint presentations
  • Uploading as social media graphics
  • Including in Notion docs or Confluence pages
  • Using as UI reference images in Figma files

Because the output is a flat PNG, it drops into any workflow without compatibility issues.


Tips for Creating Convincing Phantom Wallet-Style Mockups

Keep transaction amounts realistic — For educational mockups, use round numbers or amounts that clearly read as examples. This keeps the context clear: the mockup is for learning and demonstration purposes only.

Layer multiple screenshots — A single balance screen tells one story. A sequence — balance view, send confirmation, transaction complete — tells a complete user flow story. Zoobic's template library has screens for each stage, so you can build a full walkthrough using the online editor without switching tools.


Compliance Note

All mockups created through Zoobic's online screenshot template editor are intended for entertainment, education, and research purposes only. Use your exported PNG files for app demos, presentations, and content creation within applicable guidelines.


Getting Started with Zoobic for Crypto Mockups

  1. Visit zoobic.com.ph to purchase a license and get your activation code
  2. Open app.zoobic.com.ph in your browser
  3. Activate your account with the code
  4. Search "crypto" or "wallet" in the template library
  5. Select a template, edit your fields, set the status bar, and export PNG

Zoobic is an online mockup and screenshot template editor for designers, educators, and content creators. All templates are for demonstration and learning research use only.