Building Custom Shops and UI for In-Island Transactions | Creating in Fortnite
Shop UI shapes how players engage with in-island transactions. In this livestream, Derek Diaz, UI/UX Director at Epic Games, walks through menu patterns for different kinds of shops—from complex, category-heavy inventories to simpler, more focused layouts—and look at how to handle what players see after they complete a purchase
Every UI example from the stream will be published to the Snippets Repository on the Epic Developer Community, so you can explore, reuse, and build on them.
https://dev.epicgames.com/community/fortnite/snippets
New guide on shop UI best practices: https://dev.epicgames.com/documentation/fortnite/building-custom-ui-for-inisland-transactions-in-fortnite
More on in-island transactions:
Getting Started with In-Island Transactions
Livestream: https://www.youtube.com/live/4tDX0xr3ASY
Documentation: https://dev.epicgames.com/documentation/fortnite/your-in-island-transactions-in-fortnite
Pricing and Packaging Your In-Island Transactions
Livestream: https://www.youtube.com/live/S1XDXXr2erQ
Documentation: https://dev.epicgames.com/documentation/fortnite/pricing-and-packaging-your-in-island-transactions-in-fortnite
Learn more about UEFN: https://www.fortnite.com/developer
#Fortnite #UEFN #FortniteCreative #UnrealEditorForFortnite #gamedevelopment
Time Stamps:
0:00 Opening
4:16 Introduction & guest welcome
6:00 Overview of best practices and design principles for shop UI
9:01 Housekeeping: Q&A instructions and survey link
10:15 Demo start: default built-in storefront menu (debug commands)
14:01 Custom menu #1: clean minimalist shop with tabs and pages
19:38 Discussion: reducing motion/scrolling distraction
22:35 Custom menu #2: “over-the-top” red-themed shop with hover details
33:00 Custom menu #3: full-screen shop with visual hierarchy & featured item
37:07 Special offers & countdown timer design
41:17 Bundles UI and expandable offer button
45:01 Testing purchases & “owned” state feedback
49:31 Custom menu #4: vertical side-panel shop layout
53:00 Custom menu #5: 3D “haunted house” shop with camera integration
55:04 Discussion: humor vs. clarity in item descriptions (“cursed” items)
59:37 Transition to code walkthrough
1:00:42 Using the Verse in-island transactions template
1:03:26 UI Feature Example project overview
1:04:33 Verse code walkthrough: shop widget structure & variables
1:07:08 Data structure: entitlements, offers, and bundles explained
1:20:25 Live code fix (coconut → apple bug)
1:21:00 Base shop class & subclassing approach
1:32:02 Widget animations: startup, hover, zoom-in demo
1:40:05 Tile animation breakdown (smoke, gradient, contrast layers)
1:48:06 Countdown timer implementation in Verse
1:53:20 Debugging a binding/naming issue live
1:57:16 3D camera movement system for haunted house shop
2:03:55 Rapid-fire Q&A begins
2:04:01 Q: Custom pointer/cursor textures
2:06:02 Q: How long did this UI take to build?
2:10:36 Q: Mobile support for these menus
2:12:18 Q: Default audio for click/hover states
2:13:25 Closing thoughts & final UX advice from Derek
2:16:40 Closing