Shop

How to Make a Roblox Shop GUI

A shop needs three things: a scrollable area, items that tile into a grid, and a way for the purchase to actually happen. This guide builds the UI with a ScrollingFrame + UIGridLayout, then wires the buy action through a RemoteEvent so the server verifies it. Start from the shop template to skip the layout work.

Open the Shop template →

1. The panel and scrollable grid

A Frame holds everything; a ScrollingFrame is where items go. Adding a UIGridLayout to the ScrollingFrame makes every item cell tile automatically into a grid — add as many items as you want and they reflow.

local panel = Instance.new("Frame")
panel.Size = UDim2.fromScale(0.6, 0.76)
panel.Position = UDim2.fromScale(0.2, 0.12)
panel.Parent = gui

local scroll = Instance.new("ScrollingFrame")
scroll.Size = UDim2.fromScale(1, 0.8)
scroll.BackgroundTransparency = 1
scroll.ScrollBarThickness = 6
scroll.Parent = panel

local grid = Instance.new("UIGridLayout")
grid.CellSize = UDim2.fromOffset(120, 120)
grid.CellPadding = UDim2.fromOffset(10, 10)
grid.Parent = scroll

2. An item cell

Each item is a Frame with an ImageLabel, a price label, and a buy button. Because of the UIGridLayout, just parenting it to the ScrollingFrame places it in the grid.

local function makeItem(name, price, imageId)
	local cell = Instance.new("TextButton")
	cell.Text = ""
	cell.BackgroundColor3 = Color3.fromRGB(40, 41, 51)
	cell.Parent = scroll

	local icon = Instance.new("ImageLabel")
	icon.Size = UDim2.fromScale(1, 0.7)
	icon.BackgroundTransparency = 1
	icon.Image = "rbxassetid://" .. imageId
	icon.Parent = cell

	local label = Instance.new("TextLabel")
	label.Size = UDim2.fromScale(1, 0.3)
	label.Position = UDim2.fromScale(0, 0.7)
	label.BackgroundTransparency = 1
	label.Text = name .. " - " .. price
	label.Parent = cell

	return cell
end

3. Wire the purchase through a RemoteEvent

Never trust the client with money. The buy button fires a RemoteEvent; the server checks the player can afford it, deducts currency, and grants the item.

-- LocalScript (client)
buyRemote = game.ReplicatedStorage:WaitForChild("BuyItem")
cell.MouseButton1Click:Connect(function()
	buyRemote:FireServer(itemId)
end)

-- Script (server)
buyRemote.OnServerEvent:Connect(function(player, itemId)
	-- verify currency, deduct, grant item
end)

Tip: Always validate purchases on the server. A client can fire a RemoteEvent with any itemId, so the server must re-check price and ownership.

FAQ

How do I make the shop scroll smoothly?

Use a ScrollingFrame with AutomaticCanvasSize = Enum.AutomaticSize.Y and a UISizeConstraint or the UIGridLayout's cells defining height. ScrollBarThickness controls the scrollbar width.

How do items tile into a grid?

Parent a UIGridLayout to the ScrollingFrame. Set CellSize and CellPadding; every child Frame then auto-positions into rows and columns.