Szablon Modern™ od GrowCommerce | Szablony Premium na Shoper oraz ClickShop w przystępnej cenie!
517 585 507 Instalacja w kilka godzin

Nowe ciasteczka na Shoperze: Jak je upiększyć?

4

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.

Nowe ciasteczka na sklepie internetowym Shoper | Edycje graficzne skórki darmowe szablony GrowCommerce

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). 

Nowe ciasteczka na sklepie internetowym Shoper | Edycje graficzne skórki darmowe szablony GrowCommerce
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. 

Edytor HTML i CSS w sklepie internetowym Shoper | GrowCommerce

 W nowo otwartym widoku edytora znajdź po lewej Styles -> i na samym dole User.css

User.css edycja plików skórki w Shoperze

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 biuro@growcommerce.pl dzięki temu będziemy mogli dalej rozwijać sekcję zrób to sam, a także wprowadzić niezbędne zmiany.

Komentarze do wpisu (4)

14 września 2021

Nie działa :(

14 września 2021

Błąd był po mojej stronie, przepraszam wszystko ok. Dziękuje

11 listopada 2021

Robię wszystko tak jak jest napisane i nic się nie zmienia : (

7 grudnia 2021

Jak wyżej, jednak działa :D Tylko pytanie u Was wyświetla się polityka prywatności i możecie klikać wszędzie u mnie jak ktoś nie zgodzi się to nie może nic kliknąć ? Jak to zmienić ?

Bestsellery
Szablon Shoper Modern™ | Standard
Szablon Shoper Modern™ | Standard
1 659,99 zł 982,77 zł 1 349,59 zł 799,00 zł
szt.
Szablon Shoper Modern™ | Basic
Szablon Shoper Modern™ | Basic
629,99 zł 490,77 zł 512,19 zł 399,00 zł
szt.
Wymagalny checkbox z regulaminem do Newslettera
Wymagalny checkbox z regulaminem do Newslettera
1,00 zł 0,81 zł
szt.
 Licencja Shoper Platynowy  (12 miesięcy)
Licencja Shoper Platynowy (12 miesięcy)
313,65 zł 255,00 zł
szt.
 Licencja Shoper Złoty (12 miesięcy)
Licencja Shoper Złoty (12 miesięcy)
313,65 zł 255,00 zł
szt.
 Licencja Shoper Diamentowy (12 miesięcy)
Licencja Shoper Diamentowy (12 miesięcy)
313,65 zł 255,00 zł
szt.
Konfiguracja wstępna Sklepu na Shoperze
Konfiguracja wstępna Sklepu na Shoperze
849,99 zł 549,99 zł 691,05 zł 447,15 zł
szt.
do góry

Obsługiwane płatności kartami płatniczymi: Visa, Visa Electron, Maestro, MasterCard, MasterCard Electronic.

Sklep jest w trybie podglądu
Pokaż pełną wersję strony
Sklep internetowy Shoper.pl