Showit Code Snippets: Our Favorite Custom Effects

As a Showit website designer, I love being able to flex my creative muscles and design custom Showit websites that display my clients’ offers in a compelling way. I do this by adding custom code via Showit code snippets. These custom effects and animations take my designs to the next level, beyond what is possible within the native platform!

Showit code snippets are small pieces of custom code (CSS, HTML, or JavaScript) that you can add to your Showit site to achieve special design effects or functionalities. Although Showit is a no-code builder, these snippets unlock features beyond the native tools – from animated text to image hover effects. In this post, I’m sharing my review of Seedling Studio’s Showit code snippets course: Showit Shortcuts. If you’re a fellow designer looking to “up your Showit design game,” keep reading!

Affiliate Disclaimer: Some of the links on this post are affiliate links, and I may earn a commission if you make a purchase. As always, I only recommend tools that I both love and personally use in my business.

Showit Code Snippets Course Review

About the Course: Showit Shortcuts

Showit Shortcuts is hands-down one of the best courses I have ever purchased. It’s allowed me to push the boundaries of what’s possible on a Showit website with advanced coding snippets. There are tons of open-source codes available out there, but I was tired of wanting to pull my hair out when I couldn’t get them to work on the Showit platform. There are also 3rd-party widgets that you can add to your site, but many cost extra per use (for each client) and have to be continually managed to ensure they don’t break or create an error on the site. Erica alleviated all of my frustration with her course, Showit Shortcuts.

Not only does she provide the code snippets you need to add the code to a Showit website, but she also provides education on how the codes *actually* work. This is crucial for knowing how to customize the codes to fit your client’s brand for each website project that you’re working on. Plus, everything is shared with a Showit share key, so you can easily add the codes into your design via pages or canvases from your design library inside Showit.

The value of the course is more than worth it! Aside from the invaluable coding skills that you’ll learn, you can also charge more for websites that include these effects (since they are so sought-after by clients) and can easily make back your investment in just a few site designs.

The Support

Erica also provides great support for the course. If you run into issues with the codes or have additional questions on how to make it work differently for what you or your client wants, she is always willing to help. There is a comment section within the course where you can ask questions, and see where other designers ran into issues, along with Erica’s responses. You can also email her directly and get a pretty quick reply.

I highly recommend Showit Shortcuts to anyone who wants to build on their design skills and boost the creativity of their custom websites! 

[Related: Looking for more website tips? You might also like this post]

Showit Code Snippets Included in the Course

I really can’t say enough good things about Showit Shortcuts. Erica even offers the option to purchase some of the code snippets individually now. But if you go with full the course (the best value in my opinion!), here are all of the code snippets that are included: 

Blog Styling 

While Showit’s blog integration with WordPress is great, the styling of the blog often doesn’t align with the styling of the rest of your Showit site. With this custom code lesson, you can learn how to:

• Remove the underline-on-hover effect to blog post titles
• add CSS styling for H2, H3, H4, H5, H6
• Style other elements within the blog post

Button Effects 

Easily create buttons in Showit using this code snippet. Since native Showit buttons are currently only designed with a rectangle, text box, and click-action, this snippet allows you to expand your button styles with six different effects:

• outline fill
• change color
• fun border
• float
• wiggle
• glow

The Button Effects code snippet is available for purchase individually.

Animated Underline Effects

This code snippet is similar to the button effects, but it’s an underline hover effect that allows for:

• grow right-to-left
• grow from center
• wavy underline
• underline to highlight
• half to full highlight

Hover Drop Down Menu

Hover drop-down menus are a highly requested feature. There isn’t a way to natively do this in the Showit builder without a click action and separate canvas views. This code snippet comes in handy when your client desires a hover drop-down menu on the desktop version of their site.  

Spinning Circle Text

This is one of my favorite code snippets and one we try to implement into every design. Erica teaches you how to change the font, color, speed, direction, and size of the spinning circle text. It’s a really cool feature to add movement and visual interest to any canvas! 

Infinite Text Marquee

Another favorite! This is something you *can* create in the Showit builder using transition effects, but it is not infinite – it has an ending. So this infinite text marque is a great option instead. It’s perfect for a “coming soon” line, repeating offers, or a long list of information. Purchase the infinite text marque code snippet individually.

Horizontal Scrolling 

This snippet is only available for desktop design but is a cool feature that really grabs the viewer’s attention when the scroll changes from vertical to horizontal. You can create a full page with horizontal scroll, or just specific canvases. We have this on our homepage so it scrolls normally (vertically) until you hit this canvas, and then three canvases scroll horizontally. The horizontal scroll code snippet is available individually here.

Page Preloader

This fun feature allows you to have a custom loading page that disappears after a set number of seconds or as soon as the page loads. You can design it directly in Showit and then apply the code snippet with your desired settings. It’s great for adding brand elements or your tagline before viewers land on your site, without actually using a separate splash page. If you didn’t already know, splash pages are bad for SEO!

Purchase the Page Preloader code snippet individually.

Before and After Slider

The Before-and-After slider is a great option for photography websites to show a photo editing comparison. This code snippet could also be used for:

• Selling Adobe Lightroom presets
• Interior designers before-and-afters
• Logo designers before-and-afters
• Renovation before-and-afters
• and more!

Image Marquee

Another snippet that’s available for individual purchase, the Image Marquee is a great option to advertise “as seen on” logos. Or feature logos of businesses that you’ve worked with. 

Image on Hover

This allows you to hover over text to show an image. We used it on the North Design Co. website here! The native Showit builder has a hover option to make an image disappear completely, revealing another image, icon, or text beneath — but this code specifically allows an image to appear in a different location on the canvas, while hovering over text on desktop. Note that this feature does NOT work on mobile, since there is no hover functionality on mobile devices.   

This snippet is available individually as well. 

Typewriter Text Effects 

I love this snippet because it allows you to design a text line that appears to be typed out, deleted, and then replaced with a new word that’s typed out.  

Purchase typewriter effects here. 

Mockup Scroll on Hover

I love the Image or Mockup Scroll on Hover code snippet for showcasing a scrolling effect of a website design. While this code snippet only works on desktop, it’s a perfect way to incorporate animation on a long image without the need for video or gifs. Plus, the mockup works on any device mockup image — iPads, Macbooks, smartphones, etc. Get the Scroll on Hover code snippet here.

Countdown Timer

The Countdown Timer code snippet for Showit is awesome for a coming soon page for a new website that is going live on a specific day or time. It could also work well for new product launches or building hype around a new offer.  This code snippet is offered exclusively within the Showit Shortcuts course.

Animated Number Counter

The Animated Number Counter code snippet for Showit can be used to create visual interest with numbers or statistics about a business. The counter automatically begins once the numbers scroll into view on the site. The course teaches you how to set which direction the numbers rotate the plus how to add prefix and suffixes, like $, +, %, K, and more! Grab the Animated Number counter code snippet individually here.

Gradient Background Animation

This Showit code snippet allows you to create gradient colors that move across the background, bringing visual interest to a specific canvas.

No-Code Showit Templates — Included in the Course

The Showit share key for this course also includes some designs that are NO CODE, but that are frequently requested and difficult to build from scratch. Including:

Split Screen Mega Menu

The Split Screen Mega menu can be designed natively in Showit using two separate canvases with animations and click actions. However, it’s much easier to have this template to start with, which can easily be customized to fit within any design, and it’s included with the Showit Shortcuts course!

Pop-Ups On-Click and On-Scroll

Many Showit users embed pop-ups from 3rd party tools like Flodesk and BDOW!, but it’s possible to incorporate pop-ups directly within the Showit design app. This can be created by designing a canvas that’s hidden to start and then either setting the click action to show the canvas, or a scroll action. Templates for both of these pop-ups are included in the share key that comes with the Showit Shortcuts course.

FAQ Toggle Drop-Downs

Creating FAQs manually in Showit can be very cumbersome. It requires creating multiple different canvases with different canvas views for open and closed. The Showit Shortcuts course saves time on creating FAQs in Showit, by including a canvas share key for ones that are already designed. Three different variations are included — a basic toggle, a toggle with a colored background, and a half page with an image (as shown below).

Half & Half Page Scrolling

A half page scrolling affect is created by having a canvas with an image that’s set sticky to top, with transparent canvases with a higher stacking order below it. Again this is a feature that can be natively designed in Showit, but you can save a significant amount of time by starting with the template from the Showit Shortcuts course.

Looking for a Showit Website Designer?

If you’re looking for a website designer who can implement fun effects like these, we’d love to hear from you! Get in touch and tell us all about your vision for your website. 

Pin this post!