How to Build a Working Shop GUI Step by Step

Hey there, future game developer! Today we’re going to build something really exciting: a working shop GUI where players can buy items with in-game currency. Don’t worry if you’re new to scripting—we’ll take it one step at a time, and by the end, you’ll have a shop you can customize for any game!

What We’re Building

Our shop will have three main features:

A button players can click to open the shop
Items displayed with prices
A system that checks if players have enough coins before letting them buy

This tutorial assumes you know the basics of Roblox Studio and where to find Explorer and Properties windows. Let’s get started!

Step 1: Setting Up the Shop GUI

First, we need to create the user interface. In Explorer, find StarterGui and add a ScreenGui. Rename it to “ShopGui”. Inside ShopGui, add a Frame—this will be our shop window.

Set the Frame’s properties like this:

Size: {0.4, 0},{0.5, 0} (this makes it 40% of screen width and 50% of screen height)
Position: {0.3, 0},{0.25, 0} (centers it nicely)
BackgroundColor3: Pick something that looks good!
Visible: false (we want it hidden at first)

Why do we set Visible to false? Because we want players to open the shop when they’re ready, not have it blocking their screen right away!

Step 2: Adding a Shop Button

Players need a way to open your shop. Inside the same ScreenGui, add a TextButton. Position it somewhere easy to click (like the top corner) and change its Text property to “SHOP”.

Now let’s make it work! Add a LocalScript inside the TextButton:

local button = script.Parent
local shopFrame = button.Parent.Frame

button.MouseButton1Click:Connect(function()
    shopFrame.Visible = not shopFrame.Visible
end)

This script toggles the shop on and off. The not keyword flips the Visible property—if it’s true, it becomes false, and vice versa. Pretty handy!

Step 3: Creating Shop Items

Inside your shop Frame, add a TextButton for each item you want to sell. For this tutorial, let’s create a speed boost. Set the button’s Text to something like “Speed Boost – 50 Coins”.

Why use TextButtons instead of TextLabels? Because buttons can detect clicks, which we’ll need for purchasing!

Step 4: Setting Up Player Currency

Before players can buy anything, they need money! We’ll use leaderstats, which is Roblox’s standard way to display player stats.

In ServerScriptService, create a Script (not a LocalScript) called “Leaderstats”:

game.Players.PlayerAdded:Connect(function(player)
    local leaderstats = Instance.new("Folder")
    leaderstats.Name = "leaderstats"
    leaderstats.Parent = player
    
    local coins = Instance.new("IntValue")
    coins.Name = "Coins"
    coins.Value = 100 -- starting money
    coins.Parent = leaderstats
end)

This creates a Coins value for every player who joins. We start them with 100 coins so they can actually buy something! This script runs on the server because currency should never be controlled by the client—that would let exploiters give themselves infinite money.

Step 5: The Purchase Script

Now for the exciting part—actually buying items! Add a LocalScript inside your item button:

local button = script.Parent
local player = game.Players.LocalPlayer
local price = 50

button.MouseButton1Click:Connect(function()
    local coins = player.leaderstats.Coins
    
    if coins.Value >= price then
        coins.Value = coins.Value - price
        player.Character.Humanoid.WalkSpeed = 32 -- speed boost!
        print("Purchase successful!")
    else
        print("Not enough coins!")
    end
end)

Let’s break this down:

We check if the player has enough coins using an if statement
If they do, we subtract the price and give them the speed boost
If they don’t, we print a message (later you could show a GUI message instead!)

Step 6: Testing Your Shop

Hit Play and test it out! Click your shop button—does the frame appear? Try buying the speed boost. If your character moves faster, congratulations! You’ve built a working shop!

Making It Better

Your basic shop works, but here are some ideas to improve it:

Add more items with different effects
Create feedback messages in TextLabels instead of just print statements
Use RemoteEvents to handle purchases on the server (more secure!)
Add images to your items using ImageLabels
Save purchases using DataStores so players keep items after leaving

Quick Recap

You’ve learned how to create a GUI, toggle visibility with buttons, set up player currency with leaderstats, and handle purchases with conditional statements. These are foundational skills you’ll use in almost every Roblox game!

Ready for the next step? Try learning about RemoteEvents to make your shop more secure, or explore DataStores to save player purchases permanently. Happy developing!

Author

karlito1501