Dzisiejszy wpis poświęcimy edycji graficznej nowych ciasteczek na Shoperze.
Shoper poszedł z duchem czasu. Wzorując się na nowych standardach wytyczonych przez większych graczy, teraz także i my - posiadacze sklepu na Shoperze - jesteśmy w stanie udostępnić klientom funkcję wybiórczych ciasteczek.
Jest to jednocześnie plus i minus, jak w każdej sytuacji. Z jednej strony super - pozwalamy klientom, aby sami decydowali o tym w jakim zakresie ich "śledzimy", ale z drugiej strony ucinamy sobie drogę do późniejszego remarketingu czy wystawianiu reklam na podobnych odbiorców - bo po prostu nie mamy danych, gdy klient mówi stanowcze "NIE!".
Kwestię oceny przydatności tego nowego feature zostawiam Wam. Z rzeczy, których mi brakuje w tym nowym dodatku, to trzeci przycisk: "Zaakceptuj minimalne". Klient, gdy ma już wybór, może zaakceptować minimalne ciasteczka jednym kliknięciem i zapomnieć o tym, bez wchodzenia do naszego zaawansowanego konfiguratora.
Nasze nowe zaawansowane ciasteczka włączycie wchodząc na www.TwójSklep.pl/admin/configCookies
TwójSklep.pl to domena Twojego sklepu.
Jeśli wolisz manualnie nawigować do miejsca ustawień to wybierz z menu po lewej stronie Wygląd i treści -> Ustawienia cookies.
Panel ustawień daje nam możliwość zmiany treści wyświetlanego tekstu i my z tej opcji skwapliwie skorzystaliśmy. Lubimy swobodę w komunikacji z naszymi klientami, pozwala ona na sprawny przepływ informacji i klarowne przekazanie tego co oczekuje klient.
Po szybkiej konfiguracji treści i przeklikaniu całości ukaże nam się na sklepie nowy komunikat z ciasteczkami i wyborem zakresu ciasteczek. Jeśli nie widzisz zmian, otwórz sklep w nowym oknie incognito (Na klawiaturze CTRL + SHIFT + N). 
W razie zainteresowania samą konfiguracją nowych ciasteczek, napiszemy osobny artykuł. Jeśli sądzisz, że jest Ci potrzebny, daj nam znać w komentarzu :).
Wygląd nowego komunikatu ciasteczek
Podstawowy szablon sklepu jest... podstawowy. Tak samo jest z nowym widokiem ciasteczek - jego jedyną wadą jest jego podstawowość, jakkolwiek to brzmi. Na szczęście w kilka minut możemy go ciekawie odmienić.
Co zmienimy? Do głowy po kolei wpadł mi: kolor tła, rozmycie tła, ułożenie przycisków, zmniejszenie "wagi" komunikatu na ekranie. Nie będę Was męczył puzzlami, jak to po kolei wklejać, tylko podrzucę pełen kod z informacją gdzie wkleić, a potem rozłożę go na części pierwsze, żebyście mogli zedytować sobie kolory pod własne barwy sklepu.
Jeśli kogoś usatysfakcjonuje wynik po samym wklejeniu kodu - śmiało można skończyć czytać w tym miejscu. Jeśli chcesz trochę więcej pozmieniać - zostań z nami do końca.
Wejście w edycję CSS w Twoim szablonie zawsze przebiega tak samo. UWAGA! ZAWSZE, ale to zawsze! Zrób kopię zapasową przed edycją. Dzięki temu nawet jak cały sklep uszkodzisz - będzie punkt, do którego będzie można wrócić.
Po kolei, z menu po lewej stronie wybieramy Wygląd i treści -> Wygląd sklepu -> Twoje szablony graficzne.
Znajdź obecnie aktywny szablon, najedź na kafelek przedstawiający szablon i znajdź ikonę dwóch kwadratów. Po najechaniu są podpisane jako "Duplikuj".
Edycja kodu CSS w Shoperze
Po włączeniu do życia swojej kopii zapasowej wybierz w prawym górnym rogu Więcej -> Edytor HTML / CSS.
W nowo otwartym widoku edytora znajdź po lewej Styles -> i na samym dole User.css
Zjedź na sam dół kodu (jeśli jakikolwiek w środku posiadasz), dodaj na końcu za ostatnim znakiem kilka enterów, żeby zrobić sobie miejsce i wklej nasz kod.
body > div.consents > div.consents__wrapper {
width: 60%;
margin: 30px;
}
.consents__modal {
background-color: #02072ebf;
color: #fff;
border-radius: 4px;
padding: 1rem;
backdrop-filter: blur(6px);
}
div.consents__advanced-buttons > button,
div.consents__buttons > button {
text-transform: capitalize;
}
div.consents__advanced-buttons > button.js__save-consents,
div.consents__buttons > button.js__accept-all-consents {
background: #757ae7;
border: 1px solid #757ae7;
}
div.consents__consent-description p a,
div.consents__content p a.consents__link{
color: #757ae7;
}
div.consents__advanced-buttons > button.js__save-consents:hover,
div.consents__buttons>button.js__accept-all-consents:hover {
background:#1b30b2;
}
.consents__basic-view {
flex-wrap: wrap;
}
.consents__content{
margin-bottom: 1rem;
}
.consents__buttons {
margin: 0 auto;
}
.consents_popup .consents__modal{
max-width: 90vw;
}
@media all and (max-width:767px){
body>div.consents>div.consents__wrapper {
width: 90%;
bottom: 15px;
margin: 0 auto;
}
}
Powyższy filmik z pewnością pozwoli nawet laikowi na edycję swoich ciasteczek. W środku naszego kodu mamy kilka zmiennych, które może zechcesz zmienić.
#757ae7 - czyli nasz kolor fioletowy, odpowiadający za kolor linków i przycisków. Sugerujemy Twój motyw przewodni. Twój kolor główny w logo to żółty? Tu właśnie jest miejsce na jego uzupełnienie.
#1b30b2 - to kolor przycisku po najechaniu. Sugerujemy ciemniejszy odcień głównego koloru, dla miłej dla oka animacji.
#02072ebf - to półprzezroczysty kolor tła całego okienka. Dobierz go odpowiednio, aby treści były dobrze widoczne.
Zmiana kolorów wymaga więcej inwencji twórczej i odrobinę "grzebania" w kodzie. Nie zrażaj się, jeśli nie wyjdzie Ci za pierwszym razem. Na poniższym filmiku pokazujemy jak wizualnie zmienić sobie taki kolor, potem tylko podmieniasz go w odpowiedniej linijce w kodzie CSS. Ja używam "wyszukiwarki" na górze edytora, żeby ułatwić sobie życie.
Adekwatnie jesteście w stanie podmienić każdy inny kolor w naszym nowym komunikacie. Jeśli jakieś treści nie będą dla Ciebie jasne - zostaw nam informację w komentarzu. Rozbudujemy nasz przewodnik aż do momentu, gdzie dziecko poradzi sobie z tą instalacją :)
Ponownie: informacja zwrotna od Ciebie, jako użytkownika Shopera jest dla nas bardzo ważna. Czy po przeczytaniu tego tutoriala wszystko poszło gładko? Udało Ci się wszystko podmienić? Czy sam poradnik i jego forma podobają Ci się?
Będziemy niezmiernie wdzięczni za każdy feedback w komentarzu lub na [email protected] dzięki temu będziemy mogli dalej rozwijać sekcję zrób to sam, a także wprowadzić niezbędne zmiany.
Mariusz Kwartnik
Kosmos. Dzieki za pomoc!