tools

How to Customize And Launch a Website from a Webflow Template


“Is it easy to customize a Webflow template?” This is the most often question I am receiving. And there is no one answer, it depends on the level of your Webflow skills and the number of things, you would like to change. I put together the list with the minimum steps necessary to turn a Webflow template into a branded website.

Activate Coming Soon Page

The first thing you should do once you start working on your website is to activate the Coming Soon (Password) Page. You can do it inside the Project Settings under the Tab General. Find the section called Website Password and turn it on. It will help you protect the “work in progress” project until the moment when you are ready to launch.



Go to the Styleguide Page

Every Zerocodegirl Webflow template would have a Styleguide that includes colours, styles for texts, links, buttons etc. To customize it you will need to find the page called Styleguide and update elements with your brand colors, fonts, and styles. You can find the Styleguide Page inside the folder named Template.



Customize Colours

Replace template default colors with your brand colors. Make sure you are customizing Global Colours by clicking the edit icon on the color palette. 



Custom Fonts

To upload custom fonts you need to go inside the Project Settings and find the tab Fonts. Under this tab, you can easily connect Google Fonts or upload custom fonts.

Setup the main font for all the pages

To make sure the main font is consistent across all the pages, select the Body in the Navigator, click on Select a Class or Tag and choose the root tag Body (All Pages), it would be highlighted in purple. When you select it, the font settings would be updated for all the pages. 



Customize Headings

Click on Select a Class or Tag and Select the root tag, it would be highlighted in purple. Once you’ve done it means that you are changing all the titles across the website not only the current one.




Remove or Hide Extra Pages

Even if you don’t need some of the template pages, you shouldn’t delete them straight away. You can use them as building blocks or to assemble new pages. Just make sure you unlink the onse you don’t need from the main menu and remove all links from other places. If you don’t want them to be found by the Search Engines you should add a simple line  <meta name="robots" content="noindex"> to the Custom Code area Inside <head> tag.


Replace Static Images

Static images and texts mean that they are not coming from the CMS or Ecommerce and could be updated simply by replacing them on the pages. Before you upload images to your Webflow website, make sure they all are optimized. You can learn more about how to optimize your image in the Website Launch Checklist post. I would recommend uploading all images you are planning on using on your website at once. Once you have them in the Assets, you can easily replace them and find the better-fitted ones for your content.



Replace Static Texts

Go through all the pages and update all static texts. Most of the texts you would be able to edit by just simply clicking on the text. But there are might be situations when you will need to find the layer with the text inside the navigator to be able to edit it. If some of the texts are highlighted with a purple border once you select them, it means those are dynamic and should be updated through the CMS or Ecommerce.



Add Dynamic Content

If the template you are using has dynamic content (CMS), for example, blog articles, projects, etc. You should go ahead and upload your real content through CMS Collections.



Upload Ecommerce Products & Collections

If your template has Ecommerce functionality, you should go to the Ecommerce tab and upload your Products and Categories. 



Setup SEO & Open Graph

To improve the Search Engine visibility of your website make sure you have relevant Title Tags and Meta Descriptions. You can learn more about improving SEO in Website Launch Checklist post. Open Graph is a preview of your website when somebody is sharing the link. You can upload the preview to your assets and copy the link inside the Open Graph field. 



Test all The Pages

When your website is looking the way you want and all content is ready. It's the time to test all pages, check links, go through the mobile version, and all other resolution. Make sure your content is well-fitted and all important parts are looking and functioning properly.



Setup Hosting

If you want to connect a custom domain or launch an online store, you will need to purchase Webflow hosting. You can find the tab Hosting under the Project Settings menu. 

If your template has Ecommerce functionality but you don’t need it straight away or don’t need it at all.  It is totally fine and you can keep Ecommerce pages for the future and activate them only once you are ready to launch your store. Until then you can use your website on CMS hosting and you don’t need to purchase an Ecommerce plan. 


Connect Your Domain

Before you can connect a custom domain you will have to purchase any Werbflow hosting. Once you’ve done it you can find the section Custom Domains under the tab Hosting and follow the instructions to connect it to your domain provider.

Favicon, Forms, Analytics, and other settings

Before you launch your new website don’t forget to upload a favicon and connect analytics. Go through the Project Settings and make sure that you have all things sorted including the correct email to receive notifications from your forms.

Launch!

Select your custom domains and hit the Publish button!

Some Websites I've crafted with Webflow Ecommerce:

Hey, I am Olga

Award-winning web designer & educator focusing on bringing clients into your business through goal-oriented and conversion-led web design.

By clicking the button you agree to occasionally receive emails from me. You can unsubscribe at any time.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Join the Fam

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sign up to receive Webflow & Biz tips directly to your inbox!. You can unsubscribe at any time.

Ready to transform your business?

Be proud of your website and the fact that you've launched it by yourself!

Template shop
Copyright © 2019-2022, Zerocodegirl. All Rights Reserved
    /    
Designed & Developed by Zerocodegirl