Instructions

Using the Happy website template.

Getting started

Thanks!

First off — thanks for purchasing the Happy Template. We sincerely hope that it'll be a great starting point for the marketing site for your app!

Below you'll find instructions on how to make sure your screenshots look great, as well as how to add a Smart App Banner to your site.

Good luck and don't hesitate to reach out to us if you need help.

App Screenshots

The beauty of the Happy Template is that it is super simple to make your app screenshots look great. Instead of having to embed the images in a phone mockup using Photoshop, you can simply upload the screenshots into the existing objects and the template will make sure to overlay the correct images to make the screenshots look great.

Image requirements

  • iPhone X, Xs, 11 Pro, or 12 Pro Screenshot
  • Width: 1125px
  • Height: 2536px

Guide

Select the screenshot you want to change.
Make sure that Phone Screenshot is selected in the Navigator.
Click Replace Image and choose your screenshot.

Smart App Banner

Example Smart App Banner

In order to add a native Smart App Banner, go to App Store Marketing Tools and find your app. The 9-digit number after "id" in your apps URL is your App ID. Use the App ID like this:

<meta name="apple-itunes-app" content="app-id=YOUR_APP_ID>

Paste this code into your site's custom head code. See this tutorial on Webflow University if you're unsure about this step.

Typography

If you want to change the typography of your site, simply click a text element below (for example, H4), then select "All H4 Headings" in the Selector and make your changes. The changes will affect all elements of that type on the entire site. Check the Typography class in Webflow University if you're unsure about how to do this.

H1

Lorem ipsum dolor sit amet

H2

Lorem ipsum dolor sit amet

H3

Lorem ipsum dolor sit amet

H4

Lorem ipsum dolor sit amet

H5
Lorem ipsum dolor sit amet
H6
Lorem ipsum dolor sit amet
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Block Quote
Lorem ipsum dolor sit amet
Text Link
Lorem ipsum
Button
View Project

Colors

If you want to change the colors of your site, simply click a color block below (for example, the blue block below "Brand Color 1"), then click the coloured square under Backgrounds to bring up your Color Swatches. Clicking the pen next to a color will allow you to change the global swatch, which will affect all instances of that color on the entire site. If you're unsure about this, check the Color Class in Webflow University.

Brand colors

BRAND COLOR 1
BRAND COLOR 2
BRAND COLOR 3
BRAND COLOR 4
BRAND COLOR 5
BRAND COLOR 6

Text colors

Text Dark
Text LIght

Grays

Gray 1
Gray 2
Gray 3
Gray 4