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:

  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.

Sekcja ma ustawiony limit na dwa produkty. W przypadku dodania większej ilości produktów, wyświetlą się jedynie dwa pierwsze.

Header

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.

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

In progess...

Baza ikon

Kliknij na nazwę ikony, by skopiować ją do schowka.

candles
nail
rotate
socket
magnet
newspaper
home
drop
functional
timeless
wood
atik
height
golden-ratio
layers
measure
solid
tap
sofa
glass
wand
height-width
width
center
bulb
no-screwdriver
hot-bowl
leaf
puzzle
scratch
nolle-wheel
mattress
suumo
cable-cutout
screwdriver
temperature
folding
bent-steel
keys
plant
materials
sustainability
board
colors
four
flexible
light-temperature
yami-leg
wielka-lechia
wool

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.

Smoked Ashwood
Mellow Yellow
Yellow Mellow
Mellow Yellow / Mellow Yellow
Poppy Red
Poppy Red
Gold Green
Italian Olive
Orange Peel
Yellow Ochre
Ochre Yellow
Forest Green
Deep Beet Burgundy
Blossom Pink
Pink Blossom
Pale Grey
Universal Grey Wool
Universal Grey Wool / Universal Grey Wool
Classic Beige Wool
Cream Beige
Blueberry Pie
Blueberry Pie Wool
Blueberry Pie Wool / Blueberry Pie Wool
Terracotta Wool
Terracotta Blush
Terracotta Blush Melamine
Lilac Fluff
Lilac Fluff Wool
Evening Blue
Midnight Blue
Storm Blue
Storm Blue / Storm Blue
Oatmilk Beige
Piazza Beige
Almond Grey
Almond Grey Melamine
Piazza Beige / Piazza Beige
Almond Grey / Piazza Beige
Beechwood
Oak
Oak / Oak
Wine Berry
Smoked Oak
Walnut
Iris Violet
Vulcano Black
Graphite Black
Vulcano Black Steel
Black Oak
Black Tie Wool
Black Tie Wool / Black Oak
Vulcano Black Melamine
Vulcano Black / Vulcano Black
Black Tie Wool / Black Tie Wool
Universal Grey Wool / Black Oak
Almond Grey / Vulcano Black
Black Tie Wool / Universal Grey Wool
Blueberry Pie / Seashell Beige
Blueberry Pie / Piazza Beige
Black Tie Wool / Oak
Vulcano Black / Oak
Oak / Vulcano Black
Oak Body / Black Legs
Walnut / Vulcano Black
Blueberry Pie Wool / Universal Grey Wool
Almond Grey / Midnight Blue
Piazza Beige / Forest Green
Cream Beige / Oak
Terracotta / Lilac Fluff
Universal Grey Wool / Oak
Lilac Fluff / Poppy Red
Blossom Pink / Iris Violet
Cream Beige / Black Oak
Terracotta Wool / Oak
Blueberry Pie Wool / Terracotta Wool
Apple Green / Blueberry Pie
Iris Violet / Orange Peel
Midnight Blue / Vulcano Black
Black Tie Wool / Evening Blue
Vulcano Black / Storm Blue
Mellow Yellow / Wine Berry / Blueberry Pie
Piazza Beige / Blueberry Pie / Poppy Red
Blueberry Pie / Cream Beige
Terracotta / Cream Beige / Lilac Fluff
Black Tie Wool / Blueberry Pie Wool
Vulcano Black / Blueberry Pie
Black Tie Wool / Terracotta Wool
Black Tie Wool / Italian Olive
Vulcano Black / Piazza Beige
Piazza Beige / Vulcano Black
Piazza Beige / Blueberry Pie
Storm Blue / Vulcano Black
Storm Blue / Piazza Beige
Midnight Blue / Piazza Beige
Poppy Red / Blossom Pink
Poppy Red / Gold Green
Poppy Red / Mellow Yellow
Poppy Red / Piazza Beige
Poppy Red / Piazza Beige
Blossom Pink / Poppy Red
Vulcano Black / Orange Peel
Universal Grey Wool / Blueberry Pie Wool
Universal Grey Wool / Terracotta Wool
Mellow Yellow / Poppy Red
Mellow Yellow / Piazza Beige