Choosing a beautifully designed Showit template for your website is just the first step. Even though your template probably already looks good, Showit’s design settings give you the ultimate creative control to customize everything from your fonts and colors to the tiniest details of your site’s layout. This is where your brand’s personality shines through, transforming a generic template into something uniquely YOU. Let’s learn how to navigate Showit design settings, customize your template, and bring your brand vision to life.
Where to Find Your Showit Design Settings
Before you start tweaking your site’s design, you’ll need to know where to find all the customization tools in Showit. Navigate to the Design Settings panel by clicking on the paintbrush icon in the top-left toolbar. This is your hub for editing your site-wide styles—things like fonts, colors, and spacing that will automatically apply across your entire site.
Why is this important? Because making adjustments here saves you time! Rather than changing styles individually for each canvas or page (which you can do if you need to), your design settings ensure consistency everywhere. This is where your brand identity comes to life.
Customizing Fonts
Your fonts and colors tell your brand story visually—so this step is all about creating a design that feels aligned with your style. This is where having a strong brand foundation comes into play. If you’ve already got your brand fonts and colors established you can drop those in easily. But if you’re not sure what to use, I recommend taking a minute to nail down your brand style so everything can stay consistent.
Before you can set your fonts in the design settings, you’ll need to add them to your site. Head to the fonts tab in the design settings panel, and select the fonts you want to use on your site. You can choose from Showit’s built-in free Google Fonts library or upload your own (just make sure you have the right legal licensing).
Once you’ve added the fonts you want to use, be sure to click save at the bottom right so your fonts will be ready to be assigned to text. Then in the Design Settings, you can assign default type styles for a title, heading, subheading, and body text. Selecting one of these categories will allow you to customize it’s color, font, size, line height, letter spacing, letter case, bottom margin, and alignment that will be formatted that way every time you insert a new text box. You can also choose how you would like the inline links to look across your site, with options to customize the color, format, hover color, and hover format.
Sync or Split Your Design Settings
If you want to customize type styles for either your desktop or mobile design without affecting both, you can split them. Simply hover over the text element you want to edit (like Color, Font, or Size), click the three dots to the right, and select Split Mobile & Desktop. To merge these settings back together, click either the mobile or desktop icon and select Merge Settings. Keep in mind, you’ll need to split each individual setting you want to edit independently for desktop and mobile.
Once split, you’ll see an icon for either the desktop or mobile version. Adjust one without impacting the other by clicking the corresponding icon. Important: If you merge while the desktop icon is selected, the desktop settings will apply to both versions. Similarly, merging with the mobile icon selected will apply the mobile settings to both layouts.
Customizing Colors
The color palette tool lets you define your brand’s primary and secondary colors. To add your brand’s colors, go to the colors tab in the design settings and click on the color swatches to customize them. Simply enter your hex codes for each brand color, and they’ll automatically update, making it easy to keep your design cohesive throughout your site. You can set 8 colors for repeated and easy access use inside of the designer.
The 8 colors you set will be available inside of the right side Properties Panel as you are customizing elements including text, shapes and icons within your site. Start with your darkest brand color on the left and work toward the lightest on the right to create a logical gradient that helps with design consistency and easy color selection for different elements on your site.
Design details
Once you’ve locked in your global fonts and colors, it’s time to focus on the small but mighty details that pull your design together.
- Editing Individual Element Design Settings: If needed, you can adjust the design settings for specific elements individually by selecting the element and customizing its font, color, or spacing directly in the right sidebar. However, use this option sparingly to maintain consistency across your site. Too many one-off changes can make your design look mismatched and lose that cohesive, professional vibe you’re going for.
- Spacing and alignment: Adjust the padding, margins, and alignment for elements like text boxes, images, and buttons in each canvas. Spacing might not seem glamorous, but it’s what makes your site look polished instead of cluttered.
- Miscellaneous Settings: Showit also lets you tweak things like scroll animations, link hover colors, and more. These tiny details might feel small, but they create a cohesive, professional user experience.
Don’t be afraid to take your time here. Test things out, make adjustments, and watch your template transform into something totally unique.
Recap
Your Showit design settings are the key to turning a pre-made template into a custom, on-brand masterpiece. From setting your fonts and colors to refining spacing and button styles, these tools allow you to create a cohesive, polished design that truly represents your business. The best part? Once you’ve set these site-wide styles, your whole website comes together effortlessly.
More Resources
- Showit Crash Course: A 5-minute intro on how to use Showit
- How to DIY your website the right way
- How to create your own stunning website in just 2 weeks
- How to set up a Showit website template
- Website Planner + Content Workbook
- FREE Website Image Guide
- Showit website templates
Save for Later
Enjoy this article and find it helpful? Pin this image on Pinterest so you’ll always have this info on hand!


