Szablony Shoper od GrowCommerce
Koszyk
Zamknij
Kontynuuj zakupy ZAMAWIAM
suma: 0,00 zł
Ulubione produkty
Lista ulubionych jest pusta.

Wybierz coś dla siebie z naszej aktualnej oferty lub zaloguj się, aby przywrócić dodane produkty do listy z poprzedniej sesji.

Szukaj
Menu

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

blog GrowCommerce
Cotygodniowa dawka eksperckiej wiedzy na tematy Shoperowe jak i ogólno e-commercowe. W końcu liczy się sprzedaż!

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

Komentarze do wpisu (1)

21 sierpnia 2022

Kosmos. Dzieki za pomoc!

Submit
Bestsellery
Sprawdź nasze najlepsze pozycje do Shopera. Tysiąc zrealizowanych zamówień!
Zobacz więcej
Modern 3.0 od GrowCommerce

Chcesz zbudować lepszy sklep na Shoperze? Zacznij tutaj! 👇

Wykonaj pierwszy krok w celu poznania najbardziej zaawansowanego szablonu Shoper

Czytaj więcej
Modern 3.0 od GrowCommerce
Holder do góry
Szablon Shoper Modern 3.0™ od GrowCommerce
Sklep jest w trybie podglądu
Pokaż pełną wersję strony
Sklep internetowy Shoper.pl