Tutorial (Easy) - How To Make A Working Gamepass Shop Gui

Hi All,
I’m Infinite_Visions, developer of Visions Games.

It’s been a while since one of these tutorials were made, so I thought I’d give it a shot. This tutorial is recommended for people who know a small bit of scripting - it is easy, commonly-used, and efficient. We will be covering making a gamepass shop in Roblox Studio, where the players can spend money to buy a gamepass.

  • This tutorial assumes you already have your gamepass created in Roblox
  • Plugins (Not needed, but Recommended to Make this easier):
    AutoScale Lite (by ZacBytes) AutoScale Lite - Roblox

Step 1

  • First, lets create the base gui. Go into StarterGui, and insert a ScreenGui. Name this “ShopGui”. Inside of that, put a basic Frame. Name this “Background”.

  • Before moving on, let me clarify One thing. When it comes to a gui’s size and position, there are two values - X and Y (coordinates). Inside those coordinates, there are two more values - scale and offset. Scale represents how the gui scales, and offset determines how far it is offset by the screen. Learn more: Intro to GUIs

  • Now for perhaps the hardest part (in my humble opinion) - positioning the frame, so it scales correctly on all devices. The easiest way to do this is to start by setting the frame’s AnchorPoint to .5,.5. This will ensure it scales in the middle of the screen. Next, position it where you would like it. If you have AutoScale Plugin, do this: Open the plugin, press “Unit Conversion”. Change the Position/Size to SCALE. This will allow it to scale up/down, according to the screen size. If you do not have the plugin, do this: Go into the properties of the Frame, and manually change the Position and Size to Scale. Note: You can use offset too, but for the simplicity of this tutorial, I am just using scale.

  • Next, customize the frame however you want (change its transparency, background color, etc)

  • Now, add a textlabel into the Frame, and change the scale/offset to correctly fit inside the Frame. Position it at the top of the frame, and change the text to “Shop”. Check TextScaled (so the text scales with its parent), and change the Font to whatever you want. You should have something like this:

  • Now, add a Text Buttons to the Frame, and scale/position it correctly (as described above). Name it “GamepassOne”. Customize it, and change the text accordingly.

  • Inside GamepassOne, add a local script with the following code:

--In a local script
local ID = 13376596 -- Replace This with your gamepass ID
	game:GetService("MarketplaceService"):PromptGamePassPurchase(game.Players.LocalPlayer,ID) -- Prompts the purchase

Now, find your gamepass ID by going onto it on Roblox. The ID is the numbers enclosed in /s. EX:

Once you find your ID, past it into the local script, where it says

local ID = --Replace This with your gamepass ID

Now, if you go into studio and test it, it will prompt the purchase.

  • Time for the last part - Making an open/close gui.

  • Next, we have to manage the opening and closing of the Gui. We can do it one of two ways: The EASY way, and the FANCY way.
    For The EASY way, all we are going to do is toggle the Gui visibility on and off. For the FANCY way, we are going to tween the gui, which basically means animating it so it slides across the screen, into position.

The EASY Way

As stated above, we are just toggling the gui visibility. Insert a local script into the Open button with the following code:

--In a local script
local frame = script.Parent.Parent. Background -- the background frame

script.Parent.Activated:Connect(function() -- when the button is clicked
	frame.Visible = not frame.Visible --Reverses the frame visibility.

For this, we are tweening the gui position. For more info on tweening, you can check out This Article. Insert a local script into the Open button with the following code:

--In a local script
local frame = script.Parent.Parent. Background -- the background frame

script.Parent.Activated:Connect(function() -- when the button is clicked
	if frame.Visible == true then -- Checks if the frame is already open
		frame:TweenPosition(UDim2.new(0.5, 0, 2, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint,.5)-- Now tween the frame off the screen
		frame.Visible = false -- if it is, "close" it
	else -- if the frame is closed
		frame.Visible = true -- open the frame
		frame:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint,.5)-- Now tween the frame onto the screen

Keep in mind, you can change the values above to better fit your position. The first value after :Tween() is the Udim2 value, which is the position it will move to. Then, the easing direction. Next is the easing style, which is what type of animation will be played (how the animation looks. Feel free to experiment!). Finally, the number is how long the tween takes.

To wrap things up, go into ShopGui, and uncheck ResetOnSpawn. Also, Check IgnoreGuiInset (so the frame remains in the same place). Finally, Set Background.Visible to false. Now, it should all work!
robloxapp-20210108-0956337.wmv (388.2 KB)

To allow third party purchases in studio, access game settings, and check allow third party purchases (so you can prompt the purchase on click).

This is a finished model (Fancy/Tweening Version): ShopGui - Fancy Version - Roblox
This is a finished model (Simple Version): Gamepass Shop Gui - Roblox

Anyways, thanks for reading! I hope you got what you wanted from this extremely basic tutorial. You can modify the codes, frames, and everything else in whatever ways you want! Questions, comments, or concerns? Just let me know! Have any other tutorials you want to see? Just message me!

For other helpful tutorials/articles on developing:
What Makes A Top Roblox Game? (Advice from top Devs)

Is Finding Investors For My Game Worth It Anymore?

Want to support my work (It helps a lot!)?
Support Infinite_Visions (Game)

Best of luck in developing,



For anyone with any questions, please just ask!


I didn’t see that it was stated here but if does not work make sure to turn on third party purchases in the game settings.


I edited it so it should include that now, thanks for catching it!

Can you show me your script? I saw this error somewhere.

I don’t think bumping a 8 month old thread is okay, you could’ve asked the question in scripting support.

:smiley: :+1:

Hey, no problem. It has been a while since I updated the post, I’ll look into it and get back to you :slight_smile:

Hey @Nordgraben,

I see what’s going wrong. I believe you have the script in a server script, but it needs to be in a local script. Only local scripts can reference


so it is erroring when you have it in a server script. If you want to keep it in a server script, you will have to create a player variable like so:

local ID = 13376596 -- Replace This with your gamepass ID
local plr = script.Parent.Parent.Parent.Parent.Parent -- The player variable. You may have to change this, depending on this script's location.
	game:GetService("MarketplaceService"):PromptGamePassPurchase(plr ,ID) -- Prompts the purchase

Happy to see this is helping someone. Keep up the great work :+1:


Hey I’m not exactly good with scripting but how can I add more gears and also will the gui allow you to scroll once you made like 10.

Just use a scrolling frame.


1 Like

How do I make this for in game avatar items for cash, for example a hat and glasses???