Graficzny kreator służy do przygotowywania widgetów rekomendacji w jak największym stopniu odzwierciedlających wygląd sklepu internetowego. Aby efektywnie wykorzystać kreator proponujemy postępować wg poniższego schematu:

Znajomość całkowitego rozmiaru widgetu – warto przed przystąpieniem do tworzenia widgetu rekomendacji określić miejsce w którym ma on się później znaleźć. Dzięki temu można określić szerokość i wysokości całkowitą widgetu. Do zmierzenia wielkości przyszłego widgetu mogą posłużyć narzędzia deweloperskie w przeglądarce Chrome lub Firebug w przeglądarce Firefox. Na potrzeby poniższej instrukcji załóżmy, że widget rekomendacji ma mieć szerokość 900px i wysokość 300px. Załóżmy też, że standardowy widok sklepu w tej szerokości prezentuje 5 produktów w wierszu.

Dodanie nowego widgetu.

Aby dodać nowy widget należy wybierz zakładkę Rekomendacje > Dodaj widget

creator_1

Następnie przejdź przez pierwsze 2 kroki tworzenia widgetu – wybór placementu, wybór strategii – więcej dowiesz się z artykułu Wybór strategii

W kroku 3 – kreatorze graficznym widgetu należy rozpocząć od USTAWIEŃ OGÓLNYCH widgetu. Są one widoczne od razu po przejściu do kreatora graficznego.

creator_2

1, Nadaj nazwę widgetu – najlepiej jeżeli będzie skojarzona z jego miejscem, np Strona główna, HP…

2. Wybierz katalog z którego będą dobierane produkty. Jeżeli korzystasz z jednego katalogu produktów będzie on już wybrany. Jeżeli jeszcze nie integrowałeś katalogu produktów widget skorzysta z wbudowanego katalogu demonstracyjnego Quarticon.

3. Ustal kolor tła całego widgetu za pomocą colorpicker-a oraz stopień przezroczystości widgetu jeżeli jest to dla Ciebie niezbędne.

4. Dodaj znaczniki UTM na potrzeby trackowania ruchu z ramki w Google Analytics.

5. Ustal szerokość i kolor obrysu widgetu.

6. Włącz/wyłącz opcję responsywności widgetu.

7. Określ wysokość i szerokość widgetu w pikselach.

Następnie przejdź do zakładki Siatka produktów.

creator_3

  1. Określ ilość wierszy i kolumn produktów rekomendowanych w widgecie (w naszym przykładzie będzie to 1 wiersz z 5 kolumnami, czyli 5 produktów rekomendowanych).
  2. Określ wysokość i szerokość siatki produktów. Szerokość i wysokość siatki powinna być równa bądź mniejsza od wcześniej ustawianej w zakładce USTAWIENIA OGÓLNE szerokości i wysokości całego widgetu.
  3. Określ odległość w pikselach od lewej i od góry siatki produktów od początku widgetu. Opcja ta może posłużyć do odsunięcia od góry siatki produktów  w celu dodania komunikatu tekstowego bądź graficznego na widgecie nad siatką produktów. W naszym przypadku widget będzie zawierał komunikat „Produkty wybrane dla Ciebie”, dodany zostanie później, obecnie przygotujemy dla niego miejsce odsuwając siatkę od góry o 40 pikseli i ustawiając wysokość siatki o 40 pikseli mniejszą od wysokości całego widgetu czyli 260 pikseli.

Następnie należy przejść do warstwy PRODUKT

creator_4

Po zaznaczeniu tej warstwy system automatycznie oznaczy pierwszy obszar produktu na widgecie w celu edycji. Edytując poszczególne elementy produktu ustawione zostaną w identycznym układzie pozostałe produkty w widgecie co będzie widoczne w wyszarzonej części widgetu.

  1. Ustaw kolor tła miejsca produktowego
  2. Ustaw kolor, szerokość obrysu i wielkość zaokrąglenia miejsca produktowego
  3. Ustaw odległość miejsc produktowych na widgecie w pionie (kolumnie) i poziomie (wierszu) w pikselach.

Następnie przejdź do edycji poszczególnych elementów produktu takich jak zdjęcie, nazwa, cena lub dodaj nowe atrybuty produktu. Można tego dokonać zmieniając wartości w polach styli po prawej strony po kliknięciu w dany element lub poprzez przenoszenie, roszerzanie elementu kursorem (funkcja drag & drop).

creator_5

Następnie dostosuj pozostałe elementy produktu klikając i edytując ich style. W naszym przypadku wynikowym ustawieniem jest poniższy zrzut ekranu

creator_6

Po dostosowaniu elementów dotyczących produktów rekomendowanych można dodać elementy typu komunikat tekstowy lub komunikat graficzny. W tym celu należy przejśc ponownie do warstwy USTAWIENIA OGÓLNE, kliknąć Dodaj element aby wyświetlić menu i wybrać jedną z opcji.

creator_7

Po wybraniu jednego z elementów pojawi się on na kreatorze, w warstwach powyżej dodatkowych elementów oraz pojawią się style elementu po prawej stronie. W naszym przypadku dodaliśmy tekst.

creator_8

Po dostosowaniu treści, czcionki, koloru i wielkości czcionki otrzymujemy oczekiwany finalny wygląd.

CREATOR_9

W widgetach można dodawać dowolna ilość elementów dodatkowych typu tekst, bądź grafika i przesuwać je pomiędzy sobą w menu Warstw za pomocą kliknięć i przeciągania kursorem, gdzie możemy zmieniać kolejność widoczności poszczególnych warstw.

creator_10

Tak przygotowany widget należy zapisać przyciskiem Dalej w prawym dolnym rogu.