Now, Let's Get Started.
congrats on YOUR NEW TONIC SITE
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!
Next, sign into your account HERE and click on the "My Products" tab in the left-hand sidebar. Copy the corresponding sharekey to your clipboard.
If you don't have one already, head on over to Showit and create an account. (Be sure to take advantage of the free 14 day trial). When you're ready to subscribe, use the code TONIC to get 1 month free of Showit.
If this is your first time using Showit, login at app.showit.com, toggle past the free Showit designs to "Your designs."
If it's not your first Showit rodeo, simply login to your Showit account at app.showit.com, click "Create A New Design."
Next, paste the share key you copied into the dialog box. Boom! Hello, sexy new website. Now, keep scrolling ...
How to Install Your Pretty New Template
First things first
01. Create a Showit account
02. Access your TONIC design sharekey
03. Install your design into Showit
01 / PREP
How to set yourself up for success... because when you start with intention, you create with purpose.
Branding
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!
Image Curation
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? Check out our favorite places to source images in the stock photo section of our TONIC Toolkit.
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:
Copy
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.
resources from copywriters we love:
Learning Showit
Feeling a little lost with Showit? No problem. Learn everything you need to know about Showit in less than 30 minutes. Click here to learn the basics of Showit.
And if you need help along the way, access the VERY NICE, very actually helpful Showit support team directly via chat or browse their library of 300+ help documents to help you build and launch your site. Both buttons are located at the bottom right-hand corner of the Showit window:
Oh, and don't forget, there's a Showit Facebook group of almost 10,000 users — it's a great place to ask questions or just search for what you're looking for!
02 / DESIGN
Time to start mixing up the elements. Oh boy, this is going to be good.
Before You Begin Customizing...
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!
Set Up Fonts & Colors
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.
How to add custom fonts →
How to edit design settings for font and colors →
Replace / Add Your Images
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.
How to add images in showit →
Jeff's image curation guide →
Integrate Your Copy
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.
How to add and format text →
03 / EXPERIENCE
A few of the nitty gritty things you'll want to know about your site.
Links + Click Actions
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.
How to set up click actions →
How to set up SOCIAL MEDIA LINKS →
Mobile / Desktop Views
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:
how to make MOBILE VS. DESKTOP changes →
Portfolio / Galleries
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."
How to add images to a gallery →
TONic galleries 101 →
Canvas Views
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.
Even more about how canvas views work →
04 / PRE-LAUNCH
Before you pop the champagne.
Test, Test, Test...
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.
how to get your website preview link →
Don’t Delete, Hide.
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!
How to hide elements →
SEO, BABY
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.
What is SEO and why is it important? →
How to use Showit SEO tools for your website →
How to use Showit SEO tools for your blog →
05 / LAUNCH
It's time to release that beautiful site out into the world!
How to 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. ;)
How to submit your launch request to Showit →
the cocktail to drink after you do that →
Get the Launch Kit
Get Your *Free* Launch Graphics + Planner!
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!
yourdomain.com
We Made You Something
Launch, Celebrate, Champagne, etc.
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!)
Post your site in the TONIC Regulars Facebook Group >
Email us when you're live >
Submit your site to be featured
actual footage of us
Questions? Need Help?
We know it can be overwhelming… choosing a new website, sorting through the options, and trying to determine if TONIC templates are the right fit for you. Here are our best resources to get you started:
Take the Quiz
Compare Products
Read the FAQs
Get Support
Book A Call