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.

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.

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.

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

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:

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

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:

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

Efekt powyższego kodu widoczny na filmie.

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:

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

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:

Mamy możliwość włączenia widoczności kodu EAN towaru na karcie towaru, poprzez dodanie odpowiedniego kodu css. Instrukcję edycji kodu CSS znajdziesz na początku strony.

Kod do wprowadzenia:
".dictionary__param[data-producer_code]{
display: block!important;
}

Kod EAN zostanie pobrany i wyświetlony z pola "Kod producenta w standardzie" z zakładki podstawowe na karcie towaru.

Jednym ze skuteczniejszych sposobów na zwiększenie widoczności promowanych produktów jest nadanie im indywidualnej etykiety, która wskazuje, że dany towar wchodzi w skład oferty np. z okazji Black Friday.

Dla jej stworzenia, można wykorzystać ręczne nadanie etykiety np. Produkt wyróżniony lub Przecena. Jest to możliwe z pozycji karty towaru, lub za pomocą edycji grupowej.

 Ręczne oznaczenie produktu wybraną etykietą

Instrukcja ręcznego oznaczenia towarów wybraną etykietą znajdziesz na dedykowanej podstronie . 

Po nadaniu etykiety, chcąc zmienić jej nazwę należy przejść do słownika literałów w Composerze i zmienić w nim literał.

Instrukcja zmiany literału znajduje się na dedykowanej podstronie.

 Zmiana koloru etykiety

Dodatkowo, jest możliwość zmiany koloru etykiety, jak i koloru jej treści. 

Aby to zrobić, należy skorzystać z kodu CSS:

.--distinguished {

  color: #fff !important;

  background: #000000 !important;

}

 Instrukcję edycji kodu CSS znajdziesz na początku strony.

 Powyższy kod, nadaje w hexach biały kolor treści, oraz czarne tło dla etykiety. Odwołuję się natomiast bezpośrednio do „produktu wyróżnionego”.

 Nadany kolor, może być dowolny - natomiast, dobrą praktyką jest wprowadzenie kodu koloru w wartości HEX.

Aby wygenerować link do listy towarów, oznaczonych zmodyfikowaną wizualnie etykietą „produktu wyróżnionego” należy przejść do MODERACJA > Menu i podstrony opisowe w masce > Strony specjalne, a następnie kliknąć na węzeł menu gdzie widoczny jest adres URL.