# Site da loja Deixe o site da loja com a cara da cidade, escolha o endereço grátis, conecte um domínio próprio e coloque no ar. Source: https://fivedash.fivex.gg/docs/pt/store/site O site da loja é a vitrine da cidade na internet: o mesmo catálogo, os mesmos preços e o mesmo estoque do painel, com cores, fontes e imagens que você escolhe. Os jogadores escolhem os produtos, entram com o Discord, pagam e recebem dentro da cidade. Você edita tudo em **Loja → Site** e vê o resultado ao vivo, ao lado. ## Antes de começar * **Plano:** o site da loja vem em todos os planos com o módulo **Loja**. O **Domínio próprio** faz parte do plano **Pro** ou superior. * **Configuração da loja:** termine a configuração inicial da loja para colocar o site no ar e conectar um domínio. * **Permissões** (área **Site**): | Ação | Nível | | ----------------------------- | -------------- | | Site da loja | **Ver** | | Aparência, endereço e domínio | **Configurar** | ## Colocar o site no ar ### Abra o editor Vá em **Loja → Site**. ### Ligue o site No topo da página, ligue a chave ao lado de **Fora do ar**. Ela passa a mostrar **No ar**. ### Salve Clique em **Salvar** na barra que aparece embaixo. O aviso **O site está no ar** confirma: qualquer pessoa com o link já pode comprar. Fora do ar, só a equipe consegue abrir o site (quem entrou no painel e tem acesso à loja). Para ela, aparece no topo o aviso "Prévia para a equipe: este site ainda não está no ar. Coloque no ar em Loja → Site." > O menu **Ver site**, no topo das páginas da loja, mostra se o site está **No ar** ou **Fora do ar**, com **Copiar endereço**, **Abrir site** e **Gerenciar** (que leva para **Loja → Site**). ## Como editar * Todas as mudanças aparecem na **Prévia ao vivo**, à direita. Troque entre **Computador** e **Celular** para ver os dois tamanhos. * Nada vai para o site até você clicar em **Salvar**. Para voltar ao que estava salvo, clique em **Descartar**. * A exceção é o **Domínio próprio**: conectar, verificar e remover um domínio salvam na hora. * As seções **Tipografia**, **Primeira tela**, **Campanha** e **Dúvidas** ficam dentro do cartão **Avançado**. Clique nele para abrir. ## Endereço Toda loja tem um endereço grátis no formato `.fivedash.shop`, por exemplo `cidadeexemplo.fivedash.shop`. | Campo | O que faz | Padrão | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | | **Endereço grátis** | A parte antes de `.fivedash.shop`. De 3 a 32 caracteres, só letras minúsculas, números e hífens. Não pode ser um endereço reservado, terminar em `-regras` nem repetir o de outra loja. Sempre funciona, mesmo com um domínio seu. | Definido na criação da loja | | **Domínio próprio** | Um domínio da cidade, como `loja.cidadeexemplo.com.br`. Com ele conectado, o endereço grátis leva para lá. | Nenhum | > Trocar o **Endereço grátis** faz o link antigo parar de funcionar. Depois de salvar, atualize o link onde você divulgou a loja (Discord, redes sociais, painel de vendas no Discord). ### Conectar um domínio próprio ### Comece a conexão Em **Endereço → Domínio próprio**, clique em **Conectar**. ### Digite o domínio Em **Domínio**, digite o domínio principal (`cidadeexemplo.com.br`) ou um subdomínio só para a loja (`loja.cidadeexemplo.com.br`). Clique em **Continuar**. ### Crie os registros no DNS O painel mostra os registros com **Tipo**, **Nome** e **Valor**, com botões **Copiar nome** e **Copiar valor**. No painel onde você comprou o domínio (Registro.br, Hostinger, Cloudflare, GoDaddy), procure por "DNS" ou "Zona DNS" e crie exatamente esses registros. ### Espere a verificação Clique em **Verificar agora** ou feche a janela: a verificação continua sozinha. Costuma levar alguns minutos, às vezes algumas horas. ### Pronto Quando o domínio aparece como **Conectado**, o site abre em `https://` no seu domínio, com HTTPS grátis, e o endereço grátis leva para lá. Os registros que o painel costuma pedir: | Domínio | Tipo | Nome | Valor | | ----------------------------------------- | ------- | ---------------------- | ---------------------- | | Principal (`cidadeexemplo.com.br`) | `A` | `@` | `76.76.21.21` | | Subdomínio (`loja.cidadeexemplo.com.br`) | `CNAME` | `loja` | `cname.vercel-dns.com` | | Domínio já usado em outra conta da Vercel | `TXT` | O que o painel mostrar | O que o painel mostrar | > Use sempre os valores que aparecem no painel: eles podem ser diferentes dos acima para o seu domínio. Se já existir um registro com o mesmo nome, troque o valor dele. No domínio principal, apague outros registros `A` ou `AAAA` do `@`. No Cloudflare, deixe a nuvem cinza ("Somente DNS"). | Situação do domínio | O que quer dizer | | ------------------- | --------------------------------------------------------------------------------------------------- | | **Aguardando DNS** | O registro ainda não foi encontrado. Crie o registro no DNS para ele abrir o site. | | **Falta verificar** | O domínio já está ligado a outra conta da Vercel. Crie também o registro `TXT` que o painel mostra. | | **Conectado** | HTTPS ativo. O endereço grátis leva para cá. | No menu **Opções do domínio** você encontra **Abrir site**, **Ver registros DNS**, **Verificar de novo**, **Trocar domínio** e **Remover**. Remover faz o site parar de abrir nesse domínio e ficar só no endereço grátis; os registros no seu DNS podem ser apagados depois. ## Cores | Campo | O que faz | Padrão | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------- | | **Tema do site** | **Escuro** (fundo quase preto, texto claro) ou **Claro** (fundo claro, texto escuro). A cor do texto acompanha o fundo sozinha. | **Escuro** | | **Destaque** | A cor dos botões de comprar, do aviso do topo e do rodapé. | A cor da loja | Se o texto ou os botões ficarem difíceis de ler, o editor mostra um aviso para escolher outro fundo ou outro destaque. ## Topo da página | Campo | O que faz | Padrão | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | | **Marca** | Como a loja aparece no topo e no rodapé: **Ícone e nome**, **Só o ícone** ou **Logo**. | **Ícone e nome** | | **Logo** | PNG com fundo transparente fica melhor. Qualquer formato, até 800 × 240 e 1 MB. Sem logo, aparecem o ícone e o nome. | Sem logo | | **Ícone da aba** | O ícone na aba do navegador e nos favoritos. PNG, de preferência quadrado, reduzido para até 256 × 256, até 1 MB. Sem ele, vai o ícone do servidor. | Ícone do servidor | | **Aviso no topo** | Uma linha em cima de todas as páginas, até 90 caracteres. Vazio, some. | Vazio | ## Cidade | Campo | O que faz | Padrão | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | | **Redes sociais** | Discord, Instagram, TikTok, YouTube, Twitch e X. Aparecem no rodapé; o convite do Discord também vai no topo e nas dúvidas. Deixe vazias as que a cidade não usa. | Vazias | | **Jogadores online** | Mostra "248 pessoas na cidade agora", lido do servidor. Some quando ele está fora do ar. | Ligado | | **Entrar na cidade** | Um botão que abre o FiveM direto no endereço `cfx.re/join` do servidor. Precisa do endereço cfx.re do servidor (em **Gerenciar servidores**). | Ligado | ## Compartilhamento | Campo | O que faz | Padrão | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | | **Imagem de compartilhamento** | Aparece quando o link da loja é mandado no Discord, no WhatsApp ou nas redes. 1200 × 630. Sem ela, o link usa o banner ou a imagem grande. | Sem imagem | ## Avançado ### Tipografia | Campo | O que faz | Padrão | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | **Títulos** | Fonte do nome da loja, das categorias e dos números grandes: Archivo, Archivo Estreita, Anton, Bebas Neue, Big Shoulders, Bricolage Grotesque, Unbounded, Chakra Petch, Russo One, Space Grotesk ou Inter. | Archivo Estreita | | **Texto** | Fonte das descrições, preços e botões: Archivo, Space Grotesk, Inter, Manrope, DM Sans ou Rubik. | Inter | | **Títulos em maiúsculas** | Escreve os títulos em letras maiúsculas. | Ligado | | **Cantos** | Cantos de botões, fotos e cartões: **Retos**, **Suaves** ou **Redondos**. | **Suaves** | | **Fotos** | Formato das fotos dos produtos em todo o site: **Deitadas (4:3)** ou **Em pé (3:4)**. | **Deitadas (4:3)** | ### Primeira tela | Campo | O que faz | Padrão | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | **Produto em destaque** | O cartão "Em destaque" ao lado do nome da loja, com a foto e o botão de comprar. | **Automático: o primeiro em destaque** | | **Título** | A frase grande da primeira tela, até 48 caracteres. | "Chegue na cidade com tudo." | | **Frase** | Uma frase dizendo o que a loja vende ou como funciona, até 180 caracteres. | "VIPs, carros e dinheiro com entrega automática no seu ID. Pague no Pix e entre jogando na hora." | | **Imagem grande** | Fundo do cartão grande da primeira tela, atrás do título: uma foto da cidade ou uma arte da campanha, 4:3. Sem imagem, a cor de destaque sobe do pé do cartão num degradê. | Sem imagem | No modo automático, o site mostra o primeiro produto marcado como destaque; se não houver, o primeiro à venda. ### Campanha | Campo | O que faz | Padrão | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | **Banner** | Uma faixa larga logo abaixo da primeira tela, para o evento ou a promoção do mês. 1920 × 400. | Sem banner | | **Ao clicar** | Para onde o banner leva: **Nada**, **Produto** (escolha em **Produto do banner**) ou **Endereço**. Endereços de fora abrem numa aba nova. | **Nada** | ### Dúvidas As perguntas aparecem no fim da página inicial. A loja começa com cinco perguntas prontas (como receber, formas de pagamento, onde encontrar o ID, duração dos benefícios e o que fazer se não chegou). * Até 8 perguntas. Cada **Pergunta** tem até 90 caracteres, e cada **Resposta**, até 400. * Nas respostas, `{loja}` vira o nome da loja e `{pagamento}` as formas de pagamento. * Use **Adicionar pergunta** para incluir uma e **Restaurar padrão** para voltar às perguntas prontas. ### Imagens Logo, banner, imagem grande e imagem de compartilhamento aceitam PNG, JPG, WebP ou GIF de até 1 MB. Depois de escolher, o editor abre um recorte (**Ajuste o banner**, **Ajuste a imagem**, **Ajuste a imagem de compartilhamento**) no tamanho certo. ## O que o comprador vê | Página | O que tem | | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Início | Primeira tela com o produto em destaque, banner, catálogo por categoria, **Como funciona** em três passos (**Escolha**, **Pague**, **Jogue**) e **Dúvidas antes de comprar**. | | Categoria | Os produtos à venda de uma categoria visível. | | Produto | Foto, preço, **O que você recebe**, quantidade ou escolhas, estoque ("Restam 3"), limite por jogador e o botão **Adicionar ao carrinho**. | | **Carrinho** | Os itens, a quantidade, **Presentear** para mandar a outro ID e **Ir para o pagamento**. | | **Finalizar compra** | Entrar com o Discord, **Quem recebe na cidade**, **Seus dados**, **Cupom ou código de criador**, **Usar saldo da carteira**, ofertas e **Como pagar**. | | **Sua conta** | Pedidos (**Todos**, **Em andamento**, **Entregues**), **Saldo na carteira** com **Ver extrato** e **Seus dados**. | O comprador entra com **Entrar com Discord**. A loja recebe só o nome, a foto e o e-mail do Discord dele. O login fica guardado no navegador por 30 dias. > Se a entrega na cidade estiver desligada (o recurso do FiveDash fora do servidor, desatualizado ou desligado), o site avisa que as vendas estão pausadas e não aceita pedidos até a entrega voltar. ## Perguntas frequentes **Posso ter o site no ar sem domínio próprio?** Sim. O endereço grátis `.fivedash.shop` sempre funciona, em todos os planos. **O domínio não conecta. O que conferir?** Confira se o registro foi criado com o **Nome** e o **Valor** exatos do painel, se não sobrou outro registro `A`/`AAAA` no `@` e, no Cloudflare, se a nuvem está cinza. Depois clique em **Verificar de novo**. A mudança no DNS pode levar algumas horas. **Mudei o site e nada mudou para os jogadores.** As mudanças só valem depois de **Salvar**. Se a barra **Você tem alterações não salvas** estiver aparecendo, ainda falta salvar. **Posso usar o mesmo domínio na loja e nas regras?** Não. Um domínio ligado a um site de regras do FiveDash não pode ser usado na loja. Use um subdomínio diferente, como `loja.cidadeexemplo.com.br`. ## Próximos passos [Produtos](https://fivedash.fivex.gg/docs/pt/store/products)Fotos, preços e estoque do que aparece no site. [Categorias](https://fivedash.fivex.gg/docs/pt/store/categories)Como o catálogo se organiza no site. [Pagamentos](https://fivedash.fivex.gg/docs/pt/store/payments)Conecte o Pix para o checkout receber. [Canais de venda](https://fivedash.fivex.gg/docs/pt/store/sales-channels)Leve o catálogo para o Discord.