How to customise a Framer template without breaking it

Most broken Framer templates break in the same way: someone edits sections one by one, changes colors and fonts by hand, and deletes things that other pages depend on. The fix is to customise in the right order, starting with the design system and ending with cleanup.

I’m Sanna Granqvist, a web designer listed as a Framer Pro Studio. I’ve published 17 templates on the Framer Marketplace and I customise templates for clients, so this is the order I follow on every project. I’ll use two of my free templates, Bronn and Wayan, as examples.

What is the safest way to customise a Framer template?

Customise a Framer template from the inside out. Change the color styles and text styles first so the whole site updates at once. Edit components rather than detaching them. Replace CMS content instead of deleting collections. Then check every breakpoint, update page SEO titles and descriptions, and remove the pages you don’t need.

Step 1: Start with color styles and text styles

I start every customisation with the project’s color styles and text styles, not on the canvas. A well-built template applies color styles and text styles across every section, so changing a style updates every layer that uses it.

Work through them in this order:

1. Colors. Change the existing color styles to your brand values. Keep the names and roles, such as background, text and accent, so you don’t lose track of what each one is for.

2. Fonts. Change the typeface in each text style. Then check headings, because a new font with different proportions can make lines wrap in new places.

3. Sizes and line heights. Adjust these in the styles, not on individual text layers.

Resist editing a single heading’s color directly on the canvas. It looks fine today, but that layer no longer follows the system, and the next global change will skip it.

In Bronn, for example, the warm editorial feel comes largely from its color and type choices. Changing those styles first shows you quickly how far the template moves towards your brand before you touch a single section.

Step 2: Keep components and variants intact

Templates reuse components for things like buttons, cards, navigation and footers. When you edit the main component, every instance across the site updates. When you detach an instance, it becomes a separate copy that no longer updates.

• Edit the main component when you want a change everywhere.

• Use the component’s properties, such as text or image overrides, for changes in one place.

• Keep the existing variants, such as hover or mobile states, even if you restyle them.

• Avoid detaching instances unless you really need a one-off.

If a component almost fits, I’d rather add a variant than detach it. Detached copies are one of the main reasons a site becomes hard to maintain a year after launch.

Step 3: Replace CMS content instead of deleting collections

CMS collections are often wired into more places than you can see. A blog collection may feed the blog index, the post template, a “latest posts” section on the home page and a footer list. Delete the collection and all of those break.

Instead, keep the collection and replace its items:

1. Add your own items first, filling in every field the template uses.

2. Check the CMS detail page with your real content, especially long titles and missing images.

3. Delete the placeholder items only once your own are in place.

Bronn has 8 CMS collections, covering services, case studies, careers and the blog. If you don’t need careers, for example, it’s safer to remove the careers pages and links than to delete the collection first and chase the errors afterwards.

Wayan’s blog runs on a CMS collection behind the blog and blog post pages. The same rule applies: replace the posts, keep the collection.

Step 4: Check every breakpoint

Your content is not the same length as the template’s placeholder content. A longer company name, a three-line headline or a larger logo can push layouts out of shape on smaller screens.

After each round of changes, I check desktop, tablet and phone. Wayan, for instance, is built to be responsive on all three, but that only holds for your content if you check it. I look for:

• Headlines that wrap into too many lines on phone.

• Buttons and navigation items that overflow.

• Images that crop your subject out of frame.

• Sections where tablet layout was inherited from desktop and no longer fits.

It’s faster to catch these as you go than to find them all at the end.

Step 5: Update SEO titles and descriptions on every page

This is the step people forget most. Templates ship with the template’s own page titles and meta descriptions, and those end up in search results if you don’t change them.

Go through each page’s SEO settings and write a title and description for your business. For CMS pages like blog posts, check that the title and description use your content fields so each item gets its own. Also replace the social sharing image and the favicon, which often still show the template’s branding.

Bronn includes SEO fields on every page, which makes this step quicker, but the fields still need your words.

Step 6: Remove unused pages and sections

Once your content is in, remove what you don’t need. Leftover pages still exist on the site, and placeholder content on them can reach search results or confuse visitors who find them.

1. List the pages you’ll launch with.

2. Remove links to the other pages from the navigation and footer.

3. Delete the unused pages.

4. Check the site for broken links.

Wayan includes pages for features, pricing, about, blog and contact, plus demo request and contact forms. If you’re not ready to publish pricing, remove the page and its links rather than leaving an empty draft live.

What should you avoid when customising a Framer template?

• Hardcoding colors and fonts on individual layers.

• Detaching components to make small changes.

• Deleting CMS collections before checking where they’re used.

• Only reviewing the desktop layout.

• Publishing with the template’s SEO titles, favicon or sharing image.

Frequently asked questions

How long does it take to customise a Framer template?

It depends on how much of the structure you change. Rebranding styles and replacing content is much quicker than replacing sections or restructuring the CMS.

Can I change the fonts in a Framer template?

Yes. Change the font in the text styles so it updates everywhere, then check headings on every breakpoint for new line breaks.

Will customising a template break its responsive layout?

Not if you work through styles and components and check each breakpoint as you go. Most layout problems come from content length, which you’ll catch by reviewing tablet and phone.

Can someone customise a Framer template for me?

Yes. My Framer template customisation service covers brand styles, components, CMS content, breakpoints and SEO, using a template you’ve picked.

Customising a template well comes down to order: system first, content second, cleanup last. If you’d rather hand it over, I can customise your Framer template for you.