Logo

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.

  1. 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;
    }

  2. 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;
}

Porada eksperta

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);
}

Porada eksperta


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;
}
}

Wskazówka

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:

Nie znalazłeś odpowiedzi na pytanie?Skontaktuj się z Działem Wsparcia

Przejdź do Biura Obsługi Klienta i skontaktuj się z ekspertami IdoSell