Pour your coffee (the champagne will come soon!) and let’s get to work on setting up your new website!
First up, watch this slightly awkward, albeit helpful welcome video from us!
01 / PREP
Let's start by getting the brand back together. ;) If you already have a brand style guide, then refer to that and pull your fonts and brand colors into one place. You'll be able to add any custom brand fonts to your Showit site in .woff format (web format), or you can totally choose to keep the fonts and colors that come with your TONIC template. (We thought long and hard about those font pairings!)
If you need a new font for your brand, we highly recommend (read: spend all of our money on) CreativeMarket.com and find a lot of great free fonts at dafont.com.
Also compile your brand logos and marks in one easily accessible folder, too... we highly recommend high-res transparent PNGs or vector-based SVGs of logos + graphics so they render nice and crisp!
Download the Content Prep Guide
Time to do a little image curation! Pull all of the images want to include on your website in a folder (or folders)... you can organize them by page if you like! Showit does the hard work for you by automatically resizing your images to fit the area and screen dimensions that are needed. All you’ll need to do is make sure your images are at least 1500px and no larger than 3500px on the long side (any bigger and you may experience load speed issues) and have an RGB color profile. We recommend saving as a JPG, although PNGs work, too.
Need some killer stock images? Use the code TONIC for 10% off and snag some great photos there or check out other options in the stock photo section of our Resources Library.
Bonus points? Rename your images before you upload to SHOWIT for optimum SEO performance. That means kara-jason-wedding2034.jpg? Bad."modern-chic-chicago-wedding-at-the-ritz.jpg" Good.
You can also use tinyjpg.com to resize your images before uploading to get your site speed up. You can get more info on that in our *killer* content prep guide here:
Our number one piece of advice for adding copy to your website? Write it outside of Showit... preferably in a Google Doc with your template open alongside it. How you organize your document is up to you, but we suggest copying the text that comes with your TONIC template, pasting it in the Google Doc, then writing your copy underneath it. When it comes time to paste your copy in, you’ll know exactly what goes where!
Pro-tip: feel free to use the copy that comes with your template as cues for what to write about. It's there for a reason! Keep it simple (seriously, less is more unless you're telling a great story), make sure your reader could get the gist of the page if they ONLY read the largest pieces of the text on the page, and remember what you want them to take away from their experience!
Click HERE to learn how to write copy people actually want to read... and to the right are a few resources from copywriters we love.
02 / DESIGN
While our templates *are* completely customizable, we've found that the majority of our customers are happiest with their finished website when they start by simply replacing the content that is in the template with their own content.... and then make small design tweaks, like color changes and layout alterations.
You chose a template so you DIDN'T have to design something from scratch, so while we encourage you to make our designs your own, just remember — we already did the hard part for you! We designed it! You don't have to!
We’re not saying we’re Leonardo da Vinci over here, (though, we wouldn’t mind it if someone else said it 😉), but I mean, you wouldn't paint over the Mona Lisa, right? Hey, we tried to give you a solid masterpiece to start with...
So, if you’re tempted to embark on a new career as a website designer at 3am, call a friend, email us, go get some coffee…promise us you'll press pause on that idea and focus on replacing content first. You can always customize from there!
One of the great things about Showit is the global design settings panel that allows you to automatically change your fonts and colors across your entire website with just a few clicks.
If you followed along with the Prep Checklist in your content guide then you’ll already have your fonts and colors picked out. Now all there is to do is set them up. Read these Showit guides on how to do that in just a few clicks.
Now it’s time to add your lovely images and photos to your website.
PRO TIP: Start by replacing images (meaning you click on an image in the template, then hit that blue SWAP IMAGE button on the right hand toolbar) rather than adding them using the Showit media library or image adding tool in the bottom center of your Showit window.
We’ve seen our Regulars experience delays from adding imagery + text boxes that get overlapped and muddled instead of using what’s already there to fill it in. These placeholders are there to be used as such to save you time in the design process.
If you followed along with the Prep Guide (GOLD STAR!) then you already have all of your copy ready to go! All you need to do is simply double click on the text box you want to edit, highlight the text that’s there, and paste in your new text. It's like writing an email, baby. (Just don't forget to make sure you're checking it on mobile as you go!
Below is a Showit guide on adding and formatting text. Remember, replace, don’t add.
03 / EXPERIENCE
Inside of Showit is a tool called Click Actions. What are Click Actions? In simple terms, they’re the action that happens when you click on a link, button, image, etc. This is how you link pages of your website, link to your social media, cycle through a gallery when clicking an arrow icon, and more.
Most of the Click Actions that you need are already set up for you (you're welcome!), but there are some that you’ll need to adjust (such as your social media links). To set a click action, just click a text box, image, icon or graphic, then navigate to the "click action" tab in the right toolbar.
Did you know that you can edit your website to look one way on a phone and another way on a desktop computer? Using Showit, you have FULL design control over the mobile version of your site — something you won't find anywhere else.
You want your visitors to enjoy their time on your website no matter the device they are on... No "Make sure you look at this on your Desktop." here! All TONIC templates are 100% optimized — and built to wow — for mobile viewing. Should you need to make any specific adjustments to things like fonts or images, you can do so easily by toggling mobile settings. Check out this tutorial:
Every TONIC template comes with a "Portfolio" page that features multiple gallery styles and methods of displaying your work at its best.
To make use of the portfolio pages, you'll simply choose the gallery style you like best, add your content, and duplicate that gallery as many times as you need.
This one's easier to show than tell, so just CLICK HERE to watch our handy tutorial, "Tonic Galleries 101."
One of Showit's coolest features is called "Canvas Views." Canvas Views basically allow you to show different content in the same PLACE or section of your website. When you want something to be almost like a slideshow on your website (perhaps with arrows, like the example on our site on the left), you'll use Canvas Views.
In our templates, we often use Canvas Views to showcase rotating testimonials or create "header" sections where you can navigate through different content. To access the other "view," you'll just click the folder for that particular canvas, navigate to the proper view (again, like the example on the left) and add / edit the content.
04 / PRE-LAUNCH
You’re nearing your launch day! Testing is a critical part in having a successful website launch. With fresh eyes and a fresh mind, open your website preview and click through it like you’re an average viewer. Once you’ve done that and made any adjustments that you need to, ask a friend or TONIC Regular (feel free to post your website on our Facebook group!) to review your website with your preview link.
Now that you’ve navigated your website like a visitor, it’s time to get rid of elements that you don’t need. We recommend that you hide elements rather than delete them. Why? It makes it easier to add them back if you change your mind!
Note: When it comes to PAGES (say, you've got a podcast page and you don't have a podcast... yet!), you can delete any page you don't want for now, because you can always re-add a page from your template design at any time. Here's how!
Because it doesn't matter how pretty your website is if no one can ever find it! We’ll spare you the deep dive into this incredible concept and tell you that your TONIC site comes primed for your keyword ranking. If you’d like to learn more about how you can set your website up for SEO success, view the articles below or check out our friend Ryan's killer SEO course / other resources with our discount.
05 / LAUNCH
You’re ready to debut your new website to the world! All that is left to do is submit your launch request to the Showit team and celebrate! Once you submit your launch request to Showit will provide you more info and are available if you need help in the process. There’s nothing like letting the pros do the hard work for you. ;)
Get the Launch Kit
Oh hey, we made you something! Since you're getting a pretty TONIC website template, why not some pretty Canva graphic templates to LAUNCH you and your clients TONIC website template? Just add your screenshots or screen recordings, customize with your fonts and make sure you tag us in the result (bonus points if you include a little "WHY I LOVE TONIC SO MUCH" review. *WINK*)
Just fill out a short little form for us and you'll get your kit!
Our VERY favorite thing is being able to celebrate with you when your site goes live! We can feature you on our Instagram if you use the hashtag #toniclaunch and tag us in your launch post, which is great, but here are a few other quick ways to get featured on our site and beyond (and just get a MAJOR virtual high five from our whole team!)
Submit your site to be featured
Podcast interviews, blog articles, video tutorials & so much more all aimed at helpling you launch your dream site.
Answers to your technical questions, what platform our sites work with, support needs, and more.
We're here to help. For TONIC design questions, contact us! For tech questions, contact the Showit help desk.