5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:Ta2a,

Overview

Webshop Notification is a powerful Framer component designed to display animated activity notifications such as purchases, reviews, sign-ups, or other events. It helps create a sense of live activity and social proof on your website, which can increase trust and encourage visitors to take action. The component is lightweight, easy to use, and designed to integrate seamlessly into modern Framer projects while still offering extensive customization options.

Flexible notification content

Add and customize as many notifications as you want through the Items list. This makes the component adaptable to many different use cases.

• Add or delete notifications

• Customize title, subline, and meta text for each item

• Simulate purchases, reviews, sign-ups, or other activity

• Easily adapt content to match your brand or product

Smooth animations and timing control

Fine-tune how notifications appear and move to match the tone of your interface.

• Control how often notifications appear with Interval

• Adjust motion feel using Animation Speed

• Customize entry behavior with Entry Distance and Scale

• Subtle animations that feel natural and modern

Advanced layout control

Easily adjust how notifications stack and position on the page.

• Control spacing between notifications

• Use Top → Stack and Bottom Overlap for layered effects

• Create either spacious or tightly stacked layouts

• Safe Padding keeps notifications positioned correctly

Complete styling customization

Match the notification cards to your design system with flexible styling options.

• Customize Card Color and Card Alpha

• Adjust Card Radius for softer or sharper corners

• Control Shadow intensity for depth

• Modify Icon Size and Icon Fit for visual balance

Background and container Options

Match the notification cards to your design system with flexible styling options.

• Customize Card Color and Card Alpha

• Adjust Card Radius for softer or sharper corners

• Control Shadow intensity for depth

• Modify Icon Size and Icon Fit for visual balance

Practical and versatile use cases

Designed to work across many types of websites and projects.

• Show recent purchases or product activity

• Display customer reviews or ratings

• Highlight sign-ups or engagement events

• Add subtle social proof to landing pages and webshops

59:[["$","$L5c",null,{"post":{"id":"019cdc88-8e41-70c6-8b83-fca9d4b43565","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"45c19b0d-7808-4c47-a821-6675327f7069","name":"Bokaa","slug":"bokaa-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/103001/avatar-JdwdlE4mfXtsFnIrWXXuaEBJmB7jaw.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Ub5NCA3ajUpfTEgsiFU0","resolved":true,"title":"E-com notifications","body":"$5d","bodyJson":null,"introduction":"Customizable iOS-style notifications","slug":"e-com-notifications","author":{"framerUserId":"45c19b0d-7808-4c47-a821-6675327f7069","name":"Bokaa","slug":"bokaa-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/103001/avatar-JdwdlE4mfXtsFnIrWXXuaEBJmB7jaw.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Ub5NCA3ajUpfTEgsiFU0/e-com-notifications-T67H4czk6zsW5sbY054rackqWstPne","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-06T08:45:21.769Z","updatedAt":"2026-03-11T10:44:37.196Z","publishedAt":"2026-03-11T10:54:22.785Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://webshop-notification.framer.website/","price":"1","paymentUrl":"https://buy.stripe.com/28EfZi4uX7zUa0ve4f7Re0f","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"5caoDaCcHtbMDls8C7Q3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-11T10:54:22.785Z","updatedAt":"2026-03-11T10:54:22.785Z","reported":false}}],"$L5e"]

Suggested for you