Dokumentacja

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.

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

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

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.

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.

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.

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:

1. Nazwa filtra - ważne, by była prosta i możliwa do szybkiego przeskanowania wzrokiem.
2. Link do zdjęcia filtra - zdjęcie filtra powinno być przygotowane według wytycznych przedstawionych w kolejnym akapicie.
3. 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.

Produkty przypisane do kolekcji

Produkty, które w menu wyświetlają się po najechaniu kursorem na nazwę kategorii dodaje się za pomocą metapola Mega Menu Products, które znajduje się w sekcji Metafields dostępnej na samym dole strony ustawień kolekcji. Za zdjęcia wybranych produktów, odpowiedzialny jest atrybut alt “mega-menu” przypisany do zdjęcia, o którym więcej przeczytasz w sekcji Atrybut alt zdjęć produktu.

Wpis blogowy