VizzBeesVizzBees
← All articles

Roblox Shop GUI Tutorial: Build a Store That Converts

A shop GUI is the only interface in your game that directly moves Robux. It is also the one most often built last, in a hurry, out of grey Frames.

This is a complete build: the panel structure, the item grid, the price hierarchy that makes an offer readable in one glance, and the mobile sizing that stops half your players mis-tapping. Follow it and you have a shop that looks deliberate. The design reasoning matters as much as the object tree, so both are here.

What a shop GUI actually needs

Strip a good Roblox shop down and it is five regions:

  1. A dimmed backdrop — full-screen, semi-transparent, dark. It focuses attention and catches clicks that would otherwise reach the game.
  2. A header — the shop name, the player's currency balance, and a close button.
  3. Category tabs — only if you genuinely have categories. Two items in three tabs looks emptier than five items in none.
  4. The item grid — the actual products, each with an icon, a name, a price and a buy action.
  5. A footer or featured slot — the one offer you most want bought, given more space than the rest.

That is the whole thing. Every extra region you add is a region the player has to parse before they can spend money.

Image — Roblox shop GUI wireframe showing backdrop, header, category tabs, item grid and featured offer slot.

Step-by-step: build the shop

  1. Create the ScreenGui. In StarterGui, add a ScreenGui named ShopGui. Set ResetOnSpawn to false and Enabled to false — the shop should open on demand, not on join.
  2. Add the backdrop. Insert a Frame at Size = UDim2.fromScale(1, 1), a near-black BackgroundColor3 such as #0B0B12, and BackgroundTransparency around 0.45. Set its ZIndex low so everything else stacks over it.
  3. Add the panel. Inside the backdrop, insert a Frame. Anchor Vector2.new(0.5, 0.5), position UDim2.fromScale(0.5, 0.5), size UDim2.fromScale(0.62, 0.72). Add a UICorner at 16 px, a UIStroke at 2 px in a light tone, and a UISizeConstraint with MinSize = Vector2.new(320, 420) so it stays usable on a phone.
  4. Pad the panel. Drop a UIPadding in with 18 px on every side. This single object does more for how professional a shop looks than any amount of colour work.
  5. Build the header. A Frame at Size = UDim2.fromScale(1, 0.12) holding: a TextLabel on the left with the shop name, a currency TextLabel on the right showing the balance with its icon, and a square close TextButton in the corner with a UIAspectRatioConstraint. Give the close button a 44 px minimum.
  6. Add category tabs. A Frame under the header at Size = UDim2.fromScale(1, 0.09) with a horizontal UIListLayout (FillDirection = Horizontal, Padding = UDim.new(0, 8)). Each tab is a TextButton; the active one gets the accent colour, the rest a muted background. Skip this region entirely if you have one category.
  7. Add the item grid. A ScrollingFrame filling the remaining space, with a UIGridLayout inside: CellSize = UDim2.fromOffset(120, 150), CellPadding = UDim2.fromOffset(10, 10). Set the ScrollingFrame's AutomaticCanvasSize to Y and CanvasSize to UDim2.new() so it sizes itself as you add items.
  8. Build one item card, then duplicate it. Each card is a Frame with a UICorner, containing an ImageLabel for the icon (square, via UIAspectRatioConstraint), a TextLabel for the name, a TextLabel for the price, and a TextButton covering the buy action. Style one card completely before you copy it — consistency is most of what reads as design.
  9. Add the featured slot. Below or above the grid, a wider Frame for the single offer you most want bought. Give it the accent colour, more padding, and larger text. One primary action per screen.
  10. Wire it up. A LocalScript toggles ShopGui.Enabled, and each buy button fires a RemoteEvent to a server script that runs the actual MarketplaceService prompt. Never trust the client with the purchase decision.

The design choices that matter

Price hierarchy

A player scanning your shop reads three things in this order: the icon, the price, the name. Size them accordingly. The price should be the second-largest text on the card — not a grey afterthought under the title.

If you show a discount, show both numbers: the old price struck through in a muted tone, the new one in the accent colour. A single lower number communicates nothing; the pair communicates a saving.

One accent colour

Pick one saturated colour for "buy" and use it nowhere else. If your close button, your tabs and your buy buttons are all the same bright green, none of them stands out and the player's eye has nowhere to land.

Base palette: a dark neutral for panels, a light neutral for text, one accent for purchase actions. Everything else is a lighter or darker step of those three.

Icons over text

An item with a rendered icon sells better than the same item as a text row. This is the one place in your UI where a generated image is exactly the right tool — the icon should be art. Keep them square, keep them consistent in framing and lighting, and author them at 2× their display size so they stay sharp on high-DPI screens.

Never more than six visible items

A grid of twenty items is a wall. Six at a time, scrolled or paginated, gives each one a chance to be considered. If you have twenty products, that is what categories are for.

Mobile: where shops break

Over half of Roblox sessions are on a phone, and a shop is the worst place to lose one.

  • Buy buttons at 56 px minimum. A mis-tapped purchase is a refund request and a bad review. Give the most consequential button on the screen room.
  • 8 px minimum between cards. Adjacent tappable cards with no gap generate accidental purchases.
  • Keep the close button away from the corners that hold Roblox's own movement controls on mobile.
  • TextScaled plus a UITextSizeConstraint on every price and name, so a long item name shrinks gracefully rather than disappearing.
  • Test in the device emulator. The panel that looks generous in your Studio window is a letterbox on a phone in portrait.

The full set of numbers is in the Roblox GUI size guide.

A prompt that gets you there in one shot

If you would rather not spend the evening dragging Frames, the VizzBees UI Maker builds this from a description. The more specific the brief, the closer the first result lands:

A Roblox shop UI in a chunky cartoon style. Dark navy panel with rounded corners and a soft gold outline. Header across the top with the shop name on the left and a coin balance on the right. Three category tabs underneath. A grid of six item cards, each with a square icon, an item name, a price in gold, and a green buy button. One wide featured offer at the bottom with a discount badge.

Name the panels, name the mood, name the colours, name the counts. "A shop UI" gets you a generic shop; the brief above gets you your shop.

What comes back is a mockup first — so you can judge the art direction as a whole screen — and then a real Studio tree: Frames with UICorner, UIGradient and UIStroke, live TextLabel objects you can retype, and icons as images. Change a price by clicking the label and typing.

For the underlying craft, read how to make a Roblox UI. For more directions to take the look, see Roblox UI design ideas.

FAQ

How do I make a shop GUI in Roblox? Build a ScreenGui containing a dimmed backdrop Frame, a centred panel with UICorner and UIPadding, a header with the shop name and currency balance, and a ScrollingFrame with a UIGridLayout holding one Frame per item. Wire buy buttons to a server script through a RemoteEvent, and run the MarketplaceService prompt on the server.

What size should shop item cards be? Around 120×150 px per card as a UIGridLayout CellSize, with 10 px CellPadding. Size the cells in offset and let the container scale — a grid sized in scale produces cards that change shape with the viewport.

How do I stop players mis-tapping buy buttons on mobile? Make buy buttons at least 56 px tall, leave 8 px minimum between adjacent cards, and keep them away from the bottom-left and bottom-right corners where Roblox draws its own movement controls.

Should the buy button be on the card or in a detail view? On the card for cheap, obvious items; in a detail view for anything expensive or complex enough to need explaining. A confirmation step on a large purchase reduces refunds more than it reduces sales.

How many items should a Roblox shop show at once? About six visible at a time. Beyond that the grid reads as a wall and individual items stop being considered. Use categories to split a larger catalogue.

Can I generate a Roblox shop GUI with AI? Yes — the VizzBees UI Maker generates a shop from a written description and returns it as a real Studio hierarchy of Frames and editable TextLabels, not a flat image. It is included with the Creator, Pro and Studio plans.