FREE SHIPPING OVER $75 · USE CODE 1UP FOR 10% OFF YOUR FIRST ORDER
FOR TEMPLATE OWNERS · VERSION 1.0
Template
guide
Everything you need to make Game Over yours: brand, content, pages, checkout and publishing. Each chapter is a short checklist you can follow inside Framer.
00
Getting started
The template ships with 13 pages, 7 CMS collections and sample content for a retro game store with an arcade bar. Replace the content, keep the structure, publish.
1
Duplicate the template into your workspace from the Marketplace page. Work in the copy, never the original.
2
Set your brand: swap the logo and adjust the color and text styles (chapter 01).
3
Replace the sample content in the CMS: games, legends, events and journal posts (chapter 02).
4
Connect checkout so the Add to cart buttons take real orders (chapter 04).
5
Check tablet and phone, fill in SEO and publish (chapters 06 and 07).
Pages included · click to preview
01
Colors, fonts & logo
Every color and text size in the template is a shared style. Edit a style once in the Assets panel and every page, component and breakpoint updates with it.
Color styles
Night
#0A0B14
Page background
Surface
#13152A
Cards and panels
Deep
#07080F
Footer, CRT screens
Ink
#F4F1E8
Text, outlines, hard shadows
Body
#C9C8D6
Paragraphs
Muted
#A6A8BF
Secondary text, labels
Player Green
#4DF59B
Primary buttons · Sport
Arcade Pink
#FF3DA5
Sale, deals · Fight
Coin Yellow
#FFD23F
Highlights · Adventure
CRT Cyan
#3DE0FF
Arcade, trade-in · Run
Text styles
PLAY IT
Display / Hero
Big Shoulders 900 · 158 / 120 / 84px · Uppercase
BEST SELLERS
Display / H2
Big Shoulders 900 · 86 / 64 / 48px · Uppercase
MORTAL ARENA
Display / Card
Big Shoulders 800 · 26 / 24 / 22px · Uppercase
HIGH SCORES
Label
VT323 400 · 22px
Every game is tested by hand.
Body / L
Archivo 400 · 17px · LH 1.5
Add to cart
Body / UI
Archivo 600 · 15px
PRO TIP · CHANGING FONTS
Swap a font family inside the text style, not on individual layers. Keep display type condensed and heavy so the big headlines still fit on phones.
The logo is a component called Logo. Replace its text with your SVG and keep it about 30px tall in the header. The blinking cursor is a separate layer you can delete. The CRT scanlines are the Scanlines component in the Main layout template: switch them off there.
02
CMS collections
Products, legends, events, posts, reviews and FAQs all live in the CMS. Add an item and it appears on every page that lists it: shop grid, home sections, related games and more.
Games collection
Name
Plain text
Card title, page H1
Slug
Slug
URL: /games/slug
Genre
Reference
Fight · Run · Adventure · Sport (Genres collection)
Accent
Color
Accent on the game page; match the genre color
Year / Players
Number / Text
Meta line on cards
Price / Boxed / Mint
Number
Prices for the three conditions
Old price
Number
Optional. Shows the SALE badge and strike-through
Cover
Image
4:5 ratio, at least 800 × 1000 px
Box Shot
Image
Product photo on the game page. Use the box scene in the template files, or any 4:5 photo
Description
Plain text
Product page paragraph
Best seller / New arrival
Toggle
Feeds the home sections
Added label / Added on
Text / Date
Badge and order of New arrivals
Legend
Reference
Links the game to its Legends page
Other collections
Genres
Name, Color, Blurb
Shop filters and the genre tiles
Legends
Game, Number, Accent, Tagline, Story, Quote, Stats, List, Gallery
Legends pages and the home Legends row
Events
Title, Date, Day, Month, Type, Details, Tag, Accent
Events page and the home Events row
Journal
Title, Slug, Category, Date, Read time, Cover, Excerpt, Body
Journal list and post pages
Reviews / FAQ
Quote, Name, Game / Question, Answer
Shared Reviews and FAQ sections
ADD A NEW GAME IN FOUR STEPS
Open CMS → Games → New item. Fill name, genre, price and a 4:5 cover. Toggle Best seller or New arrival to show it on the home page. Publish.
03
Pages & sections
Every section is a self-contained stack. Reorder sections in the Layers panel, hide one on a single breakpoint, or delete it. Sections such as Mystery, Events, Club tiers, Reviews, FAQ and Newsletter are components reused on several pages, so editing one updates all of them.
A
Create a Legends page: add an item to Legends, link it to a game and fill tagline, story, quote, stats and list. The page builds itself and joins the Legends row on the home page.
B
Don’t run an arcade? Delete The Arcade, Events and Hall of fame, and remove their links from the Header and Footer components.
C
Navigation lives in the Header component. Its links, the mobile menu and the cart button are all edited in one place. The promo bar sits in the Main layout template.
04
Selling & checkout
Framer does not process payments by itself. The cart and Add to cart buttons are ready to connect to the checkout you choose. Pick one of these paths:
SIMPLEST
Payment links
Create a Stripe payment link per game, paste it into the Checkout link field in the CMS or into the Cart Button’s Checkout link.
FULL STORE
Shopify
Use a Shopify integration from the Framer Marketplace to sync products, stock and a real cart.
ALTERNATIVES
Lemon Squeezy, Gumroad
Good for gift cards, memberships and digital downloads. Link the Club buttons to a subscription product.
PRO TIP
Set the free-shipping threshold in the Cart Button component (Header) to match your store settings, so the progress bar shows the right amount.
05
Interactive components
Select any of these components on the canvas and change its properties in the right panel. No code required.
Mystery Machine
Discount %, offer length in minutes, game pool
Countdown
End date and time, or repeat weekly
Hall of Fame
Games as tabs, scores per game, rows to show
Trade-in Estimator
Base value per platform, condition multipliers, credit bonus %
Cart Button
Free-shipping threshold, checkout link
Hero Tilt
Image, labels, sticker and tilt angle
06
Tablet & phone
The template has three breakpoints. Content is centered at a maximum width of 1280px. Grids and stacks reflow on their own; you only need to check long headlines and swap images if a crop looks wrong.
Desktop
1440px and up · full navigation, 4-column product grid, split sections side by side.
Tablet
810 – 1439px · the menu button replaces the nav, grids reflow and split sections stack.
Phone
390 – 809px · 2-column product grid, everything stacks, cart goes full width.
07
SEO & publishing
1
In Site Settings, set the site title, description, favicon and a 1200 × 630 social image.
2
Give every page its own title and description. CMS pages already use their Name/Title and Description fields.
3
Point the newsletter, contact and booking forms to your email or a webhook in each form’s settings.
4
Connect your domain, publish, then delete this guide page or hide it from search.
Stuck on a level?
Send us your question and the page link. We reply within two working days.