🤑 Indie game store🙌 Free games😂 Fun games😨 Horror games
👷 Game development🎨 Assets📚 Comics
🎉 Sales🎁 Bundles

Designing your page

Layout

itch.io project pages are designed to be as non-obtrusive and flexible as possible, under the total control of the creator for them to display their content however they want.

By default, they're organized in two columns: the main one, on the left, contains the project’s title. If a banner image is uploaded, it replaces the title and is displayed above both columns.

The left column also contains the full description, install instructions if any, the purchase section, demo downloads if any, and the comments if it’s enabled. As for the right column, it contains the video (if any) and the screenshots.

In the case when no screenshots have been uploaded, the project’s cover image is shown instead.

What to put in the description

Your page’s description is how people learn about your project, so it’s important to be complete and informative. Here are some ideas to get you started:

  • A Credits section with everyone who participated to the project
  • Contact information for your fans / buyers
  • If it’s a digital project, minimum and recommended specs to run it
  • A list of controls and supported input devices
  • A quick summary of the story, if any
  • A list of features if your project is a tool or a game
  • If the project is still in development, its current status and what’s planned for it.
  • A list of links where fans can find out more about your project

You can edit the description in the Edit game form. To create different text sections, use the Header 2 style for titles, they'll appear like site-generated headers like Purchase, Download instructions, etc.

The itch.io theme editor

On the page of any project you're allowed to edit you'll find a series of settings links on the top of the page. The Edit theme link will open up itch.io’s theme editor.

From there you can change things like:

  • Background, text, button colors
  • Header image
  • Background images
  • Fonts
  • Embedded video

Read on to learn about each of the components.

Changing the color scheme

Four elements make up the color scheme of any itch.io project page.

The Background color appears on each side of the inner column, whereas the Background 2 color appears in the column itself. The Text color is pretty self-explanatory, and the Links color affects not only actual links but also buttons (Buy Now, Download, View bundle, etc.)

The color picker lets you choose the hue (using the circular picker), the saturation (horizontal axis in the square picker) and the luminosity, vertically.

Images: banner & background

The banner is probably the most important graphic part of your page as it’s the first thing new visitors set their sights on. It can be a semi-transparent PNG, it could be an animated GIF (some particle effects around the title letters?). Let your imagination run a little.

When a banner is uploaded to an itch.io page, it replaces the title otherwise shown just above the description.

The background is more subtle, but it can achieve cool effects, see for example how this page uses a vertically-repeating background to create styled column.

Font face and size

itch.io has five fonts available by default:

  • Serif is the default Serif font of your browser
  • Sans-serif is the default Serif-less font of your browser
  • Pixel is a low-resolution web-font (in the vein of the 8-bit aesthetic)
  • The Anonymous Pro font has a typewriter look
  • Lato is a sans-serif webfont used throughout the itch.io website

You can pick from four different sizes, Small, Medium, Large and Very large – make sure to choose the right size depending on the length of the description and the size that screenshots take.

With custom css support, it’s easy to use any of the fonts up on Google Fonts using the following CSS snippet:

@import url(https://fonts.googleapis.com/css?family=Special+Elite);

.main * {
  font-family: "Special Elite";
}

Simply replace Special Elite with the font of your choice, both in the font-family directive and the import URL (where spaces are replaced by plus signs).

Video URL / Trailer

Whereas screenshots are uploaded from the Edit game page (see the Getting started guide), videos are added by clicking Edit Theme on your project page.

Both YouTube and Vimeo links are supported. The video player is shown above the screenshots, in the secondary column. This is a good place to put a trailer or any other form of short presentation or promotion for the project.

Adding a video to a project page enables the Watch trailer button one can use from the pop-over in grid listings (ie. the various browse pages of itch.io).

Make sure that the video you embed is publicly accessible! In fact, checking your page using the Incognito mode of your browser is always a good idea.

Custom CSS

If you'd like to customize both your user and project pages beyond what the theme editor allows, you can simply get in touch with us and ask for custom CSS to be enabled for your account. In your message please inlcude the list of changes you intend to make.

Mobile web pages

All project pages are responsive, they dynamically adjust to the width of the screen to stay usable on a variety of devices. If you're making heavy customizations to your page we recommend to check that your page displays correctly at smaller resolutions by shrinking your browser window or using your browser’s mobile developer tools.

From the Metadata panel on your project editor you can provide External links: a list of links that point to your project or any information about your project on other websites. At the moment, the links you add are displayed on the download page for your project, but we'll likely add them in more places. You can provide links to places like:

  • Kickstarter
  • Twitter
  • Steam Greenlight
  • Ludum Dare

Along with generic items like Support, Community, and Homepage.