Overview
Buy your template, and then merge the new design into your existing site.
This involves;
- Copy-pasting layout portions from the template to your existing site
- Rewiring your CMS and collection list bindings to the new layout
- "Internally transforming" components like your site-wide nav and footer
- Dealing with class conflicts and standardization
- Adjusting custom code, nocode attributes, etc to use your new layout and elements
It's most suitable when;
- Your site overall is large and complex
- You have a lot of CMS content, and/or it has complex relationships
- You have a ton of images and videos
- You have a lot of custom code
- You have a lot of complex external integration or automations
- Your do not want to make major structural and navigational changes to the site, as part of the re-design
Tips
Re-templating by Merge means "merging" the template into your existing site, piecemeal. This requires a solid understanding of classes, draft, visibility: hidden, and how to work in a production site. You're basically rebuilding the plane while it's flying.
Choose a Merge Approach
A redesign can take a couple of weeks, depending on the extent of the restyling work, and your proficiency with Webflow.
A seasoned Webflow designer should be able to crack out a full redesign within 1 day, however that involves experience and quite a bit of skill.
If you're not at that level, it's best to assume that the template merge will take a week or two.
The merge can be approached in two ways-
- You can merge it into your live, public site, or
- You can duplicate your public site to create a new "working site" for redesign.
#1 is the most efficient if you a ninja-level understanding of how Webflow and the designer work, and can make good decisions on the fly. It's also advantageous if your site is constantly changing- ECommerce store inventory levels, new blog posts streaming in via automations, etc.
#2 is better if;
- You want the new redesigned appearance to appear all at once, rather than piecemeal over time.
- You can "freeze" all content edits on the live site for a few weeks- no new products or blog posts, etc. etc.
- You are okay with a "data gray area" during the redesign, between the point when you duplicate the site, and when you bring it live. Considerations - new form submissions, automations feeding data in or out of your site, ECommerce inventory levels, etc.
The template merge process itself below is basically the same either way, but the above decision impacts what customer will see and may affect your data flow for your business during the merge period.
Preparing
- After purchasing your template, duplicate it immediately. In the process of building your new site there are cases when you may make changes to the source elements before copy-pasting them, and you want an
- Duplicate your destination site as well. This is gives you an added layer of protection to your backup, in case you break something important and need your original design to refer to.
Copying Layout Portions
- Use a dual-monitor system
- Have two instances of the Webflow designer open- one with your source template, and one with your destination site
Copying;
- When copying CMS bound items from the source, unbind them first. Finsweet's CMS Unbind is useful here.
- Try to copy entire sections when possible to keep layout consistent. You can edit these freely in your new site.
Pasting;
- In the left-side element nav, single-click your body element, or a (green) component before hitting paste. This will ensure that your pasted section is still at the top level of the hierarchy, and not within another section.
- Try to copy-paste a section only once. When you want to reuse it on the destination site, copy-paste from the destination site to itself. This will minimize class duplication, and retain styling adjustments you've made.
- After pasting, do any Collection List and element binding to the CMS. You need.
- Do NOT delete your original section. You may still need it for reference- custom code, ID's custom attributes, etc. Instead, select that section in the left side nav, and under Settings, change it to Visibility Hidden. When you do this under settings ( instead of style ), the entire element set is suppressed from the page.
"Internally transforming" components like your site-wide nav and footer
For a site with 150 pages, you generally don't want to have to go to each and replace the site-wide header and footer components.
Here's an approach I use that generally works.
- Edit your existing component
- Add a DIV, and pull all of the current contents inside that DIV
- Give that new DIV the same class as the topmost "root" div for the component, and remove the class from that topmost "root" div.
- Do the same to your template content you're going to pull-over, so that it's also wrapped in a DIV.
- Do your copy-paste. You should now have essentially both headers or both footers in the same component. * This will be weird if you're using features like sticky positioning. That's OK.
- Now build out your new nav or footer menus and links.
- Then, set your old nav or footer portion to Visibility: Hidden.
More Tips
When I merge templates in, I generally follow a progression.
- Internal static pages first, like about and contact. The are the least complex and let you test out the new layout and styling impacts.
- Utility pages - 404, login, logout, password protection, etc.
- Homepage - can have the most layout changes, but is rarely code-heavy
- CMS Pages
- Store pages
- Other components, e.g. sidebars, CTA's, testimonials
- Site-wide footer component
- Site-wide nav component
