Menu

Edycja sklepu za pomocą własnego HTML/CSS

Możesz wstawiać własne obrazy, teksty, linki i inne elementy kodu HTML do swojego sklepu.

W Ustawienia sklepu > Spreadshop > Więcej ustawień > HTML i CSS masz do dyspozycji 3 pola, w których możesz zastosować własny kod HTML lub CSS (Uwaga! Zakładka „SpreadShop” jest widoczna tylko dla tych użytkowników, którzy założyli swoje konto w Spreadshirt przed 30.09.2015 r.):

  • Nagłówek sklepu
  • Stopka sklepu
  • CSS

W nagłówku/stopce możesz wstawić dowolny fragment kodu HTML. Aby upewnić się, że Twój sklep będzie działał bez zarzutu, sprawdzimy wprowadzony przez Ciebie kod HTML. Możesz też zrobić to samodzielnie na stronie https://validator.w3.org/#validate_by_input. Uwaga! Z powodów bezpieczeństwa nie możesz zastosować kodu JavaScript. Jeżeli go użyjesz, będziemy zmuszeni go usunąć.

Poniżej znajdziesz wybrane klasy CSS, które możesz wykorzystać w swoim sklepie. Ułatwią Ci one dostosowanie sklepu do Twoich potrzeb. Oczywiście możesz też zmodyfikować inne klasy:

Co chcesz zmodyfikować? Klasa CSS
Zdjęcie lub kolor tła .customPageBackground
Nagłówek .customHeader
Stopka z Danymi firmy i OWH .customFooter
Licznik artykułów w koszyku i liście zapamiętanych .customCounter
Wskazówki .customNotification
Powiadomienia o błędach .customNotification.sprd-error
Nagłówki w opisach produktów, np. w koszyku .customHeadline
Elementy wyboru (wielkość, kolor) .customSelector
Wybrane opcje elementów wyboru .customSelector .sprd-active.sprd-item
Wybór kategorii (tylko w wersji dla desktopów) .customFilterItem, .customSubfilterItem
Wyświetlenie po najechaniu myszką w wyborze kategorii (tylko w wersji dla desktopów) .customSubfilterItem:hover
Tylko smartfony – nie tablety, nie komputery stacjonarne @media screen and (max-width: 767px) .customSelector.sprd-open
Różne przyciski .customButton
Przyciski standardowe .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Ważne przyciski, np. „Kup teraz” .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Mniej ważne przyciski, np. „Włóż do koszyka” (w liście zapamiętanych) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Pole wyszukiwania w wersji dla urządzeń mobilnych, listy wyboru w wersji dla desktopów .customFilter
Obrazy animowane pojawiające się w trakcie ładowania strony .sprd-loadable.sprd-loading, .sprd-loader

Czy ten artykuł był przydatny?