itch.io project pages are designed to be as non-obtrusive and flexible,giving control to the creator to display their content however they want.Unlike other traditional stores, we don’t force unrelated content on yourpages, so you have plenty of space for your project’s presentation.
In order to get the most out of itch.io we recommend you spend some time withour theme editing tools to make something that matches the style of your gameor project. When we look for content to feature or promote, we like to seeprojects that participate in the culture of itch.io by extending the experienceof their game to their itch.io page.
Project pages can come in two varations: asingle column and atwo column mode.For downloadable projects, the two column mode is enabled by default. Itdisplays your screenshots and video on the right, with your project’s maincontent on the left. For HTML5, and other embedded content, we default to asingle column mode that hides the screenshot column. Regardless of the default,you can swith to the alternate variation from the theme editor to fit youtaste.
If you're not using the screenshots column on your project page, then wehighlight recommend you still find a way to show images for your project. Youcan do this by embedding images into your description.
The primary column of your project page includes the following sections:
Your page’s description is how people learn about your project, so it’simportant to be complete and informative. Here are some ideas to get youstarted:
You can edit the description in theEdit game form. To create different textsections, use theHeader 2 style for titles, they'll appear likesite-generated headers likePurchase,Download instructions, etc.
On the page of any project you're allowed to edit you'll find anEdit Themebutton on the top of the page. Clicking it will open the interactive themeeditor.
From there you can change things like:
For some inspiration on designing your own page, here’s a collection ofprojects that have interesting page designs:Cool GamePages.
Here are some tips for using the different components:
Four elements make up the color scheme of any itch.io project page.
TheBG color is the background of the entire page, whereas theBG2color appears on the column where the content of the page is. You can controlthe opacity of the column with theBG2 Alpha located in theMore optionsarea under the color controls
Other colors you can change includeText for the color of regular text, andLink for the color of hyperlinks and buttons. You can use theButtonscolor to set a color for buttons separate from links, andHeaders color tochange how the page headers appear.
The banner is probably the most important graphic part of your page as it’sthe first thing new visitors set their sights on. It can be a semi-transparentPNG, it could be an animated GIF (some particle effects around the titleletters?). Let your imagination run a little.
When a banner is uploaded to an itch.io page, it replaces the title otherwiseshown just above the description.
The background is more subtle, but it can achieve cool effects, see for examplehowthis page uses avertically-repeating background to create styled column.
You can customize the font of your page, and separately the font of only thepage headers from the dropdowns located in theText section on the themeeditor.
In addition handful of presets, we make available every font that is onGoogleFonts. There are a few thousand fonts to choosefrom so we recommend browsing on theGoogle Fontswebsite so you can preview types and theirpairings.
TheLayout section of the theme editor lets you control the overall layoutof the page.
Screenshots:
If you'd like to customize both your pages beyond what the theme editor allows,you can simplyget in touch with us and ask for custom CSS to beenabled for your account. In your message please include the list of changesyou intend to make.
If we see many people making the same custom CSS customizations then we maymake the option available in our theme editor.
For some ideas on how you might use CSS, here’s a collection of interestingpages:CSS Showcase.
Especially for games, we highly recommend people provide a link to video fortheir game.
YouTube,Vimeo, andSketchFab links are supported. The video playeris shown above the screenshots, in the secondary column. This is a good placeto put a trailer or any other form of short presentation or promotion for theproject.
Adding a video to a project page enables theWatch trailer button one canuse from the pop-over in grid listings (ie. the various browse pages ofitch.io).
Make sure that the video you embed is publicly accessible! In fact,checking your page using theIncognito mode of your browser is alwaysa good idea.
All project pages areresponsive, they dynamically adjust to the width of thescreen to stay usable on a variety of devices. If you're making heavycustomizations to your page we recommend to check that your page displayscorrectly at smaller resolutions by shrinking your browser window or using yourbrowser’s mobile developer tools.
From the Metadata panel on your project editor you can provideExternallinks: a list of links that point to your project or any information aboutyour project on other websites. At the moment, the links you add are displayedon the download page for your project, but we'll likely add them in moreplaces. You can provide links to places like:
Along with generic items likeSupport,Community, andHomepage.
Follow itch.io onTwitter,Facebook orJoin our Discord for new games and site updates.
