Jeżeli sklep internetowy jest osadzony w Twoim kodzie HTML i chcesz zastosować w nim style, zalecamy dodanie arkusza styli CSS do swojej przestrzeni Web. Arkusz umożliwia zmianę stylów czcionek, kolorów itp.
Plik CSS możesz pobrać ze strony Witryna w panelu administracyjnym sklepu. Jeżeli już korzystasz z pliku CSS, możesz wybrać style i dodać je do istniejącego pliku.
Gdzie należy umieścić plik CSS?
Zalecamy umieszczenie pliku CSS w tym samym folderze, w jakim znajduje się plik HTML sklepu internetowego. W pliku HTML należy umieścić link do pliku CSS.
Link do CSS powinnien wyglądać tak:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css" />
Zastąp shopfront-embed-style.css nazwą Twojego pliku CSS, jeżeli jego nazwa została zmieniona. Łącze należy umieścić za tagiem head-tag i przed zamykającym tagiem /head-tag.
Parametry stylów
Możesz zmieniać następujące parametry:
- Rodzina czcionek
- Kolor czcionki
- Kolor wypełnienia
- Rozwijane menu
- Obramowania
- Kolory zaznaczenia
- Etykieta promocji
- Sklep w widoku mobilnym
Rodzina czcionek
W ustawieniu rodziny czcionek możesz zmienić główną czcionkę, jaka jest używana w sklepie internetowym. Pierwsza czcionka to czcionka wyświetlana. Kolejne dwie to czcionki zapasowe używane w przypadku braku dostępu do głównej czcionki.
Przykład:
font-family: "Times New Roman",Times,serif;
Kolor czcionki
Domyślnie kolor czcionki jest taki sam jak kolor tekstu, odnośników, oznaczeń itp. Jeżeli chcesz zmienić kolor, wystarczy zmienić kod HEX.
Jeżeli chcesz ustawić inny kolor, np. zaznaczenia po najechaniu kursorem na link, oddziel parametr od listy i nadaj mu własny kod koloru HEX.
Przykład:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Kolor wypełnienia
Kolory wypełnienia stosowane są w tłach ikon w całym sklepie. Kolory możesz zmieniać, korzystając z poniższych ustawień.
Kolor ikony SVG
Kolor wypełnienia zostanie zastosowany do ikon SVG w sklepie internetowym, np. ikony koszyka. Możesz zmienić ten kolor, zmieniając kod HEX.
Przykład:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Kolor tła (sklep internetowy)
To ustawienie zmienia kolor tła w całym sklepie. Kolor możesz zmienić przez zmianę kodu HEX.
Przykład:
.onecom-webshop-main {
background-color: #fdfdfd
}
Rozwijane menu
Wybór kategorii oraz sortowanie produktów odbywają się w rozwijanych menu. Możesz dostosować kolory rozwijanych menu.
Kolor tła (rozwijane menu)
To ustawienie określa kolor tła rozwijanego menu. Po prostu użyj wybranego kodu HEX.
Przykład:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Kolor obramowania (rozwijane menu)
Wybrany kolor określa kolor obramowania rozwijanego menu. Po prostu wybierz kody HEX i RGBA odpowiadające preferowanym kolorom.
Przykład:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Kolor tekstu (rozwijane menu)
Te ustawienia określają kolor tekstu użytego w menu rozwijanych. Kolor możesz zmienić przez modyfikację kodu koloru HEX.
Przykład:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Wybrana wartość (lista rozwijana)
To ustawienie określa kolor wybranych elementów listy rozwijanej. Kolor możesz zmienić przez zmianę kodu HEX.
Przykład:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Kolor po najechaniu kursorem (rozwijane menu)
Poniższe dwa ustawienia określają kolor czcionki oraz kolor tła po najehacniu kursorem. Po prostu wybierz kody HEX i RGBA odpowiadające preferowanym kolorom.
Przykład:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Obramowania
Kolor obramowania przycisku Wstecz
Te ustawienia określają kolor obramowania przycisku Wstecz, przycisku „powrót do sklepu” oraz przejścia do rozliczenia. Wybierz kod HEX odpowiadający preferowanemu kolorowi.
Przykład:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Obramowanie wokół szczegółów zamówienia
Podczas procesu rozliczenia widać pole zawierające podsumowanie kupowanych pozycji. Za pomocą tego ustawienia możesz zmienić kolor obramowania tego pola. Po prostu wybierz kod RGBA odpowiadający preferowanemu kolorowi. Tekst w polu jest zawsze czarny.
Przykład:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Obramowanie nagłówka
To ustawienie pozwala zmienić kolor podkreślenia nagłówków, np. strony rozliczenia. Po prostu wybierz kod HEX odpowiadający preferowanemu kolorowi.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Dolne obramowanie
To ustawienie odpowiada za umieszczenie linii pod elementami na stronie rozliczeń. Kolor możesz zmienić przez zmianę kodu HEX.
Przykład:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Kolory zaznaczenia
Kolory zaznaczenia są używane dla cen, ikony koszyka oraz suwaków w wersji mobilnej. Po prostu wybierz kod HEX odpowiadający preferowanemu kolorowi.
Przykład:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Kolory zaznaczenia po najechaniu kursorem
Są to te same ustawienia, co powyżej, jednak przy najechaniu kursorem myszy. Wybierz kod RGBA odpowiadający preferowanemu kolorowi.
Przykład:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Etykieta promocji
To ustawienia określa kolor tekstu i tła etykiety promocji. Etykietę możesz dodać do produktu, który ma zostać wyróżniony. Zapoznaj się z naszympodręcznikiem promowania produktów.
Przykład:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Sklep w widoku mobilnym
Jeżeli chcesz zmienić wygląd Twojego sklepu na urządzeniach przenośnych, możesz dodać swój własny meta tag "viewport" do nagłówka (sekcja "head") w pliku HTML sklepu.
W przypadku gdy nie wykryjemy tego nagłówka, automatycznie go dodamy aby zapewnić idealny wygląd na urządzaniach przenośnych.
meta name="viewport" content="width=320, initial-scale=1"
Powiązane artykuły: