Apply new Theme to existing Webflow-Website

Hey guys,
this is a very generic question – but actually if you think about it – a big one.

We have a Webflow website with lots of content, using around 15 collections that are entangled with each other and various pieces of custom code – etc. It’s just a big thing let’s say.

For the sake of this question, let’s say I want to keep all content and functionality of our website but skin it with a purchased theme (of course we’ll have to extend the theme etc. etc. but that’s beside the point and not relevant here).

I’m using Webflow intensively (30 big builds or more) since 2017 but I can’t quite wrap my head around the question how to approach this. I’d be very grateful for any input. Maybe I’m just not seeing everything quite clearly:

Workflow #1

  1. Duplicate existing website
  2. Remove everything except for raw content, collections and custom code blocks
  3. Delete all styles
  4. Copy all blocks/sections from purchased theme
  5. Remarry existing functionality and content to the blocks of the theme

Workflow #2

  1. Purchase theme and create new website with it
  2. Structure all pages and contents aligned with the old website
  3. Rebuild all collections and custom code sections
  4. Export / Import all collection items

How would you go about this challenge?

Thanks a lot :nerd_face:

First of all, to me, both workflows aren’t advisable. Because you’re going to fight a bit to get where you want, and it seems to me that designing from scratch, with said theme as an inspiration, will be faster, less buggy and produce a better quality website.

Now both workflows can work. From a duplicate, you can find GREAT help in the form of the @Finsweet Chrome extension, which has incredible functions like removing classes or styles from a page or a selection…

In Workflow 1, point 4. needs you to first gather ALL the content you wanrt to copy in the same page, inside one div, and then you copy and paste it ALL AT ONCE. if you don’t do this, you’ll get so many class collisions…

For workflow 2, you can export your collections from original site and import them in blank collections in the new site, making Webflow create each field upon import. Mostly works well.

But again, do it from scratch, you’ll learn more, you’ll get a better control of your site afterwards.

And there’s no skinning/theming function in Webflow/

1 Like

Thanks a lot @vincent !

I thought I knew everything, but the finsweet extension looks f’n sweet.

It’s a hard decision anyway. There’s no time/budget to build it all over.

So I think I’ll try to delete styles and copy/paste (all in one div). Let’s see.

Rather than having to duplicate and deconstruct a working website each time, couldn’t you just strip it down once and have an empty “theme” site, possibly with some generic collections and placeholders in there to keep the CMS architecture intact? Maybe boil them down to a small number of broad use cases and configurations if need be?

1 Like

Here’s what I ended up doing:
I made a duplicate of the working website and went through every page. I deleted everything which was not the “complicated” stuff (CMS, custom code). And of those remaining elements I deleted all styles to end up with raw output of this “gutted” page.

Then I rebuilt the pages within divs (one per page) within the purchased theme and copied that over to my gutted instance.

Still maaaaany hours of work to do…