8 things a live template preview should prove before you pay

A live preview is the only part of a template listing you can test. Screenshots and feature bullets describe the template, while the preview lets you click, resize and break it before any money changes hands.

Scrolling the homepage once is not much of a test. The eight checks below take a little longer, and they cover the problems that are hardest to fix after you have bought the template and started moving your content in.

1. It holds together at every width

Open the preview on a laptop and drag the browser window from full width down to phone size, slowly. Watch the in-between widths as well as the obvious ones. Tablets in portrait and small laptops are where navs overlap the logo, cards squeeze into one awkward column and headlines break onto four lines.

Then open the same URL on your actual phone. A resized desktop browser is a good first pass, but touch targets, the mobile menu and anything that depends on hover only show their real behaviour on a phone.

2. Every page in the nav actually exists

Click every link in the header and the footer. Some previews are a polished homepage with a handful of placeholder links behind it, and you only find out when "Pricing" scrolls back to the top or "Blog" goes nowhere.

Make a short list of the pages your site needs at launch, such as pricing, about, contact, a blog index, a single post, legal pages and a 404, and tick off which ones the preview shows. Every page you have to design yourself is time the template was supposed to save.

3. The layout survives real content

Template demos use copy that fits perfectly: three-word headlines, testimonials of equal length, a logo strip of companies with tidy names. Your content will not be that neat.

You cannot type into a preview, but you can look for places where the designer has been forced to deal with real-world length. Open a blog post with a long title. Look at a card grid where one card has more text than the others and see whether the buttons still line up. Check the pricing table for a plan with a long feature list. If every block in the demo is the same size, assume you will be the one finding out what happens when it is not.

4. It loads quickly on an ordinary connection

Your own connection and laptop flatter every site. Open your browser's developer tools, turn on network throttling for a slower mobile connection and reload the homepage. Watch how long the hero takes to appear and whether the layout jumps as fonts and images arrive.

You can also run the preview URL through PageSpeed Insights. The score is only a rough signal, since the preview may sit on different hosting than your final site, but large unoptimised images or a pile of scripts on a simple page will show up either way.

5. The interactive parts work

Find every element that is supposed to do something and use it. Open and close the mobile menu. Switch the pricing toggle between monthly and yearly and check that the numbers change. Open the accordions, click through the tabs, play the video and submit the contact form with an empty field to see whether it shows an error.

A form that looks right but goes nowhere is common in demos. Check the template's docs for how forms are meant to be connected, so you know whether it is a setting to fill in or a job for a developer.

6. You can use it with a keyboard

Click into the address bar, then press Tab repeatedly and move through the page. You should always be able to see where you are, reach the nav and the main buttons, and open and close the menu without a mouse. If the focus outline disappears or gets trapped inside a component, keyboard users will hit the same wall on your live site.

While you are there, check that body text is easy to read against its background, especially light grey text on white and anything placed over an image. The WebAIM contrast checker will tell you whether a colour pair passes.

7. The blog and CMS pages are real templates

If you plan to publish, the blog matters more than the hero. Open the blog index, then a single post, then go back and look for categories, tags or pagination if the template claims to have them.

Inside a post, look at how the template handles the things writers actually use: subheadings, lists, links, block quotes, images with captions and code blocks if you write about technical work. A post page that only styles paragraphs will need work the first time you publish anything longer than a press release.

8. The preview matches what you download

The preview should be the same template you receive, built on the same stack, with the same pages. Read the listing for the framework or tool it uses, whether that is Framer, Next.js, Astro or a Figma file, and make sure it matches what you can run and edit.

Some things a preview cannot show, like how the code is organised, how the Figma layers are named or how setup works. For those, look for documentation, a changelog and a clear answer on updates. If the listing is vague about what is included, ask before you buy.

Run the checks on every template you shortlist

Doing all eight on two or three shortlisted templates is the fastest way to see the differences between them, because the gaps tend to show up in the same places: mid-size screens, long content and the pages behind the homepage.

Every Pixels71 template has a live preview you can open, resize and click through before you buy, and our post on SaaS landing page patterns covers what to look for in the layout itself. If you are weighing a Framer template in particular, our list of Framer template buying mistakes goes deeper on licences, plans and the CMS. If you expect to use more than one template, the All-Access Pass is $99 once and includes future templates.