Customizing your game storefront

Complete list of assets

• Background media (video or image)
• YouTube game trailer or teaser
• Screenshots (we recommend at least 3–4)

Background artwork best practices

USING AN IMAGE

The right image can really sell your game. When possible use specially created artwork for this purpose, as a screenshot might not be suitably formatted for Kartridge. Here are some tips and guidelines on choosing your background image:

• For screenshots, ask yourself, “If I could only show one instant from my game, would it be this one?” If the answer is yes, then you’ve found your background.
• If you’re using promotional art, make sure it gives players a real sense of the tone and style of your game.
• Remove any distracting elements like game UI and text.
• For best results, use a 1,920px by 1,080px image.
• Make sure all the important visual information is in the center of the image, as the rest can be obstructed.

USING A VIDEO

While you have the option of using a static image, we strongly recommend using a video, as they are more engaging and give players a better sense of your game. You can think of it as a bonus trailer that takes up most of the page.

Here are some tips to make the most of your background video:

• Use gameplay footage, either in long clips or short highlights, to give users a quick taste of what your game is actually like.
• Cinematic trailers are also quite effective; just remember they need to work without any text or audio.
• Make sure all the important visual information is in the center third of the image, as the rest can be obstructed.
• Make sure to upload a 1080p file so your video looks crisp and clean.
• Remember, the video will loop, so feel free to take advantage of that by creating a video that loops seamlessly, either through consistent transitions or by making it match.

Picking screenshots

Choose screenshots depicting a variety of aspects of your game. Aside from showing off all your hard work, it’ll show players how deep and diverse your game really is. Just beware of including screenshots that are spoilers.

You can upload as many screenshots as you want, but we recommend six as a good number. It shows a variety while being few enough that a user is likely to look through them all. If you have more than six screenshots that you’d like to show, we just recommend you include them as a second gallery lower down.

Formatting text with Markdown

The text pods on the game storefront utilize a wide array of Markdown features for text formatting. Here’s a quick primer for those who are new to Markdown:

HEADINGS

## Heading level 1
### Heading level 2
#### Heading level 3
##### Heading level 4
###### Heading level 5

INLINE STYLING

Link:

[link text](https://www.kartridge.com/)

Image:

![alt text](https://www.site.com/image.jpg)

Note: Images will be scaled to the width of the column. Height is scaled proportionally.

Bold:

**bold**

Italic:

*italic* or _italic_

Inline elements can be combined together. For example you can make text that is **_bold and italic_**. You just need to make sure your syntax matches from the inside out:

Valid:

_**this is fine**_, **_so is this_**

Invalid:

**_don't do this**_

One useful combination you will see on Kartridge is to combine a header with an image to make a semantically valid heading. That would be written like this:

## ![Heading text as Alt text](https://www.linkto.com/image.jpg)

LISTS

Bulleted List

- Bulleted list item
- Bulleted list item
  - Nested bulleted list item
- Bulleted list item
  Multi-line content

Numbered List

1. Numbered list item
2. Numbered list item
  1. Nested numbered list item
3. Numbered list item
  Multi-line content

TABLES

| Header | Header | Header |
|--------|--------|--------|
| Cell   | Cell   | Cell   |
| Cell   | Cell   | Cell   |

QUOTES

> The body of a quote goes here.
> > They can even be nested
> They also can be multi-line.

Organizing your content

You can arrange the content on your page in whichever way you desire. As a starting point, here’s the way we often do it:

1. Video pod: Game teaser or trailer
2. Text pod: Short description (about the length of a tweet)
3. Gallery pod: Small gallery of 3–6 screenshots
4. Text pod: In-depth game information and features.
5. Gallery pod: Large gallery of images (if you have more)

Choosing the right color palette

Which colors work best will depend on a variety of factors. Because of this we recommend finalizing your color palette after you’ve settled on your background artwork and added any trailers or screenshots.

A good starting point for choosing a color palette is to generate one using your game icon and screenshots. Then you can fine-tune it to better suit your game.

Here are some tips on how we feel you can choose the best color palette possible:

Swatch	Where it's Used	Best Practice for Choosing Yours
A	Main Navigation Color	Either a bright vibrant color that’s very eye-catching or a more muted color that matches with your chosen background artwork. ​​Note that the main navigation icons will automatically switch between black or white depending on your choice.
B	​​Game title background gradient and main background color	​​Use this color to ensure your game name is legible. Often the best choice is to choose a color that is very similar to the overall tone of your background. Alternatively, use a contrasting color to create an interesting highlight effect.
C	Game title color	​​Choose a color that directly complements your background artwork. If it’s dark, go bright; if it’s very light, go very dark. When in doubt err on the side of increasing legibility. You usually can’t go wrong with either black or white.
D	Content column background color	There are multiple directions you can go with this color. For instance, you could choose something that more closely matches your background artwork to give the page a more cohesive feel. Or you might choose a stronger, contrasting color that better conveys the attitude of your game. Feel free to experiment, but remember you also want to make sure any text in the column is legible.
E	Content column text color and tab text color	Contrast is the name of the game, the more the better. You should be optimizing for clarity and legibility.
F	Content column highlight color (tab highlight, text headings, links, screenshot highlight)	Choose a color that is the inverse of what you chose to do for the content column color. If you went bright and bold with Swatch D you can go more muted here. Likewise, if you went more subdued with Swatch D, now’s the time to choose something bright and striking.

Please contact [e-mail] with any questions.