Hello there,
To make a shop with Topbar Plus, I invite you to follow these steps:
1. Go to the Topbar Plus playground and select “Edit in Studio”.
2. In studio, take TopbarPlus in Replicated Storage and paste it into your game, put it in Replicated Storage, you can then add a local script into Replicated Storage and paste the following code:
-- SETUP
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local localPlayer = game:GetService("Players").LocalPlayer
local playerGui = localPlayer.PlayerGui
local iconModule = ReplicatedStorage:FindFirstChild("Icon", true)
local Icon = require(iconModule)
local gui = playerGui:WaitForChild("TestGUIs")
local menuIcon, dropdownIcon
-- FUNCTIONS
local IMAGE_SCALE_DROPDOWN = 0.655
local IMAGE_SCALE_NORMAL = 1.04
local function applyImageSet(icon, setId, offsetX, offsetY)
local setId = setId or 6
-- rbxasset://LuaPackages/Packages/_Index/UIBlox/UIBlox/AppImageAtlas/img_set_1x_7.png
local imageSet = `rbxasset://LuaPackages/Packages/_Index/UIBlox/UIBlox/AppImageAtlas/img_set_1x_{setId}.png`
icon:setImage(imageSet)
icon:modifyTheme({"IconImage", "ImageRectOffset", Vector2.new(offsetX, offsetY)})
icon:modifyTheme({"IconImage", "ImageRectSize", Vector2.new(36, 36)})
icon:oneClick()
icon:setImageScale(IMAGE_SCALE_DROPDOWN)
end
local function onClickRelocate(icon)
icon:setLabel(icon.name)
icon:setCaption(icon.name)
icon.selected:Connect(function()
if icon.parentIconUID == dropdownIcon.UID then
icon:joinMenu(menuIcon)
icon:setLabel("")
icon:setImageScale(IMAGE_SCALE_NORMAL)
else
icon:joinDropdown(dropdownIcon)
icon:setLabel(icon.name)
icon:setImageScale(IMAGE_SCALE_DROPDOWN)
end
end)
end
Icon.new()
:setImage(4882429582)
:setCaption("Shop")
:bindToggleItem(gui.Shop)
:setImageScale(0.725)
:call(function(icon)
gui.Shop.CloseButton.MouseButton1Click:Connect(function()
icon:deselect()
end)
while true do
task.wait(3)
icon:notify()
end
end)
You can modify :setImage() and put the asset ID of your image and modify other settings. To make it opens a frame, in your case, a shop, change :bindToogleItem() and place your ScreenGui’s variable and the frame you want to be opened or closed. For example I want it to open the frame “Shop” as shown below.
In order to make it work, you can simply write :bindToggleItem(gui.Shop) but make sure “gui” has been referenced has a variable there:
-- SETUP
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local localPlayer = game:GetService("Players").LocalPlayer
local playerGui = localPlayer.PlayerGui
local iconModule = ReplicatedStorage:FindFirstChild("Icon", true)
local Icon = require(iconModule)
local gui = playerGui:WaitForChild("TestGUIs") -- Replace this with the current name of your ScreenGui.
local menuIcon, dropdownIcon
If you want to make a button that closes the frame like in this image,
Use this code and make sure to replace with your frames and buttons.
:call(function(icon)
gui.Shop.CloseButton.MouseButton1Click:Connect(function() -- Replace with your GUIs
icon:deselect()
end)
3. To make an actual shop, just remember that this is a Gamepass shop (which will cost robux to the users) and may not be exactly the type of shop you expected. Simply add a local script under the button you want to trigger the purchase and add the following code:
local button = script.Parent
local player = game.Players.LocalPlayer
local gamePassId = 1234567890 -- Replace with your Gamepass ID
local marketplaceService = game:GetService("MarketplaceService")
button.MouseButton1Click:connect(function()
if player then
marketplaceService:PromptGamePassPurchase(player, gamePassId)
end
end)
Here is what you should have when finished:
