squarespell

Listing checked checked Aug 2026 How verification works We checked the creator, the product page, the platform and the pricing. We have not installed it ourselves.

Squarespace Hover Effect Plugin: PillShowcase

By Squarespell , see everything Squarespell publishes Squarespace

Add a premium interactive hover effect to your Squarespace product pages. PillShowcase auto-detects light and dark backgrounds, is fully responsive.
  • Auto-detects your section color adapts perfectly to light, dark, orange, or any background
  • Smooth animated image transitions with glassmorphism text overlays
  • Works on any Squarespace 7.1 page no theme restrictions
  • Zero coding required copy, paste, replace placeholders, save
  • Fully responsive stacks into a clean horizontal pill row on mobile
  • Automatically inherits your site's heading and body fonts
  • Add unlimited pills, images, and feature overlays
  • Animated progress bar and slide counter included
  • Lightweight no external libraries, no page speed impact
  • Mobile Responsive

Features

Everything you need. Nothing you don’t.

Pure, purposeful, battle-tested on live Squarespace 7.1 sites.

  • Automatic Background Color Detection

    Reads your Squarespace section's real background color at load time and adapts all pill borders, text, and overlay colors instantly. Light section, dark section, custom brand color it always looks correct without touching a single setting.

  • Works on Any Section Color

    White, black, charcoal, terracotta, navy, orange place PillShowcase anywhere on your site. It detects and adjusts automatically every single time.

  • Fully Responsive on Mobile

    On desktop, pills stack vertically on the left. On mobile, they reflow into a clean horizontal wrapping row across the top. Touch-optimized with zero tap delay. Your feature showcase looks sharp on every screen size.

  • Smooth Premium Animations

    Images fade in with a cubic-bezier scale transition. Text overlays slide up with a blur-glass frosted effect. The result feels like a high-end product page not a Squarespace block.

  • Inherits Your Site Fonts Automatically

    Reads your Squarespace 7.1 heading and body font CSS variables and applies them. No font settings to configure. Your brand stays consistent throughout.

  • Copy-Paste Install

    The CSS goes into Custom CSS and the JavaScript into Footer Code Injection. No npm, no build tools, no FTP and no developer invoice.

Evidence

Customer reviews & feedback

No Squarespell customer reviews yet.

Squarespell reviews

Nobody has reviewed this here yet. Be the first, we only publish reviews left on Squarespell in this section.

FAQ

Common questions answered

How do I add a hover effect to my Squarespace product page?

Still have a question? Email us →

How do I add a hover effect to my Squarespace product page?

Add a Code block to any Squarespace 7.1 page, paste the full PillShowcase code, upload your images via Custom CSS → Custom Files, replace the image URL placeholders and text placeholders, and save. The entire process takes under 10 minutes and a full screenshot guide is included with your purchase.

Does this hover effect work on dark Squarespace sections?

Yes this is the core feature. PillShowcase reads the actual computed background color of your Squarespace section at page load and automatically switches all colors to match. Dark section gets white-based ink. Light section gets black-based ink. Any color in between is calculated and handled automatically.

Does it work on mobile?

Yes. On screens below 680px, the vertical pill sidebar transforms into a horizontal wrapping pill row. Touch events are optimized with touchstart to eliminate tap delay. The image stage resizes proportionally. Everything works on iPhone, Android, and tablets.

Do I need to know CSS or JavaScript?

No. All dynamic content your images, labels, headlines, and descriptions is replaced using clearly labeled placeholders inside the code. If you can add a code block and copy-paste text, you can install PillShowcase.

Can I add more than the default number of pills?

Yes. Duplicate one pill block, give it a unique key, add a matching image slide and text overlay with the same key, and update one line in the JavaScript array. Full copy-paste snippets and instructions are included in the setup guide.

Will it slow down my Squarespace site?

No. The plugin uses zero external JavaScript libraries. All animations are CSS transitions. There is no measurable impact on page load speed or Core Web Vitals.

What Squarespace version does this work on?

Squarespace 7.1 only. It is not compatible with Squarespace 7.0.

What happens if I change my section background color after installing?

PillShowcase detects the background at page load time, so any theme or color changes you make in Squarespace automatically reflect the next time the page loads. No updates to the plugin code needed.

Also from Squarespell

More plugins to power your Squarespace site

Browse more plugins