Valikko

Shopin mukautus omalla HTML/CSS:llä

TVoit lisätä omia kuvia, tekstejä, linkkejä ja muita HTML-elementtejä.

Oman HTML/CSS:n hyödyntämiseksi shopissasi käytössäsi on kohdassa Shop-asetukset > Spreadshop > Laajennetut > kolme syöttökenttää (Huomaa: Valikon kohta "SpreadShop" on vain niiden käyttäjien nähtävissä, jotka ovat avanneet Spreadshirt-tilinsä ennen 30.9.2015):

  • Shopin ylätunniste
  • Shopin alatunniste
  • CSS stylesheet

Ylätunniste-/alatunniste-riville voit vapaasti syöttää HTML:ää. Varmistaaksemme shoppisi toimivuuden tarkistamme HTML:n. Osoitteessa https://validator.w3.org/#validate_by_input voit itsekin tarkastaa, toimiiko HTML:si. Ota huomioon, että turvallisuussyistä JavaScriptiä ei voida käyttää ja että joudumme tarvittaessa poistamaan sen.

Seuraavassa esitetään valikoima määritettäviä CSS-luokkia, joista voi olla hyötyä shopissasi. Niiden tarkoitus on auttaa sinua shoppisi suunnittelussa. Voit tietenkin muokata muitakin luokkia.

Mitä haluaisit muokata? CSS-luokka
Taustakuva tai -väri .customPageBackground
Ylätunniste .customHeader
Alatunniste, jossa mediatiedot ja yleiset myynti- ja toimitusehdot .customFooter
Laskuri ostoskorissa ja toivelistassa .customCounter
Huomaa .customNotification
Virheilmoitukset .customNotification.sprd-error
Otsikot, esim. ostoskorissa .customHeadline
Valinnaiset ominaisuudet (koko, väri) .customSelector
Valinnaisista ominaisuuksista valittu vaihtoehto .customSelector .sprd-active.sprd-item
Kategoriavalikoima (ei-kannettava) .customFilterItem, .customSubfilterItem
Hover-tehoste kategoriavalikoimassa (ei-kannettavissa) .customSubfilterItem:hover
Vain älypuhelimet, ei tabletit tai pöytätietokoneet @media screen and (max-width: 767px) .customSelector.sprd-open
Eri painikkeet .customButton
Vakiopainikkeet .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Tärkeät painikkeet kuten esim. ”Osta” .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Toissijaiset painikkeet kuten ”Ostoskoriin” (toivelistassa) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Hakukenttä kannettavissa laitteissa, dropdown-valikot pöytätietokoneissa .customFilter
Animoidut kuvat latausnäytössä .sprd-loadable.sprd-loading, .sprd-loader

Oliko tästä artikkelista apua?