Editable Luau UI-only safe export

Roblox Shop GUI Maker

Build an editable Roblox shop with product cards, categories, responsive previews, and clean Luau UI code. No signup or download is required to start.

Interactive preview

Open, close, and filter the shop

1280 × 720

Upgrade Shop

12,450 Coins

Speed Boost

Move 20% faster for the next round.

350 Coins

Coin Magnet

Collect nearby coins automatically.

650 Coins

Lucky Charm

Keep a small reward bonus on every run.

900 Coins

3 visible items · 3 tabs Responsive layout preview

Luau export

UpgradeShopGui.lua

-- Generated by Game UI Maker: visual UI and navigation only.
-- Connect purchases to server-validated game logic before shipping.
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "UpgradeShopGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
screenGui.Parent = playerGui

local openShopButton = Instance.new("TextButton")
openShopButton.Name = "OpenShopButton"
openShopButton.AnchorPoint = Vector2.new(1, 0.5)
openShopButton.Position = UDim2.new(0.97, 0, 0.55, 0)
openShopButton.Size = UDim2.new(0.14, 0, 0.09, 0)
openShopButton.BackgroundColor3 = Color3.fromRGB(74, 222, 128)
openShopButton.BorderSizePixel = 0
openShopButton.Text = "Shop"
openShopButton.TextColor3 = Color3.fromRGB(13, 31, 22)
openShopButton.Font = Enum.Font.GothamBold
openShopButton.TextScaled = true
openShopButton.Parent = screenGui

local openShopButtonConstraint = Instance.new("UITextSizeConstraint")
openShopButtonConstraint.MinTextSize = 13
openShopButtonConstraint.MaxTextSize = 20
openShopButtonConstraint.Parent = openShopButton

local openShopButtonCorner = Instance.new("UICorner")
openShopButtonCorner.CornerRadius = UDim.new(0, 8)
openShopButtonCorner.Parent = openShopButton

local shopFrame = Instance.new("Frame")
shopFrame.Name = "ShopFrame"
shopFrame.AnchorPoint = Vector2.new(0.5, 0.5)
shopFrame.Position = UDim2.fromScale(0.5, 0.5)
shopFrame.Size = UDim2.fromScale(0.74, 0.78)
shopFrame.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
shopFrame.BorderSizePixel = 0
shopFrame.ClipsDescendants = true
shopFrame.Parent = screenGui

local shopFrameConstraint = Instance.new("UISizeConstraint")
shopFrameConstraint.MinSize = Vector2.new(300, 250)
shopFrameConstraint.MaxSize = Vector2.new(900, 650)
shopFrameConstraint.Parent = shopFrame

local shopFrameCorner = Instance.new("UICorner")
shopFrameCorner.CornerRadius = UDim.new(0, 14)
shopFrameCorner.Parent = shopFrame

local header = Instance.new("Frame")
header.Name = "Header"
header.Size = UDim2.new(1, 0, 0.17, 0)
header.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
header.BorderSizePixel = 0
header.Parent = shopFrame

local titleLabel = Instance.new("TextLabel")
titleLabel.Name = "TitleLabel"
titleLabel.Position = UDim2.new(0.04, 0, 0.16, 0)
titleLabel.Size = UDim2.new(0.55, 0, 0.68, 0)
titleLabel.BackgroundTransparency = 1
titleLabel.Text = "Upgrade Shop"
titleLabel.TextColor3 = Color3.fromRGB(248, 250, 252)
titleLabel.TextXAlignment = Enum.TextXAlignment.Left
titleLabel.Font = Enum.Font.GothamBold
titleLabel.TextScaled = true
titleLabel.Parent = header

local titleTextConstraint = Instance.new("UITextSizeConstraint")
titleTextConstraint.MinTextSize = 16
titleTextConstraint.MaxTextSize = 28
titleTextConstraint.Parent = titleLabel

local currencyLabel = Instance.new("TextLabel")
currencyLabel.Name = "CurrencyLabel"
currencyLabel.Position = UDim2.new(0.6, 0, 0.24, 0)
currencyLabel.Size = UDim2.new(0.25, 0, 0.52, 0)
currencyLabel.BackgroundTransparency = 1
currencyLabel.Text = "12,450 Coins"
currencyLabel.TextColor3 = Color3.fromRGB(74, 222, 128)
currencyLabel.TextXAlignment = Enum.TextXAlignment.Right
currencyLabel.Font = Enum.Font.GothamSemibold
currencyLabel.TextScaled = true
currencyLabel.Parent = header

local currencyTextConstraint = Instance.new("UITextSizeConstraint")
currencyTextConstraint.MinTextSize = 12
currencyTextConstraint.MaxTextSize = 18
currencyTextConstraint.Parent = currencyLabel

local closeButton = Instance.new("TextButton")
closeButton.Name = "CloseButton"
closeButton.AnchorPoint = Vector2.new(1, 0.5)
closeButton.Position = UDim2.new(0.96, 0, 0.5, 0)
closeButton.Size = UDim2.new(0.07, 0, 0.52, 0)
closeButton.BackgroundColor3 = Color3.fromRGB(251, 113, 133)
closeButton.BorderSizePixel = 0
closeButton.Text = "X"
closeButton.TextColor3 = Color3.fromRGB(13, 31, 22)
closeButton.Font = Enum.Font.GothamBold
closeButton.TextScaled = true
closeButton.Parent = header

local closeButtonCorner = Instance.new("UICorner")
closeButtonCorner.CornerRadius = UDim.new(0, 7)
closeButtonCorner.Parent = closeButton

local categoryTabs = Instance.new("Frame")
categoryTabs.Name = "CategoryTabs"
categoryTabs.Position = UDim2.new(0.04, 0, 0.2, 0)
categoryTabs.Size = UDim2.new(0.92, 0, 0.1, 0)
categoryTabs.BackgroundTransparency = 1
categoryTabs.Parent = shopFrame

local categoryLayout = Instance.new("UIListLayout")
categoryLayout.FillDirection = Enum.FillDirection.Horizontal
categoryLayout.HorizontalAlignment = Enum.HorizontalAlignment.Left
categoryLayout.VerticalAlignment = Enum.VerticalAlignment.Center
categoryLayout.Padding = UDim.new(0.02, 0)
categoryLayout.Parent = categoryTabs

local categoryButton1 = Instance.new("TextButton")
categoryButton1.Name = "AllTab"
categoryButton1.Size = UDim2.new(0.3, 0, 1, 0)
categoryButton1.BackgroundColor3 = Color3.fromRGB(74, 222, 128)
categoryButton1.BorderSizePixel = 0
categoryButton1.Text = "All"
categoryButton1.TextColor3 = Color3.fromRGB(13, 31, 22)
categoryButton1.Font = Enum.Font.GothamSemibold
categoryButton1.TextScaled = true
categoryButton1.Parent = categoryTabs

local categoryButton1TextConstraint = Instance.new("UITextSizeConstraint")
categoryButton1TextConstraint.MinTextSize = 12
categoryButton1TextConstraint.MaxTextSize = 16
categoryButton1TextConstraint.Parent = categoryButton1

local categoryButton1Corner = Instance.new("UICorner")
categoryButton1Corner.CornerRadius = UDim.new(0, 6)
categoryButton1Corner.Parent = categoryButton1

local categoryButton2 = Instance.new("TextButton")
categoryButton2.Name = "UpgradesTab"
categoryButton2.Size = UDim2.new(0.3, 0, 1, 0)
categoryButton2.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
categoryButton2.BorderSizePixel = 0
categoryButton2.Text = "Upgrades"
categoryButton2.TextColor3 = Color3.fromRGB(248, 250, 252)
categoryButton2.Font = Enum.Font.GothamSemibold
categoryButton2.TextScaled = true
categoryButton2.Parent = categoryTabs

local categoryButton2TextConstraint = Instance.new("UITextSizeConstraint")
categoryButton2TextConstraint.MinTextSize = 12
categoryButton2TextConstraint.MaxTextSize = 16
categoryButton2TextConstraint.Parent = categoryButton2

local categoryButton2Corner = Instance.new("UICorner")
categoryButton2Corner.CornerRadius = UDim.new(0, 6)
categoryButton2Corner.Parent = categoryButton2

local categoryButton3 = Instance.new("TextButton")
categoryButton3.Name = "BoostsTab"
categoryButton3.Size = UDim2.new(0.3, 0, 1, 0)
categoryButton3.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
categoryButton3.BorderSizePixel = 0
categoryButton3.Text = "Boosts"
categoryButton3.TextColor3 = Color3.fromRGB(248, 250, 252)
categoryButton3.Font = Enum.Font.GothamSemibold
categoryButton3.TextScaled = true
categoryButton3.Parent = categoryTabs

local categoryButton3TextConstraint = Instance.new("UITextSizeConstraint")
categoryButton3TextConstraint.MinTextSize = 12
categoryButton3TextConstraint.MaxTextSize = 16
categoryButton3TextConstraint.Parent = categoryButton3

local categoryButton3Corner = Instance.new("UICorner")
categoryButton3Corner.CornerRadius = UDim.new(0, 6)
categoryButton3Corner.Parent = categoryButton3

local itemScroll = Instance.new("ScrollingFrame")
itemScroll.Name = "ItemScroll"
itemScroll.Position = UDim2.new(0.04, 0, 0.33, 0)
itemScroll.Size = UDim2.new(0.92, 0, 0.62, 0)
itemScroll.BackgroundTransparency = 1
itemScroll.BorderSizePixel = 0
itemScroll.CanvasSize = UDim2.fromOffset(0, 0)
itemScroll.AutomaticCanvasSize = Enum.AutomaticSize.Y
itemScroll.ScrollBarThickness = 5
itemScroll.ScrollBarImageColor3 = Color3.fromRGB(74, 222, 128)
itemScroll.Parent = shopFrame

local itemLayout = Instance.new("UIListLayout")
itemLayout.SortOrder = Enum.SortOrder.LayoutOrder
itemLayout.Padding = UDim.new(0, 10)
itemLayout.Parent = itemScroll

local itemPadding = Instance.new("UIPadding")
itemPadding.PaddingTop = UDim.new(0, 4)
itemPadding.PaddingBottom = UDim.new(0, 8)
itemPadding.PaddingLeft = UDim.new(0, 2)
itemPadding.PaddingRight = UDim.new(0, 6)
itemPadding.Parent = itemScroll

local itemCard1 = Instance.new("Frame")
itemCard1.Name = "ItemCard1"
itemCard1.Size = UDim2.new(1, -12, 0, 92)
itemCard1.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
itemCard1.BorderSizePixel = 0
itemCard1:SetAttribute("Category", "Boosts")
itemCard1:SetAttribute("Status", "available")
itemCard1.LayoutOrder = 1
itemCard1.Parent = itemScroll

local itemCard1Corner = Instance.new("UICorner")
itemCard1Corner.CornerRadius = UDim.new(0, 10)
itemCard1Corner.Parent = itemCard1

local itemIcon1 = Instance.new("Frame")
itemIcon1.Name = "ItemImagePlaceholder"
itemIcon1.AnchorPoint = Vector2.new(0, 0.5)
itemIcon1.Position = UDim2.new(0.025, 0, 0.5, 0)
itemIcon1.Size = UDim2.new(0, 62, 0, 62)
itemIcon1.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
itemIcon1.BorderSizePixel = 0
itemIcon1.Parent = itemCard1

local itemIcon1Corner = Instance.new("UICorner")
itemIcon1Corner.CornerRadius = UDim.new(0, 8)
itemIcon1Corner.Parent = itemIcon1

local itemInitial1 = Instance.new("TextLabel")
itemInitial1.Name = "ItemInitial"
itemInitial1.Size = UDim2.fromScale(1, 1)
itemInitial1.BackgroundTransparency = 1
itemInitial1.Text = "S"
itemInitial1.TextColor3 = Color3.fromRGB(74, 222, 128)
itemInitial1.Font = Enum.Font.GothamBold
itemInitial1.TextSize = 24
itemInitial1.Parent = itemIcon1

local itemName1 = Instance.new("TextLabel")
itemName1.Name = "ItemName"
itemName1.Position = UDim2.new(0.18, 0, 0.14, 0)
itemName1.Size = UDim2.new(0.46, 0, 0.28, 0)
itemName1.BackgroundTransparency = 1
itemName1.Text = "Speed Boost"
itemName1.TextColor3 = Color3.fromRGB(248, 250, 252)
itemName1.TextXAlignment = Enum.TextXAlignment.Left
itemName1.TextTruncate = Enum.TextTruncate.AtEnd
itemName1.Font = Enum.Font.GothamBold
itemName1.TextScaled = true
itemName1.Parent = itemCard1

local itemName1Constraint = Instance.new("UITextSizeConstraint")
itemName1Constraint.MinTextSize = 12
itemName1Constraint.MaxTextSize = 18
itemName1Constraint.Parent = itemName1

local itemDescription1 = Instance.new("TextLabel")
itemDescription1.Name = "ItemDescription"
itemDescription1.Position = UDim2.new(0.18, 0, 0.46, 0)
itemDescription1.Size = UDim2.new(0.46, 0, 0.34, 0)
itemDescription1.BackgroundTransparency = 1
itemDescription1.Text = "Move 20% faster for the next round."
itemDescription1.TextColor3 = Color3.fromRGB(186, 198, 214)
itemDescription1.TextXAlignment = Enum.TextXAlignment.Left
itemDescription1.TextWrapped = true
itemDescription1.Font = Enum.Font.Gotham
itemDescription1.TextSize = 12
itemDescription1.Parent = itemCard1

local priceLabel1 = Instance.new("TextLabel")
priceLabel1.Name = "PriceLabel"
priceLabel1.Position = UDim2.new(0.66, 0, 0.14, 0)
priceLabel1.Size = UDim2.new(0.3, 0, 0.24, 0)
priceLabel1.BackgroundTransparency = 1
priceLabel1.Text = "350 Coins"
priceLabel1.TextColor3 = Color3.fromRGB(248, 250, 252)
priceLabel1.TextXAlignment = Enum.TextXAlignment.Right
priceLabel1.Font = Enum.Font.GothamSemibold
priceLabel1.TextScaled = true
priceLabel1.Parent = itemCard1

local priceLabel1Constraint = Instance.new("UITextSizeConstraint")
priceLabel1Constraint.MinTextSize = 11
priceLabel1Constraint.MaxTextSize = 15
priceLabel1Constraint.Parent = priceLabel1

local buyButton1 = Instance.new("TextButton")
buyButton1.Name = "BuyButton"
buyButton1.Position = UDim2.new(0.7, 0, 0.48, 0)
buyButton1.Size = UDim2.new(0.26, 0, 0.36, 0)
buyButton1.BackgroundColor3 = Color3.fromRGB(74, 222, 128)
buyButton1.BorderSizePixel = 0
buyButton1.Text = "Buy"
buyButton1.TextColor3 = Color3.fromRGB(13, 31, 22)
buyButton1.Font = Enum.Font.GothamBold
buyButton1.TextScaled = true
buyButton1.Active = true
buyButton1.AutoButtonColor = true
buyButton1.Parent = itemCard1

local buyButton1Constraint = Instance.new("UITextSizeConstraint")
buyButton1Constraint.MinTextSize = 11
buyButton1Constraint.MaxTextSize = 15
buyButton1Constraint.Parent = buyButton1

local buyButton1Corner = Instance.new("UICorner")
buyButton1Corner.CornerRadius = UDim.new(0, 7)
buyButton1Corner.Parent = buyButton1

-- Connect buyButton1.Activated to your own validated purchase request.
-- Never grant items or subtract currency based only on client data.

local itemCard2 = Instance.new("Frame")
itemCard2.Name = "ItemCard2"
itemCard2.Size = UDim2.new(1, -12, 0, 92)
itemCard2.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
itemCard2.BorderSizePixel = 0
itemCard2:SetAttribute("Category", "Upgrades")
itemCard2:SetAttribute("Status", "insufficient")
itemCard2.LayoutOrder = 2
itemCard2.Parent = itemScroll

local itemCard2Corner = Instance.new("UICorner")
itemCard2Corner.CornerRadius = UDim.new(0, 10)
itemCard2Corner.Parent = itemCard2

local itemIcon2 = Instance.new("Frame")
itemIcon2.Name = "ItemImagePlaceholder"
itemIcon2.AnchorPoint = Vector2.new(0, 0.5)
itemIcon2.Position = UDim2.new(0.025, 0, 0.5, 0)
itemIcon2.Size = UDim2.new(0, 62, 0, 62)
itemIcon2.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
itemIcon2.BorderSizePixel = 0
itemIcon2.Parent = itemCard2

local itemIcon2Corner = Instance.new("UICorner")
itemIcon2Corner.CornerRadius = UDim.new(0, 8)
itemIcon2Corner.Parent = itemIcon2

local itemInitial2 = Instance.new("TextLabel")
itemInitial2.Name = "ItemInitial"
itemInitial2.Size = UDim2.fromScale(1, 1)
itemInitial2.BackgroundTransparency = 1
itemInitial2.Text = "C"
itemInitial2.TextColor3 = Color3.fromRGB(74, 222, 128)
itemInitial2.Font = Enum.Font.GothamBold
itemInitial2.TextSize = 24
itemInitial2.Parent = itemIcon2

local itemName2 = Instance.new("TextLabel")
itemName2.Name = "ItemName"
itemName2.Position = UDim2.new(0.18, 0, 0.14, 0)
itemName2.Size = UDim2.new(0.46, 0, 0.28, 0)
itemName2.BackgroundTransparency = 1
itemName2.Text = "Coin Magnet"
itemName2.TextColor3 = Color3.fromRGB(248, 250, 252)
itemName2.TextXAlignment = Enum.TextXAlignment.Left
itemName2.TextTruncate = Enum.TextTruncate.AtEnd
itemName2.Font = Enum.Font.GothamBold
itemName2.TextScaled = true
itemName2.Parent = itemCard2

local itemName2Constraint = Instance.new("UITextSizeConstraint")
itemName2Constraint.MinTextSize = 12
itemName2Constraint.MaxTextSize = 18
itemName2Constraint.Parent = itemName2

local itemDescription2 = Instance.new("TextLabel")
itemDescription2.Name = "ItemDescription"
itemDescription2.Position = UDim2.new(0.18, 0, 0.46, 0)
itemDescription2.Size = UDim2.new(0.46, 0, 0.34, 0)
itemDescription2.BackgroundTransparency = 1
itemDescription2.Text = "Collect nearby coins automatically."
itemDescription2.TextColor3 = Color3.fromRGB(186, 198, 214)
itemDescription2.TextXAlignment = Enum.TextXAlignment.Left
itemDescription2.TextWrapped = true
itemDescription2.Font = Enum.Font.Gotham
itemDescription2.TextSize = 12
itemDescription2.Parent = itemCard2

local priceLabel2 = Instance.new("TextLabel")
priceLabel2.Name = "PriceLabel"
priceLabel2.Position = UDim2.new(0.66, 0, 0.14, 0)
priceLabel2.Size = UDim2.new(0.3, 0, 0.24, 0)
priceLabel2.BackgroundTransparency = 1
priceLabel2.Text = "650 Coins"
priceLabel2.TextColor3 = Color3.fromRGB(248, 250, 252)
priceLabel2.TextXAlignment = Enum.TextXAlignment.Right
priceLabel2.Font = Enum.Font.GothamSemibold
priceLabel2.TextScaled = true
priceLabel2.Parent = itemCard2

local priceLabel2Constraint = Instance.new("UITextSizeConstraint")
priceLabel2Constraint.MinTextSize = 11
priceLabel2Constraint.MaxTextSize = 15
priceLabel2Constraint.Parent = priceLabel2

local buyButton2 = Instance.new("TextButton")
buyButton2.Name = "BuyButton"
buyButton2.Position = UDim2.new(0.7, 0, 0.48, 0)
buyButton2.Size = UDim2.new(0.26, 0, 0.36, 0)
buyButton2.BackgroundColor3 = Color3.fromRGB(251, 113, 133)
buyButton2.BorderSizePixel = 0
buyButton2.Text = "Need more"
buyButton2.TextColor3 = Color3.fromRGB(13, 31, 22)
buyButton2.Font = Enum.Font.GothamBold
buyButton2.TextScaled = true
buyButton2.Active = false
buyButton2.AutoButtonColor = false
buyButton2.Parent = itemCard2

local buyButton2Constraint = Instance.new("UITextSizeConstraint")
buyButton2Constraint.MinTextSize = 11
buyButton2Constraint.MaxTextSize = 15
buyButton2Constraint.Parent = buyButton2

local buyButton2Corner = Instance.new("UICorner")
buyButton2Corner.CornerRadius = UDim.new(0, 7)
buyButton2Corner.Parent = buyButton2

-- Connect buyButton2.Activated to your own validated purchase request.
-- Never grant items or subtract currency based only on client data.

local itemCard3 = Instance.new("Frame")
itemCard3.Name = "ItemCard3"
itemCard3.Size = UDim2.new(1, -12, 0, 92)
itemCard3.BackgroundColor3 = Color3.fromRGB(51, 65, 85)
itemCard3.BorderSizePixel = 0
itemCard3:SetAttribute("Category", "Upgrades")
itemCard3:SetAttribute("Status", "owned")
itemCard3.LayoutOrder = 3
itemCard3.Parent = itemScroll

local itemCard3Corner = Instance.new("UICorner")
itemCard3Corner.CornerRadius = UDim.new(0, 10)
itemCard3Corner.Parent = itemCard3

local itemIcon3 = Instance.new("Frame")
itemIcon3.Name = "ItemImagePlaceholder"
itemIcon3.AnchorPoint = Vector2.new(0, 0.5)
itemIcon3.Position = UDim2.new(0.025, 0, 0.5, 0)
itemIcon3.Size = UDim2.new(0, 62, 0, 62)
itemIcon3.BackgroundColor3 = Color3.fromRGB(30, 41, 59)
itemIcon3.BorderSizePixel = 0
itemIcon3.Parent = itemCard3

local itemIcon3Corner = Instance.new("UICorner")
itemIcon3Corner.CornerRadius = UDim.new(0, 8)
itemIcon3Corner.Parent = itemIcon3

local itemInitial3 = Instance.new("TextLabel")
itemInitial3.Name = "ItemInitial"
itemInitial3.Size = UDim2.fromScale(1, 1)
itemInitial3.BackgroundTransparency = 1
itemInitial3.Text = "L"
itemInitial3.TextColor3 = Color3.fromRGB(74, 222, 128)
itemInitial3.Font = Enum.Font.GothamBold
itemInitial3.TextSize = 24
itemInitial3.Parent = itemIcon3

local itemName3 = Instance.new("TextLabel")
itemName3.Name = "ItemName"
itemName3.Position = UDim2.new(0.18, 0, 0.14, 0)
itemName3.Size = UDim2.new(0.46, 0, 0.28, 0)
itemName3.BackgroundTransparency = 1
itemName3.Text = "Lucky Charm"
itemName3.TextColor3 = Color3.fromRGB(248, 250, 252)
itemName3.TextXAlignment = Enum.TextXAlignment.Left
itemName3.TextTruncate = Enum.TextTruncate.AtEnd
itemName3.Font = Enum.Font.GothamBold
itemName3.TextScaled = true
itemName3.Parent = itemCard3

local itemName3Constraint = Instance.new("UITextSizeConstraint")
itemName3Constraint.MinTextSize = 12
itemName3Constraint.MaxTextSize = 18
itemName3Constraint.Parent = itemName3

local itemDescription3 = Instance.new("TextLabel")
itemDescription3.Name = "ItemDescription"
itemDescription3.Position = UDim2.new(0.18, 0, 0.46, 0)
itemDescription3.Size = UDim2.new(0.46, 0, 0.34, 0)
itemDescription3.BackgroundTransparency = 1
itemDescription3.Text = "Keep a small reward bonus on every run."
itemDescription3.TextColor3 = Color3.fromRGB(186, 198, 214)
itemDescription3.TextXAlignment = Enum.TextXAlignment.Left
itemDescription3.TextWrapped = true
itemDescription3.Font = Enum.Font.Gotham
itemDescription3.TextSize = 12
itemDescription3.Parent = itemCard3

local priceLabel3 = Instance.new("TextLabel")
priceLabel3.Name = "PriceLabel"
priceLabel3.Position = UDim2.new(0.66, 0, 0.14, 0)
priceLabel3.Size = UDim2.new(0.3, 0, 0.24, 0)
priceLabel3.BackgroundTransparency = 1
priceLabel3.Text = "900 Coins"
priceLabel3.TextColor3 = Color3.fromRGB(248, 250, 252)
priceLabel3.TextXAlignment = Enum.TextXAlignment.Right
priceLabel3.Font = Enum.Font.GothamSemibold
priceLabel3.TextScaled = true
priceLabel3.Parent = itemCard3

local priceLabel3Constraint = Instance.new("UITextSizeConstraint")
priceLabel3Constraint.MinTextSize = 11
priceLabel3Constraint.MaxTextSize = 15
priceLabel3Constraint.Parent = priceLabel3

local buyButton3 = Instance.new("TextButton")
buyButton3.Name = "BuyButton"
buyButton3.Position = UDim2.new(0.7, 0, 0.48, 0)
buyButton3.Size = UDim2.new(0.26, 0, 0.36, 0)
buyButton3.BackgroundColor3 = Color3.fromRGB(96, 165, 250)
buyButton3.BorderSizePixel = 0
buyButton3.Text = "Owned"
buyButton3.TextColor3 = Color3.fromRGB(13, 31, 22)
buyButton3.Font = Enum.Font.GothamBold
buyButton3.TextScaled = true
buyButton3.Active = false
buyButton3.AutoButtonColor = false
buyButton3.Parent = itemCard3

local buyButton3Constraint = Instance.new("UITextSizeConstraint")
buyButton3Constraint.MinTextSize = 11
buyButton3Constraint.MaxTextSize = 15
buyButton3Constraint.Parent = buyButton3

local buyButton3Corner = Instance.new("UICorner")
buyButton3Corner.CornerRadius = UDim.new(0, 7)
buyButton3Corner.Parent = buyButton3

-- Connect buyButton3.Activated to your own validated purchase request.
-- Never grant items or subtract currency based only on client data.

local itemCards = {itemCard1, itemCard2, itemCard3}
local categoryButtons = {
	{ button = categoryButton1, category = "All" },
	{ button = categoryButton2, category = "Upgrades" },
	{ button = categoryButton3, category = "Boosts" },
}

local function showCategory(category)
	for _, card in ipairs(itemCards) do
		card.Visible = category == "All" or card:GetAttribute("Category") == category
	end
	for _, entry in ipairs(categoryButtons) do
		local isActive = entry.category == category
		entry.button.BackgroundColor3 = isActive and Color3.fromRGB(74, 222, 128) or Color3.fromRGB(51, 65, 85)
		entry.button.TextColor3 = isActive and Color3.fromRGB(13, 31, 22) or Color3.fromRGB(248, 250, 252)
	end
	itemScroll.CanvasPosition = Vector2.new(0, 0)
end

categoryButton1.Activated:Connect(function()
	showCategory("All")
end)

categoryButton2.Activated:Connect(function()
	showCategory("Upgrades")
end)

categoryButton3.Activated:Connect(function()
	showCategory("Boosts")
end)

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

openShopButton.Activated:Connect(function()
	shopFrame.Visible = true
end)

showCategory("All")

Purchase boundary

The file builds UI and navigation only. Validate product IDs, prices, receipts, and rewards on the server.

Shop items

Test short and long content across one to six product cards.

Item 1

Item name

Display price

Short benefit

A real shop hierarchy, not a flat mockup

The generator creates named Roblox UI instances with a responsive shop frame, category controls, a scrolling product list, and clear button states. Every part remains editable after you paste the code into Roblox Studio.

ScreenGui with reset and inset settings
Open and close controls using Activated
Category tabs with working item filtering
ScrollingFrame with automatic canvas sizing
Named product cards and purchase buttons
Scale-based layout with size constraints

Explorer hierarchyeditable instances

ScreenGui
├── OpenShopButton
└── ShopFrame
    ├── Header
    │   ├── TitleLabel
    │   ├── CurrencyLabel
    │   └── CloseButton
    ├── CategoryTabs
    └── ItemScroll
        ├── UIListLayout
        ├── UIPadding
        └── ItemCard × 1–6
            ├── ItemImagePlaceholder
            ├── ItemName
            ├── PriceLabel
            └── BuyButton

Studio handoff

From browser preview to Roblox Studio

The export saves setup time without pretending to know your game economy. Use the visible interface as a reliable starting point, then connect it to the data and purchase rules that belong to your experience.

STEP 1
Copy the generated Luau
Choose a shop type, replace the sample products, and review the desktop and mobile previews before copying the file.
STEP 2
Create a LocalScript
In Roblox Studio, add a LocalScript under StarterPlayerScripts and paste the generated code into it.
STEP 3
Replace visual placeholders
Swap item initials for your own ImageLabels or asset IDs, then adjust the exported colors and text to match your game.
STEP 4
Connect validated purchases
Wire each named BuyButton to your own RemoteEvent or MarketplaceService flow and validate the result on the server.

Responsive review

Test the awkward cases before players do

Shop layouts often look correct at one desktop resolution and break when labels get longer or the viewport gets smaller. The preview modes and product states are designed to expose those failures before export.

Review the longest item name, not only the shortest sample.
Keep the price readable without competing with the Buy button.
Use a visible disabled or owned state instead of color alone.
Test one item and six items to confirm scrolling behavior.
Open and close the shop more than once during playtesting.
Check phone landscape, tablet, and desktop emulation in Studio.

What the export does not do

The generated file does not grant tools, subtract currency, save owned items, or confirm Robux purchases. Those actions must be validated by server-side code. A client can request a purchase, but it cannot be the authority that decides whether the purchase succeeded.

Client-server security guidance Developer product receipts

Common questions

Roblox shop GUI FAQ

Does this create a working Roblox shop?+

It creates the visible ScreenGui, product cards, category filtering, and open/close behavior. You still connect the Buy buttons to your own validated server purchase flow.

Can I use the code without installing a plugin?+

Yes. Copy the Luau into a LocalScript in Roblox Studio. The export has no external require calls, loadstring, or runtime library dependency.

Will the shop fit mobile screens?+

The generated panel uses scale-based sizing and constraints, while the product list scrolls as content grows. Always test the final result with your own text and images in Studio device emulation.

Can it sell game passes or developer products?+

You can generate the interface and Robux price placeholders. Actual prompts, receipt validation, and reward delivery must be implemented with Roblox services and server-side checks.

Is Game UI Maker affiliated with Roblox?+

No. Game UI Maker is an independent creator tool and is not affiliated with or endorsed by Roblox Corporation.

Open the general Roblox GUI Maker Read the ScreenGui export guide

Roblox Shop GUI Maker

Interactive preview

Shop items

A real shop hierarchy, not a flat mockup

From browser preview to Roblox Studio

Copy the generated Luau

Create a LocalScript

Replace visual placeholders

Connect validated purchases

Test the awkward cases before players do

What the export does not do

Roblox shop GUI FAQ