---
title: Customize a Framer template without breaking it
canonical: "https://elliotli.dev/blog/customize-framer-template/"
pubDate: "2026-09-20T00:00:00.000Z"
author: Elliot Li
description: "A practical workflow for making a Framer template yours — styles first, then content, then structure — without breaking CMS bindings or responsive layouts."
tags: [framer, tutorial, workflow]
---

## The order that doesn't break things

Most people customize in the order they notice things: hero headline, then
images, then "wait, why is the menu page empty?" Work in this order instead:

### 1. Styles first

Open the template's text and color styles before touching any page. Rename
nothing yet — just point the existing styles at your fonts and palette. Every
page updates at once, which is the whole point of a design system. My templates
([Eastward](/templates/eastward/), the free starters) keep this to one place
on purpose.

### 2. Content second

Swap copy and images page by page. If the template is CMS-driven, add your
content in the CMS panel rather than on the canvas — collection pages generate
themselves. Eastward's destinations and itineraries work exactly this way: add
an entry, the page builds itself.

### 3. Structure last

Only now should you add, remove, or reorder sections. By this point you know
which elements are CMS-bound (leave their bindings alone) and which are static
(rearrange freely).

## The two checks everyone skips

- **Tablet and mobile breakpoints.** Desktop-first templates hide sins at 390px. Walk every page at phone width before launch.
- **Forms end to end.** Submit the contact or inquiry form yourself and confirm the data lands where you expect — inbox, Sheet, or automation.

## When to call me

Stuck on a template you bought from me? Write to
[contact@elliotli.dev](mailto:contact@elliotli.dev) with the template name and
a screenshot. Pre-purchase questions are welcome too — better than buying the
wrong template.