For Website Developers

Listing Your Site as a Template

Why and how to publish your site as a starting point in the theme gallery

Listing Your Site as a Template

Why publish a template

Listing a site as a template makes it a starting point others can fork when they create a new site on the platform. A few reasons it's worth doing:

  • Reuse your own baseline. A template is a fast way to start your next site, or a client's, from something you already trust instead of from scratch.
  • Your demo stays attached to it. Every gallery card links to your live site via View demo, so anyone browsing the gallery sees the real thing, with your name on it.
  • Wider reach. Your design shows up beyond the one site you built it for, in front of everyone starting something new.

If you want to list one, the rest of this page covers how a card is built and how to submit your site for review.

How a card is built

When someone creates a new website, they pick a starting point from a gallery of themes. Each gallery card shows a thumbnail, a title, a description, and a View demo link to your live site.

You don't author anything special for this. The card is built from your homepage's OpenGraph tags — the exact same og:title, og:description, and og:image a social app reads when someone shares your link. If your site previews nicely when pasted into a chat or social post, it'll look right in the gallery too.

A platform admin flips the switch that adds your website to the gallery once it's ready; your job is just to make sure those tags are good.

How it works

On every live publish, the platform reads your published homepage and pulls three tags:

OpenGraph tag Becomes… If missing…
og:title Card title Your website's name
og:description Card description Left blank
og:image Card thumbnail A shared placeholder image

That's it — no extra file, no config block, nothing in the dashboard. Improve your social-share preview and your gallery card improves with it.

Make sure the tags are present

If you build on Minima (the default theme), OpenGraph tags are generated for you by jekyll-seo-tag from your _config.yml. Set these and you're most of the way there:

# src/_config.yml
title: "Bistro"
description: "A warm one-page site for restaurants and cafés."
image: "/assets/og-image.png"   # used as og:image

To check what your site actually emits, view the built homepage source and look in <head> for:

<meta property="og:title" content="Bistro">
<meta property="og:description" content="A warm one-page site for restaurants and cafés.">
<meta property="og:image" content="https://your-slug.r2ware.app/assets/og-image.png">

If you're not using jekyll-seo-tag, add those three tags to your <head> yourself. og:image should be an absolute URL (most themes use Liquid's absolute_url filter to produce one).

Creating a share image

Your og:image doubles as the gallery thumbnail, so a screenshot of your homepage works well. You can capture one with Playwright, which drives a real Chromium browser so the shot matches what visitors see (Node.js required):

# One-time: download the Chromium browser Playwright drives
npx -y playwright install chromium

# Capture the screenshot (wait 2s for any intro animations to finish)
npx -y playwright screenshot --viewport-size=1280,800 --wait-for-timeout=2000 https://your-slug.r2ware.app/ og-image.png

The install step only needs to run once per machine — skip it on later captures.

Letting animations settle

The CLI takes the shot as soon as the page loads, so any scroll-in or fade-in animations (common in hero sections) may not have run yet — you'll get a frame with the text still invisible or shifted. There's no flag that auto-detects this, so you tell Playwright when to shoot. Two options:

  • --wait-for-timeout=<ms> — wait a fixed time after load (the 2000 above is a safe default; bump it if your intro is slow).

  • --wait-for-selector=<css> — more precise: wait until a specific element is visible before shooting. If your theme adds a class when an element finishes animating in (Minima-derived themes use .reveal.in), wait for that:

    npx -y playwright screenshot --viewport-size=1280,800 \
  --wait-for-selector=".reveal.in" \
  https://your-slug.r2ware.app/ og-image.png

If your homepage has no animations, you can drop the wait entirely.

Commit the image into your assets folder and point image: at it:

mv og-image.png src/assets/og-image.png
git add src/assets/og-image.png

A couple of sizing notes:

  • Social platforms generally recommend 1200×630 for og:image. That works fine.
  • The gallery card slot is 16:10, so a wider og:image is cropped from the top to fit. Keep your key visual near the top of the image.

Publish and verify

Commit your changes and publish a live build:

git add src/_config.yml src/assets/og-image.png
git commit -m "Improve homepage OpenGraph tags"
git push

After the live build completes, confirm the tags resolved:

  1. Paste your live URL into any link-preview tool (or a chat app) — the title, description, and image it shows are exactly what the gallery will use.
  2. Open your og:image URL directly to make sure it loads.

Once that preview looks right, head to Submit a Template and fill out the form. An admin reviews it, enables it, and your card appears in the create-a-website gallery.