06. Pierwsze kroki z szablonem - Strona główna

To poradnik zbiorczy z ustawieniami czy też krokami dla kilku modułów. W tym poradniku szykuję dla siebie stronę główną sklep.growcommerce.pl więc pokazuje od środka jak to realnie konfiguruje (a może konfigurowałem, bo jak to czytasz to już pewnie skończyłem?).

I. Wybór słowa kluczowego pod SEO

U mnie jest to dość proste, jeśli przesiadasz się z szablonu RWD to na stronie głównej miałeś/aś taką sekcje jak polecane produkty:

No i to co tu widzisz to realnie H1, który niesie znaczenie najważniejsze dla naszego sklepu. Określa co sprzedajemy, gdzie chcemy się wstrzelić czy też w jakim segmencie operujemy (Tanie krzesła komunijne? Super miękkie poduszki lędźwiowe? A może regulowane pergole z zadaszeniem?). Więc i takie powinno być nasze H1.

Ja do określenia słów kluczowych używam https://www.semrush.com/home/ ale równie dobrze może to być Twój SEOwiec, raport z SearchConsole czy inne narzędzie. SemRush ma darmowe konto jak się zarejestrujesz i chyba anulujesz plan, ale to nie o tym poradnik.

Zerkam w top słowa kluczowe:

Ale jak widać u mnie to bida, po volume widać że nikt tego nie googla, nic z tego nie jest głównym słowem kluczowym, jakie powinno mnie interesować. Wrzucam więc to co miałem. O ile na profesjonalne sklepy internetowe nadal nie rankuje tak szablony shoper to dobre słowa kluczowe.


Takie H1 powinno być tak wysoko na stronie jak to możliwe, stąd design Modern 3.0 w wersji SF otwiera się przed Wami z takim banerem koło bestsellerów:

Ten moduł to GC - Baner pionowy.

GC - Baner pionowy

Jeżeli o design chodzi to tu możecie poszaleć:

Kolorek, baner, css.

Oto kilka efektów z kilku wdrożeń, coś sobie pewnie znajdziecie, albo załapiecie o co chodzi w tym module:

No i teraz żeby zhakować jakoś to, że ten H1 ma być tak wysoko, to ukryty jest on w tym banerku!

Więc ja przy mojej konfiguracji klikam tu w treść banera:

Klikam widok kodu:

H4 widać na początku i na końcu, podmieniam na H1:

W edytorze wizualnym (czyli znowu kliknąłem ten widok kodu żeby mi się to wyłączyło), kliknąłem dalej treści by to miało sens:

Tak to wyszło:

II. Wygląd kafelka produktowego

Kafelek produktowy przekłamany jest względem tego co widzisz w edytorze wizualnym czyli tu:

Chcesz widzieć realnie praktycznie to co klient? Cofnij się (ja otwieram w drugiej karcie) do sekcji “Twoje szablony graficzne” i kliknij lupkę “Podgląd”:

Albo tu klikasz edycje (ołówek) i z górnego menu masz:

Lubiłeś/aś te gry w znajdź X różnic jako dzieciak? To zaczynamy zabawę.

Kliknąłem podgląd tak jak tu wyżej czyli jak to zobaczy klient i wygląda to tak.

REALNY WIDOK:

A z kolei w panelu widać WIDOK EDYTORA:

Zobacz nagłówek modułu, zobacz przyciski, ewentualnie ich kolory. No trochę się to nie zgrywa.

Kliknij sobie w te Bestsellery (pamiętaj, że możesz je też zamienić na cokolwiek, na promocje, na nowości, nie musisz trzymać się tego jeden do jednego!) i pierwsze co ja robię to równam kolumny lewa - prawa z banerem czyli uwalam sam nagłówek:

Dwie opcje pod nim odznaczyłem. Zapisuje.

Nim stąd uciekniesz to warto jeszcze zerknąć na ilość produktów per urządzenie, tu ściąga ode mnie jeśli masz inaczej:

A jak zjedziesz niżej to możesz wybrać czy pokazywać VAT czy pokazywać kod produktu i producenta (reszty nie polecam):

Zapisuje ten moduł i wracam do naprawy tego błędu:

III. Wygląd kafelka produktowego ale w Integracjach

W lewym dolnym rogu wizualnego edytora kliknij “Integracje”:

Znajdź zakładkę “Systemowe” (tam na dole):

I tam znajdź moduł “GC - Wygląd kafelka produktu na liście produktów”:

Generalnie w “Integracjach” tutaj masz same mięso i najbardziej zaawansowane moduły (te z dopiskiem GC oczywiście). Tutaj obchodzimy limity, bo dzięki tym ustawieniom panujesz nie tylko nad punktowo Bestsellerami, potem Nowościami etc tylko od razu masz moc sprawczą globalnie: nad kafelkiem produktowym.

Jeśli masz równe zdjęcia to możesz to odznaczyć, jak masz integracje z hurtownią lub miszmasz krzywych zdjęć to polecam zostawić włączone, ewentualnie przełączyć się z widoku kwadrat / pionowe:

Niżej masz super opcje - Nowoczesne szare tło. Jeśli masz zdjęcia nudne → czyli na samych kafelkach produktowych dużo się nie dzieje, to polecam Ci to włączyć. Jeśli z kolei masz pstrokate produkty, jakieś takie mega kolorystyczne to te szare tło szaleństwa nie robi, wtedy wyłącz.

Moje ustawienia tutaj tak wyglądają:

No i teraz niżej masz ustawienia co do przycisków, tych Kup Teraz, Zobacz więcej, Powiadom o dostępności.

ZŁOTA ZASADA jest taka, że jak jedno klikasz sobie by zastąpić, np aktywujesz o to:

TO WSZYSTKIE INNE TAKIE ZASTĄPIENIA DLA INNYCH PRZYCISKÓW TEŻ MUSISZ AKTYWOWAĆ:

Ja miałem bałagan więc ten co drugi - odpowiadający za widok na komputerze - wszystkie te ODZNACZAM, zostawiam tylko mobile i tak to wygląda, tak to zostawiam mobile - TAK, desktop nie chcę.

Dla zaawansowanych: kodowanie punktowe dla stylu 😎

Jeśli jesteś migrantem z szablonu Modern 3.0 RWD to pewnie kojarzysz poradniki dla zaawansowanych. Tu też takie będą! Jeśli nie czujesz się na siłach to leć dalej, to ekstras, bonus i coś absolutnie opcjonalnego do wykonania.

W starym szablonie miałem u siebie kilka unikalnych opcji i te chciałbym też i tu przenieść.

Podaję Ci od razu kod do skopiowania:

span.gc__cta-button-text {
    background-image: linear-gradient(90deg, #05b6ff 0%, #a144ff 87%);
    caret-color: #000;
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

Wklejasz tutaj i zapisujesz:

Tak to finalnie zostawiam, kod daje nam ładny gradient w linku: