How to make a shop GUI in Roblox Studio

local Players = game:GetService("Players")

local STARTING_COINS = 200 -- enough to test the shop; set it to 0 once players can earn coins

local function setupLeaderstats(player: Player)
	local leaderstats = Instance.new("Folder")
	leaderstats.Name = "leaderstats"

	local coins = Instance.new("IntValue")
	coins.Name = "Coins"
	coins.Value = STARTING_COINS
	coins.Parent = leaderstats

	leaderstats.Parent = player
end

Players.PlayerAdded:Connect(setupLeaderstats)
for _, player in Players:GetPlayers() do
	setupLeaderstats(player)
end

Keep one leaderstats script only. Two scripts that each create a leaderstats folder give every player two folders, and the shop may read the wrong one.

export type ShopItem = {
	id: string, -- saved in data stores later: never change it once players own the item
	name: string, -- shown on the card; safe to change
	price: number, -- in Coins
	description: string,
	toolName: string, -- the Tool in ServerStorage.ShopItems that the player receives
}

-- Cards appear in this order
local items: { ShopItem } = {
	{
		id = "sword",
		name = "Classic Sword",
		price = 50,
		description = "A basic sword for close fights.",
		toolName = "ClassicSword",
	},
	{
		id = "flashlight",
		name = "Flashlight",
		price = 25,
		description = "Lights up dark corners.",
		toolName = "Flashlight",
	},
	{
		id = "grapple",
		name = "Grapple Hook",
		price = 150,
		description = "Reach high ledges.",
		toolName = "GrappleHook",
	},
	{
		id = "speedcoil",
		name = "Speed Coil",
		price = 300,
		description = "Run faster while you hold it.",
		toolName = "SpeedCoil",
	},
}

local byId: { [string]: ShopItem } = {}
for _, item in items do
	byId[item.id] = item
end

local ShopCatalog = {}

ShopCatalog.items = items

-- Returns the item with this id, or nil if there is no such item
function ShopCatalog.get(id: string): ShopItem?
	return byId[id]
end

-- The Player attribute the server sets to true when the player owns an item
function ShopCatalog.ownedAttribute(id: string): string
	return "Owns_" .. id
end

return ShopCatalog

Each item has an id as well as a display name. The id is what the server records when a player owns something, so you can rename "Classic Sword" later without breaking saved purchases. The descriptions are only text on the card; what a Tool does is up to that Tool's own scripts.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

-- What the ShopCatalog module returns, so strict type checking can check the fields we use
type ShopItem = { id: string, name: string, price: number, description: string, toolName: string }
type Catalog = {
	items: { ShopItem },
	get: (id: string) -> ShopItem?,
	ownedAttribute: (id: string) -> string,
}

local ShopCatalog = require(ReplicatedStorage:WaitForChild("ShopCatalog")) :: Catalog
local buyItem = ReplicatedStorage:WaitForChild("ShopRemotes"):WaitForChild("BuyItem") :: RemoteFunction

local player = Players.LocalPlayer

local COLOURS = {
	panel = Color3.fromRGB(24, 20, 36),
	card = Color3.fromRGB(38, 32, 56),
	accent = Color3.fromRGB(124, 77, 255),
	owned = Color3.fromRGB(70, 66, 84),
	text = Color3.fromRGB(240, 238, 245),
	muted = Color3.fromRGB(170, 165, 185),
	good = Color3.fromRGB(120, 220, 150),
}
local REGULAR = Font.fromEnum(Enum.Font.BuilderSans)
local BOLD = Font.fromEnum(Enum.Font.BuilderSansBold)

local function addCorner(parent: GuiObject, radius: number)
	local corner = Instance.new("UICorner")
	corner.CornerRadius = UDim.new(0, radius)
	corner.Parent = parent
end

local function addPadding(parent: GuiObject, pixels: number)
	local padding = Instance.new("UIPadding")
	padding.PaddingTop = UDim.new(0, pixels)
	padding.PaddingBottom = UDim.new(0, pixels)
	padding.PaddingLeft = UDim.new(0, pixels)
	padding.PaddingRight = UDim.new(0, pixels)
	padding.Parent = parent
end

local function newLabel(parent: GuiObject, text: string, textSize: number, font: Font): TextLabel
	local label = Instance.new("TextLabel")
	label.BackgroundTransparency = 1
	label.Text = text
	label.TextSize = textSize
	label.FontFace = font
	label.TextColor3 = COLOURS.text
	label.TextXAlignment = Enum.TextXAlignment.Left
	label.TextWrapped = true
	label.Parent = parent
	return label
end

local function newButton(parent: GuiObject, text: string): TextButton
	local button = Instance.new("TextButton")
	button.BackgroundColor3 = COLOURS.accent
	button.TextColor3 = COLOURS.text
	button.FontFace = BOLD
	button.TextSize = 18
	button.Text = text
	button.Parent = parent
	addCorner(button, 8)
	return button
end

-- ScreenGui: holds everything the shop draws on the player's screen
local gui = Instance.new("ScreenGui")
gui.Name = "ShopGui"
gui.ResetOnSpawn = false -- keep the shop when the character respawns

-- A button on the left edge that opens and closes the shop
local openButton = Instance.new("TextButton")
openButton.Name = "OpenShop"
openButton.AnchorPoint = Vector2.new(0, 0.5)
openButton.Position = UDim2.new(0, 16, 0.5, 0)
openButton.Size = UDim2.fromOffset(110, 44)
openButton.BackgroundColor3 = COLOURS.accent
openButton.TextColor3 = COLOURS.text
openButton.FontFace = BOLD
openButton.TextSize = 20
openButton.Text = "Shop"
openButton.Parent = gui
addCorner(openButton, 10)

-- The shop window: centred, hidden until the player opens it
local panel = Instance.new("Frame")
panel.Name = "Panel"
panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position = UDim2.fromScale(0.5, 0.5)
panel.Size = UDim2.fromScale(0.8, 0.75)
panel.BackgroundColor3 = COLOURS.panel
panel.Visible = false
panel.Parent = gui
addCorner(panel, 14)
addPadding(panel, 12)

local sizeLimit = Instance.new("UISizeConstraint")
sizeLimit.MaxSize = Vector2.new(640, 460) -- stops the window growing huge on big screens
sizeLimit.Parent = panel

local title = newLabel(panel, "Shop", 26, BOLD)
title.Size = UDim2.new(0.5, 0, 0, 32)

local coinsLabel = newLabel(panel, "Coins: ...", 20, BOLD)
coinsLabel.AnchorPoint = Vector2.new(1, 0)
coinsLabel.Position = UDim2.new(1, -44, 0, 0)
coinsLabel.Size = UDim2.new(0.5, -44, 0, 32)
coinsLabel.TextXAlignment = Enum.TextXAlignment.Right

local closeButton = newButton(panel, "X")
closeButton.AnchorPoint = Vector2.new(1, 0)
closeButton.Position = UDim2.fromScale(1, 0)
closeButton.Size = UDim2.fromOffset(32, 32)
closeButton.BackgroundColor3 = COLOURS.card

-- Replies from the server, such as "You need 20 more coins.", show here
local status = newLabel(panel, "", 18, REGULAR)
status.AnchorPoint = Vector2.new(0, 1)
status.Position = UDim2.fromScale(0, 1)
status.Size = UDim2.new(1, 0, 0, 24)
status.TextColor3 = COLOURS.muted

-- ScrollingFrame: the area that scrolls when there are more cards than fit
local list = Instance.new("ScrollingFrame")
list.Name = "Items"
list.Position = UDim2.fromOffset(0, 44)
list.Size = UDim2.new(1, 0, 1, -76)
list.BackgroundTransparency = 1
list.BorderSizePixel = 0
list.ScrollBarThickness = 6
list.ScrollingDirection = Enum.ScrollingDirection.Y
list.CanvasSize = UDim2.new() -- starts at zero; AutomaticCanvasSize grows it to fit the cards
list.AutomaticCanvasSize = Enum.AutomaticSize.Y
list.Parent = panel

-- UIGridLayout: lays the cards out in rows and wraps them to the next row
local grid = Instance.new("UIGridLayout")
grid.CellSize = UDim2.fromOffset(180, 200)
grid.CellPadding = UDim2.fromOffset(12, 12)
grid.SortOrder = Enum.SortOrder.LayoutOrder
grid.Parent = list

local function makeCard(item: ShopItem, order: number)
	local card = Instance.new("Frame")
	card.Name = item.id
	card.LayoutOrder = order
	card.BackgroundColor3 = COLOURS.card
	card.Parent = list
	addCorner(card, 10)
	addPadding(card, 10)

	local nameLabel = newLabel(card, item.name, 20, BOLD)
	nameLabel.Size = UDim2.new(1, 0, 0, 26)

	local description = newLabel(card, item.description, 15, REGULAR)
	description.Position = UDim2.fromOffset(0, 30)
	description.Size = UDim2.new(1, 0, 1, -80)
	description.TextColor3 = COLOURS.muted
	description.TextYAlignment = Enum.TextYAlignment.Top

	local buyButton = newButton(card, "")
	buyButton.Name = "Buy"
	buyButton.AnchorPoint = Vector2.new(0, 1)
	buyButton.Position = UDim2.fromScale(0, 1)
	buyButton.Size = UDim2.new(1, 0, 0, 40)

	local ownedAttribute = ShopCatalog.ownedAttribute(item.id)
	local busy = false

	local function refresh()
		if player:GetAttribute(ownedAttribute) == true then
			buyButton.Text = "Owned"
			buyButton.BackgroundColor3 = COLOURS.owned
			buyButton.AutoButtonColor = false
		else
			buyButton.Text = `Buy: {item.price} coins`
			buyButton.BackgroundColor3 = COLOURS.accent
			buyButton.AutoButtonColor = true
		end
	end

	buyButton.Activated:Connect(function()
		if busy or player:GetAttribute(ownedAttribute) == true then
			return
		end
		busy = true
		buyButton.Text = "Buying..."

		-- Send only the item id. The server looks up the price itself.
		local ok, bought, message = pcall(function()
			return buyItem:InvokeServer(item.id)
		end)
		if ok and type(message) == "string" then
			status.Text = message
			status.TextColor3 = if bought == true then COLOURS.good else COLOURS.muted
		else
			status.Text = "The shop did not answer. Try again."
			status.TextColor3 = COLOURS.muted
		end

		busy = false
		refresh()
	end)

	-- The server sets this attribute when the purchase goes through (or when saved items load)
	player:GetAttributeChangedSignal(ownedAttribute):Connect(refresh)
	refresh()
end

for index, item in ShopCatalog.items do
	makeCard(item, index)
end

openButton.Activated:Connect(function()
	panel.Visible = not panel.Visible
	status.Text = ""
end)

closeButton.Activated:Connect(function()
	panel.Visible = false
end)

gui.Parent = player:WaitForChild("PlayerGui")

-- Show the player's coins. The server owns the real value; this only displays it.
local leaderstats = player:WaitForChild("leaderstats")
local coins = leaderstats:WaitForChild("Coins") :: IntValue
local function updateCoins()
	coinsLabel.Text = `Coins: {coins.Value}`
end
coins.Changed:Connect(updateCoins)
updateCoins()

The buttons use Activated rather than MouseButton1Click: it fires for a mouse click, a tap on a phone and the A or cross button on a controller.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local ServerStorage = game:GetService("ServerStorage")

-- What the ShopCatalog module returns, so strict type checking can check the fields we use
type ShopItem = { id: string, name: string, price: number, description: string, toolName: string }
type Catalog = {
	items: { ShopItem },
	get: (id: string) -> ShopItem?,
	ownedAttribute: (id: string) -> string,
}

local ShopCatalog = require(ReplicatedStorage:WaitForChild("ShopCatalog")) :: Catalog
local buyItem = ReplicatedStorage:WaitForChild("ShopRemotes"):WaitForChild("BuyItem") :: RemoteFunction
local shopItems = ServerStorage:WaitForChild("ShopItems")

local COOLDOWN_SECONDS = 0.5
local lastRequest: { [Player]: number } = {}

local function giveTool(player: Player, template: Tool)
	-- Backpack: the player can use the tool straight away
	local backpack = player:FindFirstChildOfClass("Backpack")
	if backpack then
		template:Clone().Parent = backpack
	end
	-- StarterGear: Roblox copies it into the Backpack again every time the character spawns
	local starterGear = player:FindFirstChildOfClass("StarterGear")
	if starterGear then
		template:Clone().Parent = starterGear
	end
end

local function onBuyItem(player: Player, itemId: unknown): (boolean, string)
	-- 1. The only thing the client sends is an item id, so it must be a string
	if type(itemId) ~= "string" then
		return false, "That item does not exist."
	end

	-- 2. Ignore double clicks and scripted floods of requests
	local now = os.clock()
	local last = lastRequest[player]
	if last and now - last < COOLDOWN_SECONDS then
		return false, "Slow down a little."
	end
	lastRequest[player] = now

	-- 3. Look the item up in the server's own copy of the catalogue
	local item = ShopCatalog.get(itemId)
	if not item then
		return false, "That item does not exist."
	end

	local ownedAttribute = ShopCatalog.ownedAttribute(item.id)
	if player:GetAttribute(ownedAttribute) == true then
		return false, "You already own this."
	end

	local template = shopItems:FindFirstChild(item.toolName)
	if not (template and template:IsA("Tool")) then
		warn(`ShopItems has no Tool named {item.toolName} for shop item {item.id}`)
		return false, "This item is not available right now."
	end

	local leaderstats = player:FindFirstChild("leaderstats")
	local coins = leaderstats and leaderstats:FindFirstChild("Coins")
	if not (coins and coins:IsA("IntValue")) then
		return false, "Your coins have not loaded yet."
	end

	-- 4. The price comes from the catalogue, never from the client
	if coins.Value < item.price then
		return false, `You need {item.price - coins.Value} more coins.`
	end

	-- 5. Take the coins, then give the item. Nothing here yields, so two requests
	-- from the same player cannot both pass the checks above before this runs.
	coins.Value -= item.price
	giveTool(player, template)
	player:SetAttribute(ownedAttribute, true)

	return true, `You bought {item.name}.`
end

buyItem.OnServerInvoke = onBuyItem

Players.PlayerRemoving:Connect(function(player: Player)
	lastRequest[player] = nil
end)

Ownership is stored as a Player attribute such as Owns_sword. Attributes the server sets replicate to the player's device, so the LocalScript can switch that card to "Owned". A change a player makes to their own copy never reaches the server.

local MarketplaceService = game:GetService("MarketplaceService")
local Players = game:GetService("Players")

local VIP_PASS_ID = 0 -- replace 0 with your pass ID from Creator Hub
local VIP_WALK_SPEED = 24 -- the default is 16

local vipPlayers: { [Player]: boolean } = {}

local function applyPerks(character: Model)
	local humanoid = character:WaitForChild("Humanoid", 10)
	if humanoid and humanoid:IsA("Humanoid") then
		humanoid.WalkSpeed = VIP_WALK_SPEED
	end
end

local function grantVip(player: Player)
	-- Skip players who already have VIP, and players who left while Roblox was answering
	if vipPlayers[player] or player.Parent ~= Players then
		return
	end
	vipPlayers[player] = true
	player:SetAttribute("OwnsVIP", true) -- lets LocalScripts show "VIP owned"
	local character = player.Character
	if character then
		applyPerks(character)
	end
end

local function onPlayerAdded(player: Player)
	player.CharacterAdded:Connect(function(character: Model)
		if vipPlayers[player] then
			applyPerks(character)
		end
	end)

	-- Players who bought the pass before joining: ask Roblox once when they arrive
	local ok, ownsPass = pcall(function()
		return MarketplaceService:UserOwnsGamePassAsync(player.UserId, VIP_PASS_ID)
	end)
	if not ok then
		warn(`Could not check the VIP pass for {player.Name}: {ownsPass}`)
	elseif ownsPass then
		grantVip(player)
	end
end

-- Players who buy the pass during this session. Listen on the server only:
-- here wasPurchased is the real outcome, while a LocalScript's copy can be faked.
MarketplaceService.PromptGamePassPurchaseFinished:Connect(
	function(player: Instance, passId: number, wasPurchased: boolean)
		if wasPurchased and passId == VIP_PASS_ID and player:IsA("Player") then
			grantVip(player)
		end
	end
)

Players.PlayerAdded:Connect(onPlayerAdded)
for _, player in Players:GetPlayers() do
	task.spawn(onPlayerAdded, player)
end

Players.PlayerRemoving:Connect(function(player: Player)
	vipPlayers[player] = nil
end)

Ownership is checked in two places on purpose. UserOwnsGamePassAsync on join covers players who bought the pass before, and PromptGamePassPurchaseFinished covers a purchase made in this session. Roblox caches the ownership result and updates the cache when that event fires. The player.Parent check matters because UserOwnsGamePassAsync waits for Roblox to answer: without it, a player who leaves during that wait would stay in vipPlayers after PlayerRemoving has already cleaned up.

local MarketplaceService = game:GetService("MarketplaceService")
local Players = game:GetService("Players")

local VIP_PASS_ID = 0 -- the same pass ID as in the PassPerks script

local player = Players.LocalPlayer

local gui = Instance.new("ScreenGui")
gui.Name = "VipGui"
gui.ResetOnSpawn = false

local button = Instance.new("TextButton")
button.AnchorPoint = Vector2.new(0, 0.5)
button.Position = UDim2.new(0, 16, 0.5, 56) -- just below the Shop button
button.Size = UDim2.fromOffset(110, 44)
button.BackgroundColor3 = Color3.fromRGB(255, 196, 61)
button.TextColor3 = Color3.fromRGB(40, 28, 0)
button.FontFace = Font.fromEnum(Enum.Font.BuilderSansBold)
button.TextSize = 18
button.Parent = gui

local corner = Instance.new("UICorner")
corner.CornerRadius = UDim.new(0, 10)
corner.Parent = button

local function refresh()
	if player:GetAttribute("OwnsVIP") == true then
		button.Text = "VIP owned"
		button.AutoButtonColor = false
	else
		button.Text = "Get VIP"
		button.AutoButtonColor = true
	end
end

button.Activated:Connect(function()
	if player:GetAttribute("OwnsVIP") ~= true then
		-- Roblox shows its own purchase window; the server grants the perk afterwards
		MarketplaceService:PromptGamePassPurchase(player, VIP_PASS_ID)
	end
end)

player:GetAttributeChangedSignal("OwnsVIP"):Connect(refresh)
refresh()

gui.Parent = player:WaitForChild("PlayerGui")

The LocalScript only opens Roblox's purchase window. It never grants anything, so faking a click or the event on the client gains nothing.