> ## Documentation Index
> Fetch the complete documentation index at: https://andcze.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Twoja strona sklepu

> Zobacz, jak wygląda publiczna strona Twojego sklepu oczami gracza i jakie ma podstrony.

<Frame caption="Strona główna sklepu widziana oczami gracza">
  <img src="https://mintcdn.com/andcze/6Qp9zwUm8VUzRssf/images/panel/storefront.png?fit=max&auto=format&n=6Qp9zwUm8VUzRssf&q=85&s=ab23ed06794b3489cd35b0f0792df264" alt="Publiczna strona sklepu z hero, produktami i statystykami" width="1280" height="720" data-path="images/panel/storefront.png" />
</Frame>

To jest ta część ItemShop.dev, którą widzą Twoi gracze — Twoja **publiczna strona sklepu**. Gracz wchodzi na nią z linku na Discordzie, w grze albo z wyszukiwarki, ogląda ofertę, wybiera serwer i przedmiot, a potem płaci. Wszystko, co tu opisujemy, to **efekt** Twojej pracy w panelu. Na tej stronie pokazujemy, co dokładnie zobaczy gracz i jakie podstrony ma Twój sklep.

<Note>
  Wygląd i treść tej strony projektujesz w **Edytorze strony**. Tutaj opisujemy **gotowy efekt** — czyli to, co widzi gracz. Jeśli chcesz coś zmienić (kolory, teksty, kolejność sekcji), zajrzyj do sekcji Edytor strony.
</Note>

## Strona główna

Strona główna to wizytówka Twojego sklepu. Składa się z kilku **sekcji** ułożonych jedna pod drugą. W domyślnym układzie gracz zobaczy je w tej kolejności:

<Steps>
  <Step title="Sekcja powitalna (hero)">
    Wielki, kolorowy baner na samej górze. Pokazuje nazwę sklepu, hasło zachęcające do gry, licznik graczy online, przycisk kopiowania adresu serwera oraz przycisk Discord. Po bokach mogą stać postacie graczy (skiny) — to świetna, pierwsza wizytówka serwera.
  </Step>

  <Step title="Baner ogłoszenia">
    Pasek z ważną informacją, np. o promocji albo evencie. Pojawia się tylko wtedy, gdy wpiszesz jego treść.
  </Step>

  <Step title="Cel miesiąca">
    Pasek postępu pokazujący, ile udało się zebrać na utrzymanie serwera w danym miesiącu. Pojawia się tylko po włączeniu tej funkcji.
  </Step>

  <Step title="Wybór trybu / serwera">
    Kafelki z Twoimi serwerami. Gracz klika ten, na którym gra, i przechodzi do produktów dla tego trybu.
  </Step>

  <Step title="Ostatnie zakupy">
    Przesuwająca się taśma z głowami graczy, którzy niedawno coś kupili. Buduje zaufanie — pokazuje, że sklep żyje.
  </Step>

  <Step title="Najbogatsi gracze">
    Podium top wspierających: trzy pierwsze miejsca z medalami (złoto, srebro, brąz), głowami graczy i wydaną kwotą.
  </Step>

  <Step title="Administracja">
    Lista osób z ekipy serwera (jeśli ją dodasz) — pokazuje, kto stoi za projektem.
  </Step>
</Steps>

<Tip>
  Kolejność tych sekcji oraz to, które z nich w ogóle się pokazują, ustalasz sam w Edytorze strony. Możesz przesuwać sekcje, ukrywać te, których nie potrzebujesz, i dokładać własne. To, co opisujemy wyżej, to tylko domyślny, gotowy układ na start.
</Tip>

### Sekcja powitalna (hero)

To pierwsza rzecz, jaką widzi gracz. Zawiera:

<Columns cols={2}>
  <Card title="Nazwa i hasło" icon="type">
    Duża nazwa sklepu oraz krótkie hasło, np. „Wspieraj serwer i odbierz przedmioty od razu w grze". Jeśli nie wpiszesz własnego hasła, pokaże się sensowny tekst domyślny.
  </Card>

  <Card title="Licznik graczy online" icon="users">
    Animowana liczba graczy aktualnie na serwerze, z migającą zieloną kropką. Pokazuje, że serwer żyje.
  </Card>

  <Card title="Przycisk adresu serwera" icon="copy">
    Gracz klika i od razu kopiuje adres (IP) Twojego serwera do schowka — bez przepisywania.
  </Card>

  <Card title="Przycisk Discord i social media" icon="message-circle">
    Zaproszenie na Discord oraz ikony Twoich profili (np. YouTube, TikTok, Instagram), jeśli je podasz.
  </Card>
</Columns>

<Note>
  Postacie graczy (skiny) widoczne po bokach baneru oraz dodatkowe przyciski w hero ustawiasz w Edytorze strony. Możesz wstawić nick gracza (wtedy pokaże się jego skin) albo własny obrazek.
</Note>

### Baner ogłoszenia

To wyróżniony pasek na środku strony, idealny do krótkiej, ważnej wiadomości — na przykład „Weekend -30% na wszystkie rangi!". Baner pojawia się **tylko wtedy**, gdy wpiszesz jego treść. Jeśli zostawisz go pustym, gracz go nie zobaczy.

### Cel miesiąca

Pasek postępu, który pokazuje, ile pieniędzy zebrano w bieżącym miesiącu względem celu, jaki sobie ustawisz (np. „koszt utrzymania serwera"). To delikatna zachęta do wsparcia — gracze chętniej dorzucają się, gdy widzą, ile brakuje. Pasek pojawia się tylko po włączeniu tej funkcji i ustawieniu kwoty docelowej.

### Wybór trybu / serwera

Jeśli masz więcej niż jeden serwer (np. SkyBlock, Survival, Anarchia), gracz najpierw wybiera ten, na którym gra. Każdy kafelek pokazuje:

* nazwę serwera i krótki opis,
* status **Online** lub **Offline**,
* liczbę graczy aktualnie na serwerze,
* przycisk **Wybierz**, który przenosi do produktów dostępnych w tym trybie.

<Tip>
  Dzięki temu gracz widzi tylko te przedmioty, które naprawdę działają na jego serwerze — mniej pomyłek przy zakupie i mniej reklamacji u Ciebie.
</Tip>

### Ostatnie zakupy i najbogatsi gracze

To dwie sekcje, które budują zaufanie i zdrową rywalizację:

<Columns cols={2}>
  <Card title="Ostatnie zakupy" icon="receipt">
    Przesuwająca się taśma z głowami graczy, którzy niedawno coś kupili, wraz z kwotą i informacją „jak dawno temu". Pokazuje, że sklep jest aktywny.
  </Card>

  <Card title="Najbogatsi gracze" icon="trophy">
    Podium trzech graczy, którzy wydali najwięcej — ze złotym, srebrnym i brązowym miejscem. Motywuje innych, by też trafić na listę.
  </Card>
</Columns>

<Note>
  Obie sekcje aktualizują się same — gracz nie musi odświeżać strony, by zobaczyć nowe zakupy. Jeśli sklep jest nowy i nie ma jeszcze zakupów, pokaże się grzeczna informacja zamiast pustej listy.
</Note>

## Podstrony sklepu

Oprócz strony głównej Twój sklep ma kilka gotowych podstron. Gracz przechodzi do nich z menu na górze (lub w stopce). Oto każda z nich.

<AccordionGroup>
  <Accordion title="Sklep — katalog produktów" icon="shopping-bag">
    Pełna lista przedmiotów na sprzedaż. Każdy produkt to karta z nazwą, krótkim opisem, ceną i przyciskiem zakupu. Produkty oznaczone jako wyróżnione mają plakietkę **Hit**, a te w promocji — plakietkę ze zniżką (np. `-30%`) i przekreśloną starą ceną. Gracz może też najpierw wybrać serwer, a katalog pokaże mu tylko pasujące przedmioty. Kliknięcie produktu przenosi do koszyka i płatności.
  </Accordion>

  <Accordion title="Serwery" icon="server">
    Lista Twoich serwerów z większą ilością szczegółów niż na stronie głównej: status Online/Offline, wersja gry, pasek zajętości (ilu graczy z ilu możliwych) oraz przycisk kopiowania adresu serwera. Świetne miejsce, by gracz szybko sprawdził, gdzie jest najwięcej osób, i skopiował IP, żeby dołączyć.
  </Accordion>

  <Accordion title="Sprawdź status zamówienia" icon="search">
    Strona, na której gracz wpisuje **numer zamówienia** i od razu widzi, co się z nim dzieje. Statusy są jasne: **Opłacone**, **Zrealizowane**, **W realizacji**, **Oczekuje na płatność**, **Anulowane**, **Nieudane** lub **Reklamacja**. Poniżej pokazują się szczegóły: produkt, serwer, nick gracza, kwota i data. To odciąża Ciebie — gracz sam sprawdza zamówienie, zamiast pisać do Ciebie z pytaniem.
  </Accordion>

  <Accordion title="Zrealizuj voucher" icon="ticket">
    Strona do wpisania **kodu vouchera**. Gracz podaje swój nick w grze (pokazuje się przy nim jego głowa, gdy nick jest poprawny) oraz kod, i klika **Zrealizuj voucher**. Po udanej realizacji widzi potwierdzenie z numerem zamówienia, a nagroda trafia do gry. Vouchery świetnie sprawdzają się jako nagrody w konkursach albo prezenty dla graczy.
  </Accordion>

  <Accordion title="Regulamin" icon="file-text">
    Strona z regulaminem Twojego sklepu. Treść wpisujesz w Edytorze strony. Jeśli jej nie uzupełnisz, gracz zobaczy sensowną wersję domyślną.
  </Accordion>

  <Accordion title="Polityka prywatności" icon="shield">
    Strona z informacją, jak dbasz o dane graczy. Działa tak samo jak regulamin — treść ustawiasz w Edytorze, a do czasu uzupełnienia widoczna jest wersja domyślna.
  </Accordion>
</AccordionGroup>

<Tip>
  Linki, które gracz widzi w menu na górze, też ustawiasz w Edytorze strony. Możesz pokazać lub ukryć poszczególne podstrony, a nawet dodać własny link prowadzący np. na stronę serwera albo do panelu gracza.
</Tip>

## Drobne, ale ważne udogodnienia dla gracza

Te elementy pojawiają się w wielu miejscach sklepu i bardzo ułatwiają graczom życie.

<Columns cols={2}>
  <Card title="Kopiowanie adresu serwera" icon="copy">
    Niemal wszędzie, gdzie pokazany jest adres (IP) serwera, gracz może go kliknąć i od razu skopiować — bez ręcznego przepisywania. Po kliknięciu pojawia się krótkie „Skopiowano".
  </Card>

  <Card title="Przełącznik języka" icon="languages">
    Jeśli włączysz w sklepie więcej niż jeden język, w menu pojawi się przełącznik z flagami. Gracz wybiera język, a cała strona zmienia się na wybrany. Wybór jest zapamiętywany, więc przy kolejnej wizycie gracz od razu widzi stronę w swoim języku.
  </Card>
</Columns>

<Note>
  Przełącznik języka pokazuje się **tylko wtedy**, gdy w sklepie masz włączony więcej niż jeden język. Przy jednym języku gracz go nie zobaczy. Tłumaczenia treści włączasz i ustawiasz w panelu.
</Note>

## Jak to wszystko łączy się z panelem

Każdy element tej strony ma swoje źródło w panelu:

<Columns cols={2}>
  <Card title="Produkty" icon="box">
    To, co gracz widzi w katalogu i na stronie głównej, pochodzi z sekcji **Produkty**.
  </Card>

  <Card title="Serwery" icon="server">
    Kafelki trybów i strona Serwery biorą dane z sekcji **Serwery**.
  </Card>

  <Card title="Wygląd i układ" icon="paintbrush">
    Kolory, teksty, kolejność sekcji, logo i menu zmieniasz w **Edytorze strony**.
  </Card>

  <Card title="Ogłoszenie, cel, social media" icon="settings">
    Treść baneru, cel miesiąca, adres Discord i linki social media ustawiasz w **Ustawieniach** sklepu lub bezpośrednio w Edytorze.
  </Card>
</Columns>

## Dobre praktyki

<Tip>
  * **Uzupełnij regulamin i politykę prywatności** — to buduje zaufanie i porządkuje sprawy formalne. Nie zostawiaj wersji domyślnej na stałe.
  * **Pisz jasne opisy produktów** — gracz, który wie, co kupuje, rzadziej prosi o zwrot. Napisz, co dokładnie dostaje i na jak długo.
  * **Dodaj hasło i skiny w hero** — pierwszy ekran robi największe wrażenie. Zadbaj o ładny baner powitalny.
  * **Włącz cel miesiąca** — pasek postępu delikatnie zachęca graczy do wsparcia serwera.
  * **Zostaw widoczne ostatnie zakupy i ranking** — pokazują, że sklep żyje, i napędzają kolejne zakupy.
  * **Sprawdź sklep oczami gracza** — wejdź na swój adres jak zwykły odwiedzający i przejdź przez wszystkie podstrony, żeby upewnić się, że wszystko działa i wygląda dobrze.
</Tip>

<Warning>
  Zanim zaprosisz graczy, zrób testowy zakup i sprawdź stronę **Sprawdź status zamówienia** — upewnij się, że status zmienia się poprawnie, a przedmiot trafia do gry. To najlepszy sposób, by mieć pewność, że Twoi gracze będą zadowoleni.
</Warning>
