Creating Preview Images

Your template’s marketplace listing is the first thing potential buyers see. High-quality preview images significantly impact sales.

Thumbnail requirements

Every template must include a thumbnail image, set as preview.thumbnail in your manifest (conventionally preview/thumbnail.png):

The thumbnail is displayed in the marketplace grid at various sizes (from cards to full-width previews). Design it to look good at both small and large scales.

Screenshot recommendations

In addition to the required thumbnail, include at least one and up to 6 screenshots in your manifest’s preview.screenshots array. These appear in the template detail page on the marketplace.

What to capture

1. Home page (desktop) — full-width hero section and below-the-fold content
2. Home page (mobile) — show the responsive layout works beautifully
3. About page — demonstrate the content layout
4. Dark mode variant — show the alternate colour scheme
5. RTL variant — demonstrate Arabic or Persian layout
6. A detail page — blog post, service detail, or schedule

How to capture

• Use Chrome DevTools device mode for consistent viewport sizes
• Desktop screenshots: 1440 × 900 viewport
• Mobile screenshots: 375 × 812 viewport (iPhone SE dimensions)
• Capture the full viewport — no browser chrome
• Use the SDK’s mock data for realistic-looking content

Image quality tips

• Ensure text is crisp and readable at the thumbnail size
• Use the template’s real colour scheme — don’t enhance or filter
• Show realistic content, not “Lorem ipsum” text
• Fill the page with enough content to showcase the layout
• Capture at 2× resolution if possible (Retina), then resize to target dimensions

What makes a good marketplace listing

Do

• Show the template populated with realistic personal trainer content
• Demonstrate both light and dark modes
• Include mobile screenshots to show responsive behaviour
• Use varied content (images, text, cards) to showcase layout versatility

Don’t

• Use placeholder text (“Lorem ipsum”) in screenshots
• Show empty or skeleton pages
• Apply filters or colour grading that misrepresents the template
• Use low-resolution or blurry images
• Crop screenshots in confusing ways

File naming

preview/
├── thumbnail.png              # Required — main listing image
├── screenshot-home.png        # At least one screenshot is required
├── screenshot-mobile.png      # Optional — mobile view
├── screenshot-dark.png        # Optional — dark mode
├── screenshot-rtl.png         # Optional — RTL layout
└── screenshot-about.png       # Optional — about page

Reference these in your manifest:

{
  "preview": {
    "thumbnail": "preview/thumbnail.png",
    "screenshots": [
      "preview/screenshot-home.png",
      "preview/screenshot-mobile.png",
      "preview/screenshot-dark.png",
      "preview/screenshot-rtl.png",
      "preview/screenshot-about.png"
    ]
  }
}