Modyfikacja szablonu sklepu
Narzędzie Composer umożliwia samodzielną modyfikację szablonów sklepu. Poniżej znajdziesz opis kilku prostych zmian, które możesz wprowadzić samodzielnie korzystając z narzędzia Composer lub dodając kod CSS.
Modyfikacja kodu CSS
Kod CSS dodasz w sekcji MODERACJA > Wygląd sklepu > Zarządzanie szablonami stron > przy szablonie sklepu kliknij
Dostosuj
> Edycja CSS
Poniższy kod wprowadź w pole CUSTOM.CSS
, które zaznaczone jest na poniższym zrzucie ekranu i zapisz zmiany.
Ukrycie informacji o ilości sztuk na karcie towaru
Informacja o ilości sztuk towarów, jest widoczna na karcie towaru w dwóch miejscach. Ilość sztuk widoczna przy wyborze ilości oraz w miejscu informującym o dostępności towaru.
Aby te informacje nie była widoczna dla klientów, jest możliwość ukrycia ich za pomocą kodu CSS.
Instrukcję edycji kodu znajdziesz na początku strony.
Ukrycie informacji o ilości sztuk w magazynie przy wyborze ilości produktów
w polu custom.CSS wprowadź kod:
.projector_buy__number_amounts {
display: none !important;
}Ukrycie informacji o ilości sztuk na magazynie przy informacji o dostępności
W polu Custom.CSS wprowadź kod:
#projector_amount {
display: none !important;
}
Efekt zastosowania powyższych kodów widoczny jest na załączniku poniżej. Informacja o ilości sztuk w magazynie została ukryta.
Zmiana koloru węzła menu
W celu zmiany koloru pojedynczego węzła menu na stronie sklepu, zastosuj poniższy kod w custom.CSS. Instrukcję edycji kodu znajdziesz na początku strony.
Aby zmienić kolor pojedynczego węzła menu, należy w poniższym kodzie pomiędzy nawiasami kwadratowymi wpisać dokładnie odwzorowaną nazwę węzła - uwzględniając duże i małe litery.
[title="Elektronika"] {
color: #238FA7;
}
Jako kolor, warto umieścić nazwę w heksach. Należy ją wpisać włącznie ze znakiem #, zgodnie z powyższym kodem.
Efekt zastosowania kodu widoczny jest na zrzucie poniżej, węzeł o nazwie elektronika zmienił kolor.
Jeśli kolor węzła menu ma zmieniać dodatkowo kolor po najechaniu na niego kursorem, pod powyższym kodem zastosuj kolejny:
[title="Elektronika"]:hover {
color: #E83447;
}
W parametrze kolor wskaż inną wartość niż poprzednio.
Custom.CSS, który zmieni kolor węzła menu po najechaniu na niego kursorem powienien wyglądać jak na zrzucie poniżej:
Efekt zastosowania powyższych kodów możesz zaobserwować na poniższym nagraniu. Węzeł Elektronika zmienia kolor po najechaniu kursorem:
Ukrycie mapy na stronie kontaktu
W każdym sklepie generowania automatycznie jest podstrona z danymi kontaktowymi sklepu.
Standardowo na podstronie /contact.html
wyświetlana jest mapa z adresem firmy.
Instrukcję edycji kodu CSS znajdziesz na początku strony.
W Custom.CSS wprowadź poniższy kod w celu ukrycia mapy:
#contact_map {
display: none !important;
}
Zmiana wielkości i stylu liter w menu
Szablony sklepów, mają zdefiniowane litery, które widoczne są jako drukowane lub pisane, bez względu na sposób w jaki wpiszemy je tworząc węzły menu w panelu.
Aby móc samodzielnie wpływać na wielkość liter, można użyć do tego kodu CSS.
Instrukcję edycji kodu CSS znajdziesz na początku strony.
Litery jednakowej wielkości
Jeśli wszystkie węzły menu, miałyby wyświetlać wielkie litery, niezależnie od nazwy węzła menu w panelu, należy użyć poniższego kodu:
.nav-link {
text-transform: uppercase !important;
}
Efekt widoczny końcowy widoczny jest na zrzucie poniżej:
Wielkość liter zgodna z nazwą w panelu
Jeśli natomiast, wielkość liter ma być odwzorowaniem wielkości liter znajdujących się w MODERACJA > Menu i podstrony opisowe w masce
, należy użyć poniższego kodu:
.nav-link {
text-transform: none !important;
}
Oznacza to, że tworząc w panelu węzeł menu o nazwie: "ZEgarki", na stronie sklepu pojawi się on w takiej samej formie, czyli "ZEgarki". Efekt ten widoczny jest na poniższym zrzucie:
Przybliżenie ikony towaru po najechaniu kursorem
Uzyskanie efektu, zoomu / powiększenia grafiki, po najechaniu na nie myszką - jest często stosowane w celu zwrócenia uwagi klienta, na element chwilę przez jego kliknięciem.
Instrukcję edycji kodu CSS znajdziesz na początku strony.
Aby uzyskać efekt przybliżenia grafiki, można skorzystać z poniższego kodu CSS:
.product > a img {
transition: all .3s ease-in-out !important;
}
.product:hover > a img {
transform: scale(1.05);
}
Wartość informująca o .3s oraz (1.05), jest możliwa do edycji w celu dostosowania efektu. Nie zaleca się jednak, ustawienia zbyt gwałtownych efektów przybliżenia, ponieważ zamiast zwrócenia uwagi na dany element, mogą spowodować niespójność strony.
Efekt powyższego kodu widoczny na filmie.
Ukrycie informacji "W zestawie / w kolejkcji" na karcie towaru
Po dodaniu towaru do zestawu, lub kolekcji - na karcie towaru pojawia się informacja / treść "W zestawie", lub "W kolekcji".
Instrukcję edycji kodu CSS znajdziesz na początku strony.
Wskazany tekst można ukryć, za pomocą kodu CSS.
h2.projector_bundle__label {
display: none !important;
}
Efekt powyższego kodu, widoczny jest na zrzucie poniżej:
Powiększenie ikony towaru w grupie
Grupując towary, mamy możliwość nadania indywidualnej grafiki dla każdego z wariantów. W sekcji "zdjęcia i ikony", odpowiada za to "zdjęcie dla towaru w grupie" . Ułatwia to wizualny wybór towaru dla klienta.
Jeśli chciałbyś, powiększyć grafikę rozróżniająca, na karcie towaru w sklepie w formie kafelek jak i rozwijanej listy, zastosuj poniższe kody w custom.CSS
Instrukcję edycji kodu CSS znajdziesz na początku strony.
Powiększenie grafiki dla wariantów w formie kafelków dla wersji desktopowej
@media (min-width: 757px) {
.projector_details .projector_versions__gfx img {
width: 90px;
}
}
Wartość 90px, może być dowolnie modyfikowana. Należy pamiętać jednak, aby była interpretowana przez kod CSS, z tego powodu rekomendowana wartość we wskazanym miejscu powinna być określana za pomocą wartości "px".
Efekt po zastosowaniu kodu widoczny jest na poniższym zrzucie:
Powiększenie grafiki dla wariantów w formie listy dla wersji desktopowej
Zastosuj poniższy kod w celu powiększenia grafik, dla wariantów prezentowanych w formie listy:
@media (min-width: 757px) {
.gfx_wrapper > picture > img {
max-width: 90px !important;
}
}
Podobnie jak wcześniej - wartość 90px, może być dowolnie modyfikowana.
Efekt powyższego kodu, widoczny jest na zrzucie poniżej: