When it comes to customizing your Showit site, the possibilities are almost endless, even if you’re not a coder. As a Showit website designer, one of the things I love most about the platform is how intuitive it is. But sometimes you want to fine-tune your design just a little more, like adjusting heading sizes, changing font colors, or swapping out a typeface that doesn’t quite match your brand vibe. That’s where a few simple lines of CSS can make a big difference.

I’m Bekah, a website designer, SEO strategist, and DIY website educator. I help purpose-driven entrepreneurs ditch the overwhelm and launch high-converting Squarespace or Showit sites FAST. And yes, that includes teaching you how to actually update your website without having to call in a tech team.

How do we change heading sizes, heading color, or the heading font in Showit for blog posts? Watch this video and you’ll learn how!

How to Change Heading Sizes in Showit (Without Breaking Your Site)

As a Showit website designer (and Showit Design Partner), one of my favorite things about the platform is that you don’t need to know how to code to build something beautiful. The drag-and-drop builder is incredibly user-friendly, especially for creative entrepreneurs who just want to get their vision out into the world without fussing with HTML.

But every once in a while, you might want just a bit more control—like customizing your heading sizes or changing a font that’s not quite hitting the mark. That’s where a little CSS can go a long way. Don’t worry, this tutorial will walk you through it step-by-step.

Why You Might Want to Customize Headings in Showit

By default, Showit makes it easy to style your headings visually. But sometimes you want to:

• Make an H2 heading just a bit larger (or smaller)
• Change the font style on a specific blog post title
• Adjust font colors for visual hierarchy
• Align headings differently than the standard layout

Even as a seasoned Showit website designer, I still use custom CSS now and then to fine-tune the look and feel of a page—especially blog posts. Let’s walk through exactly how to do this.

CHECK OUT SOME OF MY SHOWIT WEBSITE DESIGNS

Step-by-Step: How to Change Your Heading Size in Showit for Your Blogs

Let’s say you want to change the size of your H2 heading on a blog post.

1. Inspect the Element

On a Mac, you can right-click (or control + click) the heading and choose “Inspect.” This brings up the code view. Don’t panic—just look for the class name associated with your heading. It’ll look something like .myheight.

In the styles section, you’ll see something like:

font-size: 35px;

Try manually changing that to 45px in the browser’s inspector to preview how it looks.

2. Copy Your Edited CSS

Once you’re happy with the new size, copy that section of the code. Make sure it includes the class name (with the dot), the tag (like h2), and the property you want to change. Example:

.myheight h2 {
  font-size: 45px;
}

Step-by-Step: Where to Add Custom CSS in Showit

1. Open your Showit dashboard
2. Navigate to your blog template
3. Go to the Advanced Settings (not SEO settings!)
4. Paste your custom CSS into the Custom CSS box
5. Hit Save

If you’re changing multiple headings (like H3s or even font colors), you can repeat this process for each one. Just make sure you’re including the correct tag and class.

Bonus: Changing Heading Font or Color

Let’s say you want to swap out a heading font or update its color:

Change the Font

I once had a blog post with a very cursive font called “Glossy”—not the vibe I wanted. I changed it to a cleaner font I had already uploaded to my Showit site called “Tennis Light.” Here’s how that CSS looked:

.myheading h2 {
  font-family: "Tennis Light";
  font-size: 60px;
}

Change the Color

To change the font color, inspect the element again, and look for the color value (usually a hex code like #000000). You can convert hex to RGB using a quick Google search.

Example:

.myheading h2 {
  color: rgb(255, 102, 0); /* orange */
}

You can also center your text or adjust spacing right in that CSS block. Just remember to hit Save once you’re done!

A Quick SEO Tip (From Your Favorite Showit Website Designer 😉)

A lot of people choose heading tags based on how they look—but from an SEO perspective, that’s a mistake.

Here’s how to structure your headings for better search rankings:

• Only one H1 per page (usually your blog post title)
• Use H2s for main points or sections (2–4 depending on length)
• Use H3s for subpoints under H2s

This helps Google understand the structure of your content and makes your posts easier for readers to scan.

Want to Learn More About SEO for Showit?

If you found this tutorial helpful and want to dig deeper into how I use SEO as a Showit website designer to help my clients land on page one of Google, I’ve got a free gift for you!

🎁 Grab my free 3-day training, where I walk you through my keyword research and blog optimization process, step-by-step.

>> Click here to get instant access to the free SEO training <<

Got questions about customizing your Showit site? Drop them in the comments of the YouTube video or here! I’d love to create a tutorial just for you!