Customizing Your New Website Template

So, you’ve found your dream Showit website template?

Congrats! Now it’s time to make it your own.

If you’re feeling overwhelmed or unsure of where to start, don’t worry! We got you.

In this guide, we’ll walk you through everything from importing the template to launching your new website to the world. Let’s dive in!

Jump to a section:

1. Prepare your content
2. Add your content
3. Update the color palette
4. Select or upload your fonts
5. Delete any demo blog templates
6. Update your navigation
7. Set up your blog
8. Preview and test your site
9. Launch your new website!

1. Prepare your content

Whether you’ve already purchased a website template or are still shopping, there are a few things we recommend doing before beginning to customize your template.

While these steps aren’t necessary, it can make the rest of the process go a lot more smoothly!

We cover everything you need to know in this article:
Five things to do before you start customizing your website template.

2. Add your content

Important!

You’re going to want to dive into changing your fonts and colors immediately, but resist the urge! We design our templates with flexible fonts and colors, so they’ll work for most websites with minimal editing. Your photos will do a LOT of the work in making your site look unique.

We recommend starting to add your content first and seeing how it feels without adjusting the design settings. When you’re ready to tweak things, see step 3 below.

Coming Soon Page

If you’d like to have something live at your domain before your entire site is complete, customize and publish the Coming Soon page included in your template. (May not be available in templates not purchased from Hey Hello Studio.) Follow these instructions to publish your site at your domain and push your Coming Soon page live.

Tips for Adding Content

We recommend customizing the mobile and desktop version of each canvas at the same time as you work through the following steps. This will help you avoid having to rework design elements multiple times.

Start adding your own content, beginning with the homepage, and working canvas-by-canvas down each page.

If you’ve already organized all your content in a document prior to starting, this process should go relatively quickly!

If you need to make adjustments to the layout to fit your content, make sure to adjust your mobile layout as well.

When needed, rearrange the order of canvases, and turn off ones you don’t need.

3. Update the color palette

Select Design Settings in the top left side of the Showit interface.

In the Site Style tab, adjust each color in the Color Palette section to one of your brand colors.

If you’ve purchased a Hey Hello Studio website template, the color palette is set up according to the diagram below. Replace each color with a tone from your palette that works for the purpose noted.

And don’t worry if you don’t use all the colors in your color palette — most websites only use about half their colors. The rest can show up in photography or graphics used on your site.

4. Select or upload your fonts

Note: If you plan to use the fonts already available in the template as-is, you can skip this step.

Return to Design Settings and select the Fonts tab. If you plan to use any Google Fonts, select them from the list. If you plan to use any custom fonts, add them by following the instructions under Custom Fonts. 

Return to the Site Style tab. In the Type Styles section, click on the 3 white dots to the left of each text type in order to adjust the settings as needed. Remember to adjust both mobile and desktop fonts. Save your settings.

5. Delete any demo blog templates

Before adjusting the navigation, delete the following Blog Templates, which were only created for use in the template demo:

• Demo Blog – Delete This
• Demo Single Post – Delete This

(Templates not purchased from Hey Hello Studio may not have the Demo Blog Templates listed above.)

6. Update your navigation

Important Note: Any changes you make in this step will need repeated on each of the following Site Canvases*: 

• Nav: Navigation viewed on desktop
• Mobile Nav: Navigation viewed on mobile
• Footer: At the bottom of every page on your site

*A Site Canvas is a section that’s the exact same on any page it’s placed on. If you make a change to a Site Canvas, that change will be reflected on all pages where it’s present. Learn more about Site Canvases.

If you’re planning to have a blog, make sure to update the “Blog” link in the navigation, so it’s not pointing to one of the demo templates you just deleted.

Make any additional changes needed to the navigation, such as changing the names of the pages, deleting unneeded links, or updating the destinations where they’re linked to. Don’t forget to repeat on all three Site Canvases listed above!

7. Set up your blog

Showit has partnered with WordPress to make blogging seamless on your new Showit website. Learn how Showit + WordPress work together.

First, connect your Showit account to your new WordPress blog by requesting a Blog Setup or Migration.

Once your blog is connected, start by customizing the Blog Intro canvas of the Blog page.

The rest of the Blog page will pull your content from WordPress.

The Featured Post canvas will pull content from your most recent blog post that’s tagged as featured, so make sure to create a tag named “featured” in WordPress, and assign it to at least one post.

The Post Layout canvas will populate with all your blog posts, beginning with the most recent post.

(Templates not purchased from Hey Hello Studio may not be set up exactly as described above.)

8. Preview and test your site

Yay! You’ve finished customizing your Showit website! 

Before launching, you’ll want to preview all your pages on desktop and mobile to make sure everything is working properly.

Proofread your copy to check for spelling errors, make sure all links point to the right locations, and double-check that your images are appearing correctly. 

9. Launch your new website!

Congratulations! It’s time to publish your website. 

If you haven’t already purchased a domain, we recommend GoDaddy

Once you have your domain secured, you’ll need to connect your domain to Showit. Note that it can take up to 2 days to connect your domain.

Last, follow this tutorial from Showit on how to launch your website.

Looking for more training?

For more in-depth training on using Showit, check out this Showit training.