get
20
%
off
A striking, heart-shaped promotional badge featuring a stark 3D drop shadow, a transparent background, and a subtle CSS heartbeat animation.
Standard rectangular banners can often disrupt the flow of a carefully curated storefront. The Heart 3D Promo Badge solves this by acting as a floating, transparent background sticker that injects seasonal urgency directly into your layout without breaking your grid. Designed with a trendy, high-contrast aesthetic, this heart-shaped promo widget is the perfect drop-in element for Valentine's Day, Mother's Day, or brand anniversaries.
This e-commerce sale heart moves away from flat, corporate designs in favor of a bold, tactile look.
Stark 3D Drop Shadow: To guarantee readability over any background—whether it’s a busy hero image, a video loop, or a product grid—the badge features a brutalist, dark offset shadow layer. This gives the 3D sale badge physical weight and an editorial edge.
Playful Typography Hierarchy: The internal messaging uses a scattered, dynamic layout ("get" positioned top-left, a massive "20%" dead center, and "off" tucked at the bottom). Because it strictly utilizes font-family: inherit, the typography automatically inherits your store’s exact fonts, making the widget look like a custom-coded part of your theme.
Seamless Transparency: There is no bounding box or background fill. The vector heart floats naturally over your existing site imagery, acting as a true inline promotional badge.
Creating layered, non-rectangular shapes on the web can often cause responsive scaling issues, but this widget is engineered for bulletproof stability.
Dual SVG Architecture: Built using two native, inline SVG paths layered via CSS absolute positioning, this Shopify seasonal widget remains mathematically perfect and razor-sharp on all Retina displays, no matter how large it scales.
Pure CSS Heartbeat Animation: The badge features a subtle, double-pulse animation built purely with CSS keyframes. It naturally draws the user's eye but immediately pauses if hovered over, ensuring the link remains a stable click target.
Universal Accessibility: The heartbeat motion natively respects system-level prefers-reduced-motion settings, freezing instantly for users who prefer static layouts.
This Valentine's Day discount widget is incredibly versatile. Pin it to the corner of your main hero banner, float it next to a featured product image, or drop it into a sticky sidebar to drive massive traffic during gifting-focused retail holidays.
Bring this layout to life on your website in just a few clicks.
Edit Heart 3D Promo Badge visually using the native Squarespace extension
First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:
Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.
Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.
Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.
See Squarespace installation guide
Connect natively via Gutenberg or Elementor
Make sure you have the free Redesignee WordPress Plugin installed. To drop the Heart 3D Promo Badge into Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!
WordPress plugin installation guide
Quick copy-and-paste for custom setups
If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.
This Heart 3D Promo Badge widget is optimized and categorized inside the following layout packs:
Make an unmissable statement. Customize high-impact typography elements, brutalist layouts, and high-contrast sections from our cloud repository to craft layouts that refuse to be ignored.
Make your layouts stand out instantly. Tweak advanced visual elements inside our cloud design workspace, copy the lightweight framework strings, and drop them seamlessly onto your canvas.
