# Store website Give the store website your city's look, pick the free address, connect your own domain and put it live. Source: https://fivedash.fivex.gg/docs/en/store/site The store website is the city's shop window online: the same catalog, prices and stock as the panel, with the colors, fonts and images you choose. Players pick products, sign in with Discord, pay and receive inside the city. You edit everything in **Store → Website** and see the result live, alongside. ## Before you start * **Plan:** the store website comes with every plan that has the **Store** module. **Own domain** is part of the **Pro** plan or above. * **Store setup:** finish the store's initial setup to put the website live and connect a domain. * **Permissions** (**Site** area): | Action | Level | | ------------------------ | ------------- | | The store's site | **View** | | Look, address and domain | **Configure** | ## Put the website live ### Open the editor Go to **Store → Website**. ### Turn the website on At the top of the page, turn on the switch next to **Offline**. It changes to **Live**. ### Save Click **Save** in the bar that shows up at the bottom. The **The website is live** notice confirms it: anyone with the link can buy now. While offline, only the team can open the website (people signed in to the panel with access to the store). They see this notice at the top: "Team preview: this site isn't live yet. Put it live in Store → Site." > The **View site** menu, at the top of the store pages, shows whether the website is **Live** or **Offline**, with **Copy address**, **Open site** and **Manage** (which goes to **Store → Website**). ## How editing works * Every change shows in the **Live preview**, on the right. Switch between **Desktop** and **Mobile** to see both sizes. * Nothing reaches the website until you click **Save**. To go back to what was saved, click **Discard**. * The exception is **Own domain**: connecting, checking and removing a domain save right away. * The **Typography**, **First screen**, **Campaign** and **FAQ** sections are inside the **Advanced** card. Click it to open them. ## Address Every store has a free address in the format `
.fivedash.shop`, for example `cidadeexemplo.fivedash.shop`. | Field | What it does | Default | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | | **Free address** | The part before `.fivedash.shop`. 3 to 32 characters, lowercase letters, numbers and hyphens only. It can't be a reserved address, end in `-regras` or repeat another store's. Always works, even with a domain of your own. | Set when the store is created | | **Own domain** | A domain of your city, like `store.cidadeexemplo.com`. Once it's connected, the free address redirects there. | None | > Changing the **Free address** makes the old link stop working. After saving, update the link wherever you shared the store (Discord, social media, the Discord sales panel). ### Connect your own domain ### Start connecting In **Address → Own domain**, click **Connect**. ### Type the domain In **Domain**, type the main domain (`cidadeexemplo.com`) or a subdomain just for the store (`store.cidadeexemplo.com`). Click **Continue**. ### Create the DNS records The panel shows the records with **Type**, **Name** and **Value**, with **Copy name** and **Copy value** buttons. Where you bought the domain (Cloudflare, GoDaddy, Namecheap, Hostinger), look for "DNS" or "DNS zone" and create exactly those records. ### Wait for the check Click **Check now** or close the window: we keep checking on our own. It usually takes a few minutes, sometimes a few hours. ### Done When the domain shows as **Connected**, the website opens at `https://` on your domain, with free HTTPS, and the free address redirects there. The records the panel usually asks for: | Domain | Type | Name | Value | | --------------------------------------------- | ------- | -------------------- | ---------------------- | | Main (`cidadeexemplo.com`) | `A` | `@` | `76.76.21.21` | | Subdomain (`store.cidadeexemplo.com`) | `CNAME` | `store` | `cname.vercel-dns.com` | | Domain already used in another Vercel account | `TXT` | What the panel shows | What the panel shows | > Always use the values shown in the panel: they can differ from the ones above for your domain. If a record with the same name already exists, change its value. On the main domain, delete any other `A` or `AAAA` records for `@`. In Cloudflare, leave the cloud gray ("DNS only"). | Domain status | What it means | | ---------------------- | ----------------------------------------------------------------------------------------------------- | | **Waiting for DNS** | The record hasn't been found yet. Create the DNS record so it opens the website. | | **Needs verification** | The domain is already linked to another Vercel account. Also create the `TXT` record the panel shows. | | **Connected** | HTTPS on. The free address redirects here. | The **Domain options** menu has **Open website**, **View DNS records**, **Check again**, **Change domain** and **Remove**. Removing makes the website stop opening at this domain and stay only at the free address; you can delete the records in your DNS afterwards. ## Colors | Field | What it does | Default | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | | **Website theme** | **Dark** (near-black background, light text) or **Light** (light background, dark text). The text color follows the background on its own. | **Dark** | | **Accent** | The color of the buy buttons, the top notice and the footer. | The store's color | If the text or the buttons become hard to read, the editor shows a warning to pick another background or accent. ## Page header | Field | What it does | Default | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | **Brand** | How the store shows up in the header and footer: **Icon and name**, **Icon only** or **Logo**. | **Icon and name** | | **Logo** | A PNG with a transparent background looks best. Any format, up to 800 × 240 and 1 MB. Without a logo, the icon and the name show. | No logo | | **Tab icon** | The icon in the browser tab and bookmarks. PNG, ideally square, scaled down to at most 256 × 256, up to 1 MB. Without it, the server icon is used. | Server icon | | **Top notice** | A line above every page, up to 90 characters. Empty, it's hidden. | Empty | ## City | Field | What it does | Default | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | **Social media** | Discord, Instagram, TikTok, YouTube, Twitch and X. They show in the footer; the Discord invite also goes in the header and the FAQ. Leave empty the ones your city doesn't use. | Empty | | **Players online** | Shows "248 people in the city now", read from the server. Hidden while it's offline. | On | | **Join the city** | A button that opens FiveM straight to the server's `cfx.re/join` address. Needs the server's cfx.re address (in **Manage servers**). | On | ## Sharing | Field | What it does | Default | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | **Share image** | Shows when the store's link is sent on Discord, WhatsApp or social media. 1200 × 630. Without it, the link uses the banner or the large image. | No image | ## Advanced ### Typography | Field | What it does | Default | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | | **Headings** | Font for the store's name, the categories and the large numbers: Archivo, Archivo Estreita, Anton, Bebas Neue, Big Shoulders, Bricolage Grotesque, Unbounded, Chakra Petch, Russo One, Space Grotesk or Inter. | Archivo Estreita | | **Text** | Font for descriptions, prices and buttons: Archivo, Space Grotesk, Inter, Manrope, DM Sans or Rubik. | Inter | | **Uppercase headings** | Writes headings in capital letters. | On | | **Corners** | Corners of buttons, photos and cards: **Square**, **Soft** or **Round**. | **Soft** | | **Photos** | Shape of product photos across the website: **Landscape (4:3)** or **Portrait (3:4)**. | **Landscape (4:3)** | ### First screen | Field | What it does | Default | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | **Featured product** | The "Featured" card next to the store's name, with the photo and the buy button. | **Automatic: the first featured one** | | **Title** | The big line on the first screen, up to 48 characters. | "Hit the city with everything." (for cities in English) | | **Tagline** | A sentence saying what the store sells or how it works, up to 180 characters. | "VIPs, cars and cash, delivered automatically to your ID. Pay and jump straight into the game." | | **Large image** | Sits behind the title on the first screen's large card: a photo of the city or campaign art, 4:3. Without an image, the accent color rises from the bottom of the card in a gradient. | No image | In automatic mode, the website shows the first product marked as featured; if there's none, the first one on sale. ### Campaign | Field | What it does | Default | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | **Banner** | A wide strip right below the first screen, for the month's event or promotion. 1920 × 400. | No banner | | **On click** | Where the banner leads: **Nothing**, **Product** (pick it in **Banner product**) or **Address**. Outside addresses open in a new tab. | **Nothing** | ### FAQ The questions show at the end of the home page. The store starts with five ready-made questions (how to receive, payment methods, where to find the ID, how long perks last and what to do if nothing arrived). * Up to 8 questions. Each **Question** has up to 90 characters, and each **Answer**, up to 400. * In the answers, `{loja}` becomes the store's name and `{pagamento}` the payment methods. * Use **Add question** to add one and **Restore default** to go back to the ready-made questions. ### Images Logo, banner, large image and share image accept PNG, JPG, WebP or GIF up to 1 MB. After you pick one, the editor opens a crop (**Adjust the banner**, **Adjust the image**, **Adjust the share image**) at the right size. ## What the buyer sees | Page | What's on it | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Home | First screen with the featured product, banner, catalog by category, **How it works** in three steps (**Choose**, **Pay**, **Play**) and **Questions before you buy**. | | Category | The products on sale in a visible category. | | Product | Photo, price, **What you get**, quantity or choices, stock ("3 left"), per-player limit and the **Add to cart** button. | | **Cart** | The items, the quantity, **Gift it** to send it to another ID and **Go to checkout**. | | **Checkout** | Sign in with Discord, **Who gets it in the city**, **Your details**, **Coupon or creator code**, **Use wallet balance**, offers and **How to pay**. | | **Your account** | Orders (**All**, **In progress**, **Delivered**), **Wallet balance** with **See statement** and **Your details**. | The buyer signs in with **Sign in with Discord**. The store only gets their Discord name, picture and e-mail. The sign-in is kept in the browser for 30 days. > The website shows the city's language. If delivery in the city is off (the FiveDash resource missing from the server, outdated or turned off), the website says sales are paused and doesn't take orders until delivery is back. ## FAQ **Can the website be live without my own domain?** Yes. The free `.fivedash.shop` address always works, on every plan. **The domain won't connect. What should I check?** Check that the record was created with the exact **Name** and **Value** from the panel, that no other `A`/`AAAA` record is left on `@` and, in Cloudflare, that the cloud is gray. Then click **Check again**. DNS changes can take a few hours. **I changed the website and nothing changed for players.** Changes only apply after **Save**. If the **You have unsaved changes** bar is showing, you still need to save. **Can I use the same domain for the store and the rules?** No. A domain linked to a FiveDash rules website can't be used for the store. Use a different subdomain, like `store.cidadeexemplo.com`. ## Next steps [Products](https://fivedash.fivex.gg/docs/en/store/products)Photos, prices and stock of what shows on the website. [Categories](https://fivedash.fivex.gg/docs/en/store/categories)How the catalog is organized on the website. [Payments](https://fivedash.fivex.gg/docs/en/store/payments)Connect Pix so checkout can take payments. [Sales channels](https://fivedash.fivex.gg/docs/en/store/sales-channels)Take the catalog to Discord.