How to make a Roblox shop GUI

1. What makes a good shop

• Tabs by kind: for example Boosts, Passes and Currency. Players find things faster.
• Cards, not lists: each item gets a picture, a name, one line on what it does and a price button.
• Clear prices: show the Robux icon for Robux items and your coin icon for coin items, so nobody confuses them.
• One way in, one way out: a Shop button on the HUD and a big close button.

Write your list first: what's a game pass (bought once), what's a developer product (bought again) and what costs in-game coins. The passes and products guide explains the difference and how to create them.

2. Build the frame

1. In StarterGui, add a ScreenGui named ShopGui. Set ResetOnSpawn off so the shop doesn't close when the player respawns.
2. Inside it, add a Frame named Shop, centred: AnchorPoint 0.5, 0.5 and Position {0.5, 0}, {0.5, 0}. Set Visible off.
3. Add a title TextLabel, a close TextButton in the top corner and a row of tab buttons.
4. Add a ScrollingFrame for the items, with a UIGridLayout inside it so cards line up by themselves. Set the ScrollingFrame's AutomaticCanvasSize to Y so it scrolls when there are many items.
5. Make one item card (a Frame with an ImageLabel, a name, a description and a buy button) and keep it as a template to clone for each item from a script.
6. Round the corners with UICorner and add outlines with UIStroke: two small things that make a shop look finished.

3. Make it fit phones

Most layout bugs come from sizes in Offset (pixels). Size the shop in Scale (for example {0.6, 0}, {0.7, 0}) and add a UIAspectRatioConstraint to the Shop frame so it keeps its shape on wide and narrow screens. For text, tick TextScaled and add a UITextSizeConstraint with a maximum size. Then check it with Studio's device emulator on a small phone: buttons should be big enough for a thumb, and nothing should hide under the Roblox menu buttons in the top corners.

4. Open and close it

A LocalScript inside ShopGui, with a ShopButton on your HUD:

local shopGui = script.Parent
local shop = shopGui.Shop
local hud = shopGui.Parent:WaitForChild("HudGui")

hud.ShopButton.Activated:Connect(function()
	shop.Visible = not shop.Visible
end)

shop.CloseButton.Activated:Connect(function()
	shop.Visible = false
end)

Activated works for mouse clicks, touch and controllers, so use it instead of MouseButton1Click.

5. Robux items: game passes and developer products

A Robux button only asks Roblox to show the purchase window; the server grants the item after Roblox confirms the payment. On the client:

local MarketplaceService = game:GetService("MarketplaceService")
local player = game:GetService("Players").LocalPlayer

local function wire(button, kind, id)
	button.Activated:Connect(function()
		if kind == "pass" then
			MarketplaceService:PromptGamePassPurchase(player, id)
		else
			MarketplaceService:PromptProductPurchase(player, id)
		end
	end)
end

Granting happens in a server Script: UserOwnsGamePassAsync and PromptGamePassPurchaseFinished for passes, and one ProcessReceipt callback for developer products. The full, safe version is in the passes and products guide. A nice touch: when a player already owns a pass, change its button to "Owned".

6. Coin items

Coin items never touch Robux, so your own server decides. Put a RemoteFunction named BuyItem in ReplicatedStorage and a server Script:

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local PRICES = { SpeedBoots = 250, GoldenSword = 1000 } -- the server's own price list

ReplicatedStorage.BuyItem.OnServerInvoke = function(player, itemName)
	local price = PRICES[itemName]
	local coins = player.leaderstats.Coins
	if not price or coins.Value < price then
		return false
	end
	coins.Value -= price
	-- give the item here (a Tool into the Backpack, an attribute, a saved unlock...)
	return true
end

The client only sends the item's name. The price comes from the server's list, so an exploiter can't buy a sword for 0 coins. Show "Not enough coins" when the call returns false.

7. Polish

• Open the shop with a quick tween (scale up from 0.9 to 1) so it feels responsive.
• Mark one item "Popular" or "Best value", honestly.
• Never use fake timers or pressure messages; they annoy players and can break Roblox's rules.
• Keep the game fun without buying anything. That's what makes players want to support it.

Design one instead

The BloxMaps UI Designer designs a shop (and the rest of your game's screens) from a description, in one style, sized for phones and desktops, and puts it into Studio. See the UI maker page for how it works.

Games from the Game Maker come with their shop already built and wired to Roblox's purchase prompts; you add your pass and product IDs after publishing (how to publish).