How to Add Custom Code to Showit to get those Extra Features Working

If you love designing with Showit but feel like you’re just this close to creating something even more magical – this post is for you. While Showit is known for its drag-and-drop simplicity, you can further enhance your site with custom code.

Whether you’re a designer looking to add scroll animations or just need totweak your font styles or embed a form, learning how to insert a bit of CSS, HTML, or JavaScript can take your site from beautiful to wow, how’d you do that?!

Let’s dive into how to easily add custom code to your Showit site, even if you’re not a developer.

What Is Custom Code in Showit?

Custom code refers to bits of CSS, HTML, or JavaScript that you can manually add to your website to modify or expand its functionality and design. Think of it like sprinkling in a bit of secret sauce.

When using the Showit builder, you might encounter limitations with advanced design features like hover effects, drop-down menus, and infinite text marquees. Custom code can provide creative solutions and workarounds to achieve these functionalities that are not fully supported natively within the Showit platform.

Here’s a quick breakdown:

• CSS (Cascading Style Sheets): Controls how your site looks—fonts, colors, spacing, hover effects, and animations.
• HTML (HyperText Markup Language): Structures your content—forms, buttons, sections, embeds.
• JavaScript: Adds interactivity—think sliders, countdowns, or pop-ups.

Examples of what you can do with custom code:

• Add a fade-in animation to text as the user scrolls.
• Use Adobe Fonts or custom Google Fonts.
• Embed a third-party form or plugin.
• Create a sticky header or a scroll-to-top button.
• Customize the styling of your WordPress blog posts (since Showit blogs live on WordPress).

Where to Add Code in Showit

Showit makes it super easy to add custom code to any page or canvas with the Embed Code Box.

How to Add Custom Code:

1. Open your Showit site.
2. Navigate to the page or canvas where you want the custom code.
3. In the left toolbar, click “Embed Code” and drag it onto the canvas.
4. Paste your code in the pop-up window (HTML, CSS, or JavaScript).
5. Click “Save” and preview your changes.

This is the best method for adding HTML elements or embedding third-party widgets.

For CSS, you can use a <style> tag in the Embed Code Box or place CSS into the Site Settings → Custom Head HTML area to make global style changes.

---

Adding Custom CSS to Your Showit Site

If you want to fine-tune how things look, CSS is your best friend.

How to Add CSS:

• Use a <style> tag inside an Embed Code Box for local canvas-specific changes.
• Or paste site-wide CSS inside Site Settings → Custom Head HTML.

---

Embedding JavaScript or HTML

Want to add a fancy animation or interactive widget? JavaScript and HTML have you covered.

Examples of What You Can Add:

• Countdown timers
• Pop-up modals
• Third-party newsletter forms (e.g., Flodesk, ConvertKit)
• Calendly booking widgets
• Font Awesome icons

Best Practices:

• Always wrap CSS inside <style> and JS inside <script>.
• Clean up your code – avoid extra tags or conflicting scripts.
• Preview on desktop and mobile.
• Back up your Showit site and keep a separate document with your snippets.

---

Showit Shortcuts and Code Snippets

Quick Solutions for Common Customizations

Showit Shortcuts and code snippets are your go-to tools for quick and effective customizations on the Showit platform. These handy shortcuts allow you to add custom features and effects to your Showit website without needing to write a single line of code. Designed to be user-friendly, these snippets make it possible for Showit users of all skill levels to enhance their sites effortlessly.

Some of the most popular code snippets include:

• Custom CSS Code: Add animations and effects to text and images to make your content pop.
• Embed Code: Easily integrate widgets, contact forms, and opt-in newsletters to engage your audience.
• Head HTML Code: Connect third-party chat systems and add Meta Pixel (formerly Facebook Pixel) for advanced tracking and interaction.

By leveraging Showit Shortcuts and code snippets, you can save time and effort, allowing you to focus on creating beautiful and functional websites that meet your clients’ needs. Whether you’re a seasoned Showit designer or a newbie, these tools can help you achieve professional results with minimal hassle.

Advanced Custom Code Techniques

Pushing the Boundaries of Showit

For those who want to take their Showit websites to the next level, advanced custom code techniques offer endless possibilities. By diving deeper into coding, you can create complex and sophisticated designs that go beyond the standard features of the Showit platform. This is where your creativity and coding skills can truly shine.

Some advanced custom code techniques include:

• Custom CSS Code: Craft unique layouts and designs that set your site apart.
• JavaScript Code: Add interactive elements and animations to engage your visitors.
• HTML Code: Build custom structures and layouts to give your site a unique look and feel.

By mastering these advanced techniques, you can create truly unique and innovative websites that stand out from the crowd. Whether it’s a custom animation, an interactive widget, or a completely bespoke layout, advanced custom code allows you to push the boundaries of what’s possible on Showit.

Real Use Cases to Inspire You

Here are just a few fun things Showit designers are doing with custom code:

• Animated Text Line: Adds movement and draws attention.
• Sticky Menu on Scroll: Keeps navigation accessible.
• Scroll-triggered Animations: Reveal images or text on scroll.
• Instagram Feed Plugin: Embeds a live feed in a custom layout.
• Full Page Section Reveal: Pull attention to sales or portfolio sections.

You can get creative with elements like SVG icons, interactive data visualizations, or animated gradients. Showit gives you the canvas, and code lets you paint outside the lines.

---

Tips, Shortcuts & Troubleshooting

• Use the Notes panel in Showit to label what your custom code is doing.
• If something breaks, remove code blocks one by one to troubleshoot.
• For animations or scripts, be mindful of load time.
• Not everything will preview properly in Showit—always check the published link.

If you’re ever stuck, Showit’s support team is super helpful, and the community Facebook groups are full of designers sharing tricks.

---

Showit Users and Custom Code Communities

Connecting with Others for Support and Inspiration

One of the best ways to enhance your custom code skills and stay inspired is by connecting with other Showit users. There are several online communities and forums where you can share your experiences, ask questions, and get support from fellow Showit enthusiasts.

Some popular online communities for Showit users include:

• The Showit Facebook Group: A vibrant community where users can ask questions, share their work, and get feedback.
• The Showit Subreddit: A space for users to share their knowledge, experiences, and tips.
• The Showit Forum: An official platform where users can ask questions and get support from other users and experts.

By joining these communities, you can learn new skills, get inspiration, and stay up-to-date with the latest trends and techniques in custom code. Whether you’re looking for advice on a specific coding issue or just want to see what others are creating, these communities are invaluable resources for Showit users.

By following this plan, the new sections will seamlessly integrate into the existing article, providing valuable information while maintaining the same engaging and informative tone.

Helpful Tools & Resources

• CodePen.io – Test your code snippets before adding them to Showit.
• FontAwesome – Free icon library you can embed.
• Google Fonts – Copy/paste font embed codes for endless style options.
• Animista.net – Easy CSS animations you can paste into your site.
• Stack Overflow – Search code errors and fixes.

---

Wrap-Up: Let Your Creativity Fly

Adding custom code to your Showit website isn’t just for tech wizards. With just a little bit of effort, you can unlock powerful features and fine-tune your design exactly how you want it.

Start small. Try customizing a button hover or embedding a countdown. The more you experiment, the more confident you’ll get.

💡 Ready to customize your site?

Tag me when you add your first code snippet – I’d love to see it in action!

Need extra help to add custom code to your Showit website? Contact us through this form.

And if you’re looking for more Showit tutorials, design tricks, or ready-to-use templates, check out my full resource library here.

FAQ: Custom Code on Showit

Q: Can I add custom CSS to specific pages only in Showit?

A: Yes! You can add a CSS <style> tag directly inside an Embed Code Box on a specific canvas or page. This keeps your styles limited to just that section instead of applying them site-wide.

---

Q: Where do I paste custom code if I want it to apply to the whole website?

A: Go to Site Settings → Custom Head HTML. Code added here (like fonts or site-wide CSS rules) will load on every page of your Showit site.

---

Q: Does Showit support JavaScript?

A: Yes, you can add JavaScript using an Embed Code Box or inside the Custom Head HTML. Just be careful with script conflicts and test thoroughly—especially if you’re using multiple plugins or animations.

---

Q: Can I use custom fonts that aren’t available in Showit’s default list?

A: Definitely. You can embed fonts from Google Fonts or Adobe Fonts by adding the appropriate <link> tag to your Head HTML and styling elements using CSS with the font-family property.

---

Q: Will custom code show up in the Showit preview?

A: Not always. Some custom code, especially JavaScript-based animations or third-party embeds, might not fully function in the Showit preview. It’s best to publish your site and test on the live link.

---

Q: Can I undo or remove custom code if I make a mistake?

A: Yes! You can simply delete the Embed Code Box from the canvas or remove the code from the Head HTML. It’s smart to keep a copy of your snippets saved in Notion or Google Docs in case you need to re-add them later.

---

Q: Will custom code affect my WordPress blog posts in Showit?

A: Not directly. Showit controls the design of your blog, but the blog content lives on WordPress. If you want to style or script something inside the blog post content area, you may need to add code via the WordPress dashboard.

---

Q: Do I need a developer to add code to Showit?

A: Not at all! Many code snippets (like for fonts, animations, or forms) are copy-and-paste friendly. If you’re comfortable experimenting, you can implement a lot on your own. For more complex features, you could hire a developer or reach out to a Showit-savvy designer.