So…how do you edit the colors and fonts on your Showit website you ask? Well, good news you’re in the right place! In this blog post I’m going to break down how to edit the Site Styles on your Showit website in the Design Settings.
For the purposes of this blog, I’m going to assume that you already know what Showit is. But if you don’t here are a few blogs you should read first:
- My Favorite Showit Website Features
- Why I Switched from Squarespace to Showit
- Showit vs Squarespace Fluid Engine Which One Drags-and-Drops Better
- Common Showit Website FAQ’s
How to Edit Showit Design Settings
Showit Design Settings
Once you’re logged into Showit on the up-ish left side of your screen you should see that it says Design Settings. Click on that to get started editing your colors and fonts on your Showit website. This will take you to the section where you can decide what part of your Design Settings you want to edit.
Things you can edit in your Showit Design Settings:
- Choose from a selection of pre-loaded Google fonts.
- Upload custom fonts to your website using a WOFF file.
- Edit your Font Site Styles on desktop and mobile view.
- Update your Color Palette for your website.
- Change your Color Palette Site Styles on desktop and mobile view.
You can also customize all of these individual styles on each page of your website.
Showit Site Styles
From the Site Styles section there are 3 things you can customize:
Color Palette
In the Color Palette section you can upload up to 8 color to your website color palette. It’s best pratice to add your colors from left to right darkest to lights like Showit recommends in their Showit Design Partner Guidelines (all of the Showit templates in my shop have the Color Palette setup this way). If you don’t have 8 colors you can simply add one of your brand colors into the palette twice to hold the unused space.
How to Choose Your Website Color Palette
Mobile Site Styles
In the Mobile Site Styles section, you can change the font typeface, size and more for the mobile version of your website. Changing these settings does not affect the desktop view of your website—but it’s best practice to keep them similar. You can have up to 4 fonts in the hierarchy, Title, Heading, Subheading and Paragraph. Each one will automatically assign itself a Htag for SEO purposes—but you can edit that following these instructions.
Desktop Site Styles
You can also edit the Desktop Site Styles section where you can change the font typeface, size and more for the desktop version of your website. Changing these settings does not affect the mobile view of your website—but like I said, it’s best practice to keep them similar. You can also have up to 4 fonts in the hierarchy, Title, Heading, Subheading and Paragraph. Each one will automatically assign itself a Htag for SEO purposes—but you can edit that following these instructions.
How to Choose Fonts for Your Website
Fonts
From the Fonts section there are 2 things you can customize:
Google Fonts
Most, if not all, Google Fonts are uploaded into Showit. You can choose from the drop-down menu and add any Google Fonts that you want to your website and they’ll appear in the Active Fonts section. Make sure to hit Save after adding any fonts to your website! Also press publish on your website if it’s ready to go live!
Should You Use Google Fonts on Your Website?
How to Manually Upload Google Fonts to Showit
Custom Fonts
You can also upload Custom Fonts to your website using a WOFF file. Make sure to hit Save after adding any fonts to your website! Also press publish on your website if it’s ready to go live!
How to Add Custom Fonts to Your Showit Website
Active Fonts
The Active Fonts section shows any fonts that are currently enabled on your website. You can remove any fonts that you no longer want by clicking on the X next to the font. Make sure to hit Save after removing any fonts from your website! Also, press publish on your website if it’s ready to go live!
Did You Like This Blog Post?
If So, Make Sure to Pin it on Pinterest!
