Strony internetowe dla marek spożywczych.

Zobacz to na żywo

Breslau Chocolate - realne wdrożenie, strona marki rzemieślniczej czekolady z Wrocławia. Hero to sekwencja klatek tabliczki przewijana scrollem, dalej sekcja „Co w środku" i poziomy pas procesu: zbiór owoców, liofilizacja, forma, tabliczka. Sklep ma cztery smaki, kartę produktu, koszyk, kasę i potwierdzenie zamówienia. Uczciwie: cały ten przepływ jest klikalny, ale koszyk działa w pamięci przeglądarki, bez podpiętych płatności - do sprzedaży na żywo dochodzi operator płatności albo platforma sklepowa. Zdjęcia i pętle wideo wygenerowałem lokalnie (FLUX, WAN 2.2) z jednego kierunku artystycznego.

RÓWNIK - koncept palarni kawy specialty. Przelot nad żywą plantacją renderowaną w czasie rzeczywistym (WebGPU), pochodzenie trzech kaw z wysokością i odmianą, krzywa palenia, receptury parzenia, menu palarni i subskrypcja. Marka, partie i ceny są fikcyjne - technika i układ są prawdziwe.

SMASZ - koncept smash-burgerowni: hero WebGPU z animowanymi składnikami, plakatowa typografia, menu, proces i rezerwacja. Dowód, że jedzenie może wyglądać jak zwiastun filmu, a nie jak menu w PDF.

Koncepty to projekty autorskie REELM zbudowane w całości od zera (fikcyjne marki), pokazujące technologię i poziom wykończenia. Breslau Chocolate to wdrożenie. Pozostałe realizacje znajdziesz w portfolio.

Manufaktura, cukiernia, palarnia - co się różni

Strona internetowa dla marki spożywczej nie jest jedna. Każdy typ produkcji ma inne pytania klientów i inne pułapki w sklepie:

• Strona dla manufaktury czekolady - sezon prezentowy i zamówienia firmowe, edycje limitowane, informacja o wysyłce w upały, opowieść o ziarnie i temperowaniu.
• Strona dla cukierni - krótka trwałość, zamówienie tortu z datą i godziną odbioru, zdjęcia prawdziwych wyrobów z witryny, alergeny przy każdym cieście, a nie w jednej tabeli na końcu.
• Strona dla palarni kawy - data palenia, profil i metoda parzenia, wybór mielenia, subskrypcja w wybranym rytmie i osobna ścieżka dla kawiarni, które kupują hurtowo.
• Marka przekąsek, przetworów lub produktów regionalnych - pochodzenie surowca, nagrody i certyfikaty, które naprawdę masz, oraz lista sklepów stacjonarnych z mapą.

Co dostajesz w stronie marki spożywczej

Każdy element ma jeden cel: żeby ktoś poczuł smak, zanim spróbuje - i od razu mógł zamówić.

• Hero w ruchu sterowany scrollem - tabliczka się łamie, kawa spływa do filiżanki, krem opada z łyżki. Pierwsze sekundy mówią o fakturze i jakości więcej niż akapit tekstu.
• Proces jako opowieść - od plantacji albo sadu do opakowania, w kilku krótkich stacjach zamiast strony „O nas", której nikt nie otwiera.
• Sklep internetowy z żywnością w tym samym świecie - karta produktu, koszyk i kasa w tej samej palecie i świetle, podpięte do operatora płatności albo platformy, której już używasz.
• Karta produktu z kompletem danych - skład z wyróżnionymi alergenami, gramatura, przechowywanie, wartość odżywcza. Jedno źródło danych dla wszystkich widoków, więc nic się nie rozjeżdża.
• Zestawy i prezenty - opcjonalnie kilka pytań (okazja, smak, budżet, dieta), które prowadzą do gotowego zestawu. Przydaje się przed świętami i przy zamówieniach firmowych.
• Szybkość mimo ciężkich zdjęć - nowoczesne formaty, ładowanie na żądanie, ograniczenie ruchu dla osób, które go wyłączyły. Test na prawdziwym telefonie, Lighthouse 90+.
• Widoczność w Google i AI - dane strukturalne produktów, FAQ i opisy pisane tak, żeby cytowały je także ChatGPT, Perplexity i AI Overviews.

Kod i konta należą do Ciebie. Po starcie nie czeka Cię miesięczny rachunek za wtyczki.

Sklep z żywnością a przepisy

Sprzedaż żywności przez internet to sprzedaż na odległość. Rozporządzenie (UE) nr 1169/2011 w art. 14 mówi, że przy żywności opakowanej obowiązkowe informacje muszą być dostępne, zanim klient zawrze umowę - na stronie albo w inny wyraźnie wskazany sposób, bez dodatkowych kosztów dla kupującego. Wyjątek to data minimalnej trwałości i termin przydatności do spożycia: te wystarczy podać przy dostawie, kiedy klient i tak musi dostać komplet danych.

W praktyce karta produktu w Twoim sklepie powinna pokazywać to samo, co etykieta:

• Skład i alergeny - załącznik II rozporządzenia wymienia 14 grup alergenów, m.in. gluten, mleko, jaja, orzechy, orzeszki ziemne, soję i sezam. W wykazie składników wyróżniam je tak, jak na etykiecie.
• Nazwa, ilość netto, warunki przechowywania - do tego dane producenta lub sprzedawcy oraz kraj pochodzenia, gdy jest wymagany.
• Wartość odżywcza - w tabeli, którą da się przeczytać na telefonie bez powiększania.
• Zwroty - ustawa o prawach konsumenta daje 14 dni na odstąpienie od umowy zawartej na odległość, ale przewiduje wyjątki, m.in. dla towaru szybko się psującego i dla towaru w zapieczętowanym opakowaniu otwartym po dostawie ze względów higienicznych. Wpisuję je do regulaminu tylko tam, gdzie naprawdę pasują - UOKiK kwestionował klauzule stosowane na wyrost.

Za treść informacji o żywności odpowiada producent lub sprzedawca, nie programista. Ja buduję strukturę, w której nic nie da się pominąć: każde pole z etykiety ma swoje miejsce w karcie produktu, a zmiana receptury to zmiana w jednym miejscu. Brzmienie danych i regulamin warto potwierdzić z technologiem żywności i prawnikiem.

Czy ChatGPT poleci Twoją czekoladę?

Coraz więcej osób pyta asystenta AI, gdzie kupić dobrą kawę ziarnistą albo jaką czekoladę dać na prezent. Asystent poleca to, co potrafi przeczytać. Jeśli opisy produktów i skład ładują się dopiero po wykonaniu JavaScriptu, większość botów AI widzi pustą stronę - i poleca kogoś innego.

Sprawdzisz to za darmo w Audycie AI: wpisujesz adres, a po kilkunastu sekundach dostajesz ocenę 0-100 i listę problemów po polsku. Więcej o tym, skąd asystenci biorą rekomendacje, piszę w poradniku Czy ChatGPT poleca Twoją firmę?