This script is compatible with Illenium Appareance, esx_skin, and qb_clothing.
This script is compatible with the clothing-as-item system of Quasar Inventory.
INSTALLATION GUIDE
Download from KEYMASTER and Unzip the sleek-clothestore.pack.zip and place this folder in your server's resource folder.
Add the resource to your server start config: ensure sleek-clothestore, the name of the folder must not be changed or the resource will not function correctly.Ensure the script is the latest one.
Open the config.lua and configure it correctly, paying attention to all the variables, especially the open functions that you need to fill in according to your systems, like the Notifications one.
Install file INSTALL SQL.sqlin your database.
Clear the cache of your server and also of your own FiveM.
Reboot the entire server with the forge script well ensured in your server.cfg.
Download from KEYMASTER and Unzip the sleek-clothestore.pack.zip and place this folder in your server's resource folder.
Add the resource to your server start config: ensure sleek-clothestore, the name of the folder must not be changed or the resource will not function correctly.Ensure the script is the latest one.
Required Step for QB-Clothing Users (One-Time Only)
If you're using qb-clothing, you must add the following block of code to ensure full compatibility with all Forge scripts that rely on skin handling.
⚠️ Note: This is a common requirement for all Forge scripts using skin. You only need to add this once—do not repeat it for each script.
📂 File to edit:
📌 Add this block of code:
💡 Tip: Place this code at the bottom of the file or next to other event handlers.
It’s essential for proper integration between Forge scripts and the QB-Clothing system.
Open the config.lua and configure it correctly, paying attention to all the variables, especially the open functions that you need to fill in according to your systems, like the Notifications one.
Install file INSTALL SQL.sqlin your database.
Clear the cache of your server and also of your own FiveM.
Reboot the entire server with the forge script well ensured in your server.cfg.
FREQUENTLY ASKED QUESTIONS
In what format should I add the jobs that can access a shop?
Remember to set it to true to use it.
How do I create a shop just for Masks or something else?
In the whitelistItems part, write it like this, and you can put all the categories you want to appear. What you have to put here is the ‘Labels’ that is in Config.Items
If you want everything to be displayed, set it to false like this:
CONFIG
The following will explain all the settings, one of the most important things that I recommend you spend a few minutes to understand in order to offer your users the best possible experience.
Here are all the open functions where you can configure it with your own scripts.
If you want to edit the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.
The script is RESPONSIVE for all resolutions as well.
whitelistItems = { 'Masks' } -- set this to false to disable or { } with all the whitelisted items
whitelistItems = false -- set this to false to disable or { } with all the whitelisted items
Config = { }
-- _____ _____ _ _ ______ _____ _____ _ _______ ___ _____ _____ _____ _ _
-- / __ \ _ | \ | || ___|_ _| __ \ | | | ___ \/ _ \_ _|_ _| _ | \ | |
-- | / \/ | | | \| || |_ | | | | \/ | | | |_/ / /_\ \| | | | | | | | \| |
-- | | | | | | . ` || _| | | | | __| | | | /| _ || | | | | | | | . ` |
-- | \__/\ \_/ / |\ || | _| |_| |_\ \ |_| | |\ \| | | || | _| |_\ \_/ / |\ |
-- \____/\___/\_| \_/\_| \___/ \____/\___/\_| \_\_| |_/\_/ \___/ \___/\_| \_/
-- Specify the framework to use: 'esx' or 'qbcore'
Config.Framework = 'qbcore' -- esx / qbcore
Config.SQLWrapper = 'oxmysql' -- Choose the MySQL wrapper
-- TARGET SYSTEM SETTINGS
Config.UseTargetSystem = false -- true / false
Config.TargetSystem = 'ox_target' -- ox_target / qb-target
-- APPEARANCE MANAGEMENT
Config.SkinManager = "illenium-appearance" -- Options: "esx_skin" / "illenium-appearance" / "qb-clothing"
Config.AllowOutfitSaving = true -- Enable or disable the option to save outfits
-- HANDS UP UI SETTINGS
Config.EnableHandsUpUI = true -- Enable hands-up animation while changing clothes
Config.HandsUpKey = 'x' -- Key for hands-up animation (Refer to https://www.toptal.com/developers/keycode)
Config.HandsUpAnimation = { 'missminuteman_1ig_2', 'handsup_enter', 50 }
-- COMPLETION ANIMATION
Config.EnableCompletionAnimation = true
Config.CompletionAnimation = { 'clothingtie', 'try_tie_positive_a' } -- Animation to play after purchasing new clothes
-- OUTFIT SHARING
Config.EnableOutfitSharing = true -- Allow players to share saved outfits
Config.OutfitSharingCommand = "shareoutfit" -- Command to initiate outfit sharing
-- INVENTORY SYSTEM
Config.UseQSInventory = false
Config.QSInventoryName = 'qs-inventory'
-- CAMERA SETTINGS
Config.CamFov = {
['face'] = { min = 15.0, max = 20.0 },
['chest'] = { min = 20.0, max = 25.0 },
['legs'] = { min = 30.0, max = 35.0 },
['full'] = { min = 60.0, max = 65.0 }
}
Config.CamHeight = {
['face'] = 0.65,
['chest'] = 0.2,
['legs'] = -0.6,
['full'] = -0.15
}
-- CLOTHING CATEGORIES
Config.Items = {
-- ACCESORIES
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Masks',
type = 'clothes', -- clothes / prop
id = 1, -- Component ID from the list
price = 150, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Accesories',
type = 'clothes', -- clothes / prop
id = 7, -- Component ID from the list
price = 100, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Hats',
type = 'prop', -- clothes / prop
id = 0, -- Component ID from the list
price = 250, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Glasses',
type = 'prop', -- clothes / prop
id = 1, -- Component ID from the list
price = 200, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Ears',
type = 'prop', -- clothes / prop
id = 2, -- Component ID from the list
price = 100, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Watches',
type = 'prop', -- clothes / prop
id = 6, -- Component ID from the list
price = 300, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Bracelets',
type = 'prop', -- clothes / prop
id = 7, -- Component ID from the list
price = 150, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'accessories', -- accessories / upper-body / lower-body
label = 'Bags and Parachutes',
type = 'clothes', -- clothes / prop
id = 5, -- Component ID from the list
price = 400, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
-- UPPER BODY
{
category = 'upper-body', -- accessories / upper-body / lower-body
label = 'Torsos',
type = 'clothes', -- clothes / prop
id = 3, -- Component ID from the list
price = 500, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'upper-body', -- accessories / upper-body / lower-body
label = 'Tops',
type = 'clothes', -- clothes / prop
id = 11, -- Component ID from the list
price = 300, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'upper-body', -- accessories / upper-body / lower-body
label = 'Undershirts',
type = 'clothes', -- clothes / prop
id = 8, -- Component ID from the list
price = 200, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'upper-body', -- accessories / upper-body / lower-body
label = 'Decals',
type = 'clothes', -- clothes / prop
id = 10, -- Component ID from the list
price = 100, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'upper-body', -- accessories / upper-body / lower-body
label = 'Body Armors',
type = 'clothes', -- clothes / prop
id = 9, -- Component ID from the list
price = 600, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
-- LOWER BODY
{
category = 'lower-body', -- accessories / upper-body / lower-body
label = 'Legs',
type = 'clothes', -- clothes / prop
id = 4, -- Component ID from the list
price = 400, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
},
{
category = 'lower-body', -- accessories / upper-body / lower-body
label = 'Shoes',
type = 'clothes', -- clothes / prop
id = 6, -- Component ID from the list
price = 400, -- Price of the item
blackListed = { -- Blacklisted values, leave it empty for the owners to set
['male'] = { },
['female'] = { }
}
}
}
-- UI SETTINGS
Config.UISettings = {
colors = { -- UI color settings
color1 = '#00e0ff',
color2 = '#d8dbeb',
color3 = '#00b3cc',
color4 = 'radial-gradient(76% 76% at 50% 50%, rgba(0, 224, 255, 0.2) 0%, rgba(0, 224, 255, 0) 100%)',
color5 = '#909090',
color6 = 'linear-gradient(180deg, rgba(0, 0, 0, 0) 73.21%, #0f1425 100%), linear-gradient(270deg, #0f1425 0%, rgba(15, 20, 37, 0) 51.04%), linear-gradient(180deg, rgba(15, 20, 37, 0.93) 0%, rgba(15, 20, 37, 0) 37.5%), linear-gradient(90deg, #181e33 0%, rgba(15, 20, 37, 0) 72.4%)',
color7 = 'rgba(114, 114, 114, 0.2)',
color8 = 'rgba(15, 20, 37, 0.8)',
color9 = 'rgba(0, 224, 255, 0.5)',
color10 = 'radial-gradient(76% 76% at 50% 50%, rgba(0, 224, 255, 0.1) 0%, rgba(0, 224, 255, 0) 100%)',
color11 = 'rgba(0, 224, 255, 0.25)',
color12 = 'radial-gradient(76% 76% at 50% 50%, rgba(0, 224, 255, 0.8) 0%, rgba(0, 224, 255, 0) 100%)',
color13 = '#fa08d3',
color14 = 'radial-gradient(76% 76% at 50% 50%, rgba(250, 8, 211, 0.2) 0%, rgba(250, 8, 211, 0) 100%)',
color15 = 'rgba(250, 8, 211, 0.25)',
color16 = 'radial-gradient(76% 76% at 50% 50%, rgba(250, 8, 211, 0.8) 0%, rgba(250, 8, 211, 0) 100%)',
color17 = 'rgba(0, 9, 38, 0.62)',
color18 = 'rgb(49, 175, 212)',
color19 = '#727272',
color20 = '#969696',
color21 = 'rgba(49, 175, 212, 0.3)',
color22 = '#31afd4',
color23 = 'rgba(195, 66, 66, 0.3)',
color24 = '#c34242',
color25 = 'rgba(0, 0, 0, 0.5)',
color26 = '#0f1425',
color27 = 'rgba(255, 255, 255, 0.2)',
color28 = 'rgba(90, 90, 90, 0.45)',
color29 = '#656565',
color30 = '#9b9b9b',
color31 = '#a5a5a5'
},
translations = { -- UI text translations
title1 = 'Clothes Shop',
title2 = 'What do you want to do?',
viewandshop = 'VIEW CART & SHOP',
cancelexit = 'CANCEL & EXIT',
camerause = 'CAMERA USE:',
rotatechar = 'Rotate character',
zoomchar = 'Zoom in on character',
areyousure = 'ARE YOU SURE?',
confirmremove = 'Yes',
cancelremove = 'No',
areyousure2 = 'ARE YOU SURE?',
confirmclose = 'Yes',
cancelclose = 'No',
howtopay = 'HOW DO YOU WANT TO PAY?',
cash = 'Cash',
bank = 'Bank',
saveclothes = 'DO YOU WANT SAVE CLOTHES?',
saveclothesdesc = 'If you save your clothes your clothes will appear in your housing',
newoutfit = 'NEW OUTFIT',
savebtn = 'Save',
cancelbtn = 'Don\'t Save',
storedclothes = 'YOUR STORED CLOTHES',
storedclothesdesc = 'You can wear them or delete them',
total = 'TOTAL',
openstore = 'Open clothing store',
openwardrobe = 'Open Wardrobe',
notEnoughCash = 'You do not have enough cash.',
notEnoughBank = 'You do not have enough money in the bank.'
}
}
-- ADDITIONAL UI OPTIONS
Config.EnableUISounds = true -- Enable sound effects for UI interactions
Config.EnableBlurEffect = true -- Enable background blur
Config.EnableBackground = true -- Turning this off will remove the particles and the dark background
-- STORE CONFIGURATION
Config.Stores = {
{
-- Mask Shop
coords = vector3(-1337.84, -1277.81, 4.0),
blip = {
use = true,
sprite = 362,
display = 4,
scale = 0.95,
color = 5,
name = 'Mask Store'
},
marker = {
use = true,
id = 23,
size = vector3(1.85, 1.85, 0.95),
color = { 255, 205, 0, 125 },
rotate = false,
bobUpAndDown = false
},
distance = {
marker = 3.0,
text = 2.0
},
job = {
use = false,
jobs = {}
},
wardrobeInShop = {
use = false,
coords = vector3(-1337.53, -1274.13, 4.0)
},
whitelistItems = { 'Masks' } -- set this to false to disable or {} with all the whitelisted items
},
CREATE TABLE `outfits` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`identifier` LONGTEXT NULL DEFAULT NULL COLLATE 'utf8mb3_general_ci',
`name` LONGTEXT NOT NULL COLLATE 'utf8mb3_general_ci',
`outfit` LONGTEXT NOT NULL COLLATE 'utf8mb3_general_ci',
PRIMARY KEY (`id`) USING BTREE
)
COLLATE='utf8mb3_general_ci'
ENGINE=InnoDB
;
-- HUD DISPLAY FUNCTIONS
HudDisplay = { -- To hide the HUD when displaying the UI of the shops
Hide = function()
-- exports['neon-hud']:Display(true)
end,
Show = function()
-- exports['neon-hud']:Display(false)
end
}
-- GET CLOSEST PLAYERS FUNCTION
GetClosestPlayers = function()
if Config.Framework == 'esx' then
return ESX.Game.GetPlayersInArea(GetEntityCoords(PlayerPedId()), 10.0)
elseif Config.Framework == 'qbcore' then
return QBCore.Functions.GetPlayersFromCoords(GetEntityCoords(PlayerPedId()), 10.0)
else
-- custom
end
end
-- NOTIFICATION FUNCTION
Notify = function(text) -- Notification system based on the framework
if Config.Framework == 'esx' then
ESX.ShowNotification(text)
elseif Config.Framework == 'qbcore' then
QBCore.Functions.Notify(text)
end
end
