Dokumentacja
Znajdziesz tutaj wszystkie informacje dotyczące organizacji i zarządzania treściami widocznymi na stronie.
Strona główna
Produkty w sliderze i ich zdjęcia
Produkty widoczne w sliderze w sekcji This weeks bestsellers to 12 pierwszych produktów z kolekcji Bestsellers, natomiast produkty w sekcji New arrivals odpowiadają dwunastu pierwszym produktom w kolekcji New Arrivals. By zmienić produkty widoczne na stronie głównej, należy przejść do ustawień kolekcji i zmienić miejsce wybranych produktów - pamiętaj, że produkty zmienią swoją kolejność zarówno w sliderze jak i na stronie danej kolekcji.
Za zdjęcia produktów, które w sliderze są ustawione jako zdjęcia główne, odpowiada atrybut alt, który w tym konkretnym przypadku nazywa się hp-slider. By zmienić wyświetlane zdjęcie, należy usunąć atrybut alt z aktualnego zdjęcia, a następne przypisać go do nowego zdjęcia. O tym w jaki sposób ustawić atrybut alt przeczytasz tutaj.
Produkt
Tworzenie nowego produktu
By dodać nowy produkt, przejdź do sekcji Products, którą znajdziesz w menu widocznym z lewej strony panelu administratora na Shopify, a następnie kliknij w przycisk Add product, który umieszczony jest w prawym górnym rogu. W kolejnych etapach przewodnika poznasz zasady dodawania nowego produktu.
Opis produktu
By opis prawidłowo wyświetlał się na stronie produktu, przed dodaniem tekstu w polu opisu kliknij w przycisk Show HTML, który znajdziesz w prawym górnym rogu pola Description. Jeśli w polu będą znajdować się jakieś znaki, usuń je przed dodaniem opisu.
Zdjęcie główne i alternatywne
Zdjęcia dodajemy w sekcji Media. Pierwsze zdjęcie jest głównym zdjęciem produktu i powinno być to zdjęcie packshotowe. Kolejne zdjęcie jest zdjęciem alternatywnym i zwykle jest to zdjęcie lifestyle’owe - najlepiej sprawdzają się zdjęcia pionowe. Zdjęcie alternatywne jest widoczne np. na stronie kolekcji, po najechaniu kursorem na wybrany produktu.
Kolejność zdjęć na stronie produktowej
Kolejność zdjęć na stronie produktu ustawiamy w aplikacji Variant Wizard, którą znajdziesz klikając w przycisk More actions, umieszczony w prawym górnym rogu, a następnie wybierając z listy pozycję Edit Variant Images. Jeśli jesteś w trakcie tworzenia nowego produktu prawdopodobnie nie wyświetla się Ci się przycisk More actions, wróć do tego kroku po zapisaniu produktu.
Po kliknięciu w Edit Variant Images otworzy się okno z aplikacją. Jeśli jest to pierwsze użycie aplikacji na danym produkcie, na powitalnym ekranie zobaczysz poniższy komunikat - kliknij w przycisk Continue.

Kolejnym krokiem jest kliknięcie w pole Add Media i dodanie zdjęć lub zaznaczenie zdjęć wcześniej dodanych do produktu, po zakończonym zaznaczaniu kliknij w przycisk Done, umieszczony w prawym górnym rogu.
Kolejność zdjęć ustawiamy przeciągając zdjęcia na wybraną pozycję.
Nazwa koloru na stronie produktu
Dodanie poprawnej nazwy produktu jest ważnym aspektem poprawnego wyświetlania produktów w sklepie - zależy od niego wyświetlanie color swatchy na karcie oraz stronie produktu, a także informacji o wybranym wariancie produktu, którą klienci widzą w koszyku i potwierdzeniu zamówienia. Nazwę koloru należy dodać w każdym produkcie, nawet w sytuacji gdy warianty produktu rozbite są na osobne produkty.
O zasadach wyświetlania color swatchy i potencjalnych błędach, które się z nimi wiążą, przeczytasz tutaj.
Nazwę koloru dodajemy w sekcji Options, która znajduje się w dolnej części strony ustawień produktu. Należy zaznaczyć w niej checkbox This product has options, like size or color, następnie w polu Option name wpisać “Color”, a w polu Option values, nazwę koloru, po czym kliknąć w przycisk Done.
SEO produktu
Meta title oraz meta description przygotowane przez Marketing Team wprowadza się w sekcji Search engine listing, która znajduje się na dole strony. By dodać treści, należy kliknąć w przycisk Edit, umieszczony w prawym górnym rogu sekcji. Następnie w polu Page title wprowadź meta title, a w polu Meta description meta opis produktu.
Dobrą praktyką jest utrzymanie formatu URL/handle’a produktu według zasady (pełna nazwa
produktu) + (pełna nazwa koloru). Na przykładzie produktu Ande Side Table w wariancie
kolorystycznym Orange Peel, prawidłowy link wygląda następująco:
https://noo.ma/ande-side-table-orange-peel.
Atrybut alt zdjęć produktu
Atrybut alt jest odpowiedzialny m.in. za wyświetlanie wybranych zdjęć w menu strony, sliderze na stronie głównej czy umieszczanie na zdjęciach oznaczeń o autorach. Jedno zdjęcie może mieć przypisane kilka altów, jednak alty mega-menu, hp-slider oraz promo-product mogą być przypisane do wyłącznie jednego zdjęcia. Jeśli pomimo dodania altu, zdjęcie nie wyświetla się w wybranym miejscu, upewnij się, że dany alt nie jest przypisany do innego zdjęcia w produkcie.
By dodać atrybut alt, na stronie ustawień produktu kliknij w wybrane zdjęcie, a następnie kliknij w przycisk Add alt text, który znajduje się z prawej strony pełnoekranowego podglądu zdjęcia. Po dodaniu podpisu kliknij przycisk Save alt text. Poniżej znajdziesz listę fraz odpowiedzialnych za wyświetlanie wybranych zdjęć w poszczególnych miejscach na stronie:
Produkty w menu: mega-menu,
Slider na stronie głównej: hp-slider,
Promowane produkty na stronie kolekcji: promo-product,
Oznaczenia autora zdjęcia na stronie produktu: Image by @{nazwa
autora},
Oznaczenie właściciela domu na stronie produktu: Home of @{nazwa autora}.
Podpisy na zdjęciu
Za podpisy autorów zdjęć na stronie produktowej odpowiedzialne są alty Image by @ oraz Home of @. Więcej o ich dodaniu przeczytasz w sekcji Atrybut alt zdjęć produktu, którą znajdziesz powyżej.
Atrybuty produktu
Atrybuty produktu to lista trzech wyróżników/najważniejszych informacji o produkcie, która umieszczona jest bezpośrednio pod opisem na stronie produktowej. Atrybuty dodajemy w polu Product Page: Attributes sekcji Metafields na samym dole strony ustawień produktu.
Atrybuty zapisujemy w kolejności:
- pierwsze pole = fraza ikony pierwszego atrybutu,
- drugie pole = pierwszy atrybut,
- trzecie pole = fraza ikony drugiego atrybutu,
- czwarte pole = drugi atrybut,
- piąte pole = fraza ikony trzeciego atrybutu,
- szóste pole = trzeci atrybut.
Frazy do wszystkich dostępnych ikon znajdziesz w Bazie ikon.
Na przykładzie atrybutów produktu Feo Pouf: 1. “mattress”, 2. “Removable cushion provides multi-use application”, 3. “leaf”, 4. “Light and easy to carry”, 5. “timeless”, 6. “High-quality materials guarantee long-lasting use”.

Na stronie produktu wyświetli się w następujący sposób:

Dimensions graphics
Dimensions graphic to rysunki z wymiarowaniem produktu. Dodaje się je w metapolu Product Page: Dimensions Images, które znajdziesz w sekcji Metafields na stronie ustawień produktu.
W przypadku pojedynczego produktu, w pierwszym polu umieszczamy grafikę z wymiarowaniem mobilnym, a w drugim, z desktopowym. W przypadku bundli i więcej niż dwóch grafik, powtarzamy kolejność z pojedynczego produktu - pierwsze dwa pola to kolejno mobilne i desktopowe wymiarowanie pierwszego produktu, kolejne dwa następnego itd.
Dimensions values
Dimensions values to tekstowe wymiarowanie, które na stronie produktu wyświetla się w rozwijanym accordionie Dimensions. Dodaje się je w metapolu Product Page: Dimensions Values, które znajdziesz w sekcji Metafields na stronie ustawień produktu. Wartości wprowadzamy w formacie płaszczyzna - dwukropek - wartość liczbowa - jednostka.
W razie potrzeby (np. w produktach bundle’owych) istnieje możliwość dodania wewnętrznego nagłówka lub złamania kolumny z wartościami. Nagłówek dodajemy poprzez umieszczenie * przed tekstem nagłówka, z kolei znak / łamie kolumnę do następnego rzędu.
Na przykładzie produktu Lekko & Tows bundle: pierwsze pole jest nagłówkiem, cztery kolejne zawierają wymiarowanie, w piątym polu następuje złamanie kolumny, pole szóste to kolejny nagłówek, wszystkie pozostałe pola zawierają wymiarowanie.

Na stronie produktu zostanie to wyświetlone w następujący sposób.

Materials & finish
Pola Materials i Finish wyświetlają się w rozwijanym accordionie Details. Dodaje się je w metapolach, kolejno, Product Page: Materials i Product Page: Finish, które znajdziesz w sekcji Metafields na stronie ustawień produktu.
Podobnie jak w przypadku słownego wymiarowania, można łamać kolumnę lub dodać nagłówek. Nagłówek dodajemy poprzez umieszczenie * przed tekstem nagłówka, z kolei znak / łamie kolumnę do następnego rzędu. Szerszy opis mozliwych modyfikacji znajdziesz w sekcji Dimensions values.
Relevant info
Pole Relevant info dodaje się w metapolu Product Page: Relevant Info, które znajdziesz w sekcji Metafields na stronie ustawień produktu. Każdą z informacji dodatkowych dodaj w osobnym polu, tak jak na przykładzie poniżej. Jeśli w sekcji relevant info nie zostaną wprowadzone żadne pozycje, sekcja nie wyświetli się na stronie produktu.

Assembly & packaging
Obydwa pola wyświetlają się na stronie produktu w rozwijanym accordionie Assembly. Dodajemy je w metapolu Product Page: Assembly, według zasady pierwsze pole = Assembly, drugie pole = Packaging.
Designers
Wyświetlanie informacji o projektantach, opiera się na imionach i nazwiskach wprowadzonych w metapolu Product Page: Designers. Imię każdej z osób należy wprowadzić w osobnym polu, a skrypt automatycznie dobierze zdjęcie projektantów.
Downloads
Linki do sekcji Downloads uzupełnia się w metapolu Product Page: Downloads, według zasady: pierwsze pole = 3D Models, drugie pole = Product Sheet, trzecie pole = Images, czwarte pole = Care Guide.
W przypadku braku linka do jednego z pól należy wpisać w nim frazę “https://none.com”. Dzięki temu pozostałe linki zostaną dodane do odpowiednich pól i nazw.
Transparency
Wartości do sekcji Transparency uzupełnia się w metapolu Product Page: Transparency, według zasady: pierwsze pole = Materials, drugie pole = Taxes, trzecie pole = Transport, czwarte pole = Fixed costs & Margin.
W polach zamieść wyłącznie cyfry, symbol walutu zostanie dodany automatycznie.
Color swatches
W meta polu Color Swatches należy dodać wszystkie warianty kolorystyczne danego produktu. Następnie dodane produkty, na podstawie nazwy wariantu dodanej w sekcji Options, konwertowane są na przyciski z kolorami, które wyświetlają się na stronie oraz karcie produktu i umożliwiają przechodzenie pomiędzy kolorami.
Dobra praktyką jest ustawienie produktów według kolejności od najciemniejszego do najjaśniejszego wariantu.
Kolekcja
Badge na produktach
W większości przypadków, za badge wyświetlane na stronie kolekcji odpowiedzialne są tagi dodane do produktów. Poniżej znajdziesz listę istniejących badge’y i tagi, które je dodają.
BestsellerProdukt otagowany tagiem
“Bestseller”
New arrivalProdukt otagowany tagiem
“New arrivals”
Last piecesBadge dodawany automatycznie
do wyprzedanych produktów, które nie mają odznaczonego ustawienia “Continue selling when
out of stock”.
Quick filters
Quick filters to przyciski na stronie kolekcji, które umożliwiają szybsze przefiltrowanie produktów na stronie kolekcji. Za ich wyświetlanie odpowiadają metapola dodane do kolekcji i są to kolejno Quick filter title, Quick Filter 1, Quick Filter 2, Quick Filter 3, Quick Filter 4 i Quick Filter 5.
W polu Quick filter title wybierz z listy nagłówek, który pojawi się nad sekcją Quick Filters. Nagłówek “Quick Filters” zastosuj w sytuacji, gdy filtry będą poruszać się wewnątrz kategorii (przykładowo w kolekcji TV Stands pojawią się quick filtry wide, capacious, red, tall), natomiast nagłówek “You may also like” jest dedykowany quick filtrą, które przenoszą do innej kolekcji (przykładowo quick filtry Candles i Candle Holders w kolekcji Lightning).
Metapola Quick Filter 1 - Quick Filter 5 uzupełniamy według kolejności:
- Nazwa filtra - ważne, by była prosta i możliwa do szybkiego przeskanowania wzrokiem.
- Link do zdjęcia filtra - zdjęcie filtra powinno być przygotowane według wytycznych przedstawionych w kolejnym akapicie.
- Link do filtra - w przypadku filtrowania wewnątrz kategorii wykorzystaj linki generowane przez klasyczne filtry na stronie kolekcji, z pominięciem nazwy domeny i protokołu http. Odpowiednio przygotowany link wygenerowany przez filtry wygląda następująco: “/collections/bestsellers?filter.p.m.my_fields.type2=TV+Stands&sort_by=best-selling”. W przypadku odnośników do zewnętrznych kolekcji wklejony link może rozpoczynać się od “https://noo.ma” jednak szybsze okazały się linki dodane zgodnie z poprzednim przykładem.
W przypadku gdy Quick Filtrów jest mniej niż 5, pomiń wszystkie brakujące - na stronie wyświetlą się jedynie te uzupełnione.
Zdjęcie do quick filtra powinno być kołem o rozmiarze 80x80px, z tłem w kolorze #F7F7F7 i produktem umieszczonym wewnątrz z zachowaniem niewielkiego marginesu. Warto zapisać plik z powiększeniem x2 a następnie skompresować go na przykład na tinypng.com.

Plik w Figmie z przygotowaną templatką do tworzenia nowych grafik znajdziesz pod linkiem: https://www.figma.com/file/x8vEdK2T5fRqCZYvjAlQQh/Quick-FIlters-Images?node-id=301%3A5&t=cz9yhfJgBIZjQZe3-1.
Promo products
Promo products to dwa wyróżnione produkty, które wyświetlają się na stronie kolekcji, która posiada minimum 8 produktów. Promowane produkty dodaje się w metapolu Promo Products, które znajduje się w sekcji Metafields dostępnej na samym dole strony ustawień kolekcji.
Sekcja ma ustawiony limit na dwa produkty. W przypadku dodania większej ilości produktów, wyświetlą się jedynie dwa pierwsze.
Blog
Wpis blogowy
Baza ikon
Kliknij na nazwę ikony, by skopiować ją do schowka.
Baza kolorów
Najedź na kolor, by sprawdzić jaka nazwa wariantu kolorystycznego odpowiada za jego wyświetlanie. Jeśli wprowadzasz produkt w nowym kolorze, dodaj odpowiednią klasę zawierającą różne wariacje nazwy koloru w pliku _color-swatches.scss.