Jos sinulla on verkkokauppa upotettuna HTML-komentosarjaan ja haluaisit lisätä siihen tyylejä, suosittelemme CSS-tyylisivun lisäämistä verkkolevytilaan. Sen avulla voit muuttaa fonttityylejä, värejä ja muita asioita.
Voit ladata CSS-tiedoston kauppasivultasi verkkokaupan hallintapaneelissa. Jos sinulla on jo CSS-tiedosto, voit valita tyylit alla ja lisätä ne olemassa olevaan tiedostoosi.
Mihin CSS-tiedosto tulisi sijoittaa?
Suosittelemme, että sijoitat CSS-tiedoston samaan kansioon kuin missä verkkokauppasi sisältävä HTML-tiedosto sijaitsee. HTML-tiedostoon sinun on lisättävä linkki CSS-tiedostoon.
CSS-tiedostoon johtavan linkin tulisi näyttää tältä:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css" />
Vaihda shopfront-embed-style.css CSS-tiedostosi nimeksi, jos olet nimennyt tiedoston uudelleen. Sinun tulisi sijoittaa linkki suoraan head-tag-tunnisteen jälkeen ennen sulkevaa /head-tag-tunnistetta.
Tyyliparametrit
Voit muuttaa seuraavia parametreja:
- Fonttiperhe
- Fontin väri
- Täyttöväri
- Avattavat valikot
- Reunat
- Kohdistuksen värit
- Markkinointimerkintä
- Verkkokauppa mobiilinäkymässä
Fonttiperhe
Fonttiperheen avulla voit muuttaa verkkokaupassasi käytettävää pääfonttia. Ensimmäinen fontti on näytettävä fontti. Kaksi muuta fonttia ovat varafontteja, jos ensimmäistä fonttia ei voida noutaa.
Esimerkki:
font-family: "Times New Roman",Times,serif;
Fontin väri
Oletuksena fontin väriksi on asetettu sama väri teksteille, linkeille, osoittimen alla oleville linkeille ja muille objekteille. Jos haluat muuttaa väriä, muuta HEX-koodia.
Jos haluat määrittää muista eroavan värin, esimerkiksi tilanteeseen, jossa osoitinta pidetään linkin päällä, erota parametri listasta ja anna sille oma HEX-värikoodi.
Esimerkki:
.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;
}
Täyttöväri
Täyttövärejä käytetään kuvakkeiden taustoihin kaupassa. Värejä voi muuttaa alla ilmoitettujen asetusten avulla.
SVG-kuvakeväri
Täyttöväriä käytetään verkkokaupan SVG-kuvakkeisiin, esimerkiksi ostoskärrykuvakkeeseen. Voit muuttaa väriä muuttamalla HEX-koodia.
Esimerkki:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
Taustaväri (verkkokauppa)
Tällä asetuksella määritetään koko verkkokaupan taustaväri. Voit muuttaa väriä muuttamalla HEX-koodia.
Esimerkki:
.onecom-webshop-main {
background-color: #fdfdfd
}
Avattavat valikot
Kategorian valinta ja tuotteiden lajittelu toimivat avattavina valikoina. Voit muokata avattavien valikoiden värejä.
Taustaväri (avattava valikko)
Tämä määrittää avattavan valikon taustavärin. Vaihda HEX-koodi haluamaksesi.
Esimerkki:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Reunan väri (avattava valikko)
Tässä valittu väri määrittää avattavan valikon reunan värin. Vaihda HEX- ja RGBA-koodit haluamiksesi värikoodeiksi.
Esimerkki:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Tekstin väri (avattava valikko)
Tämä asetus määrittää avattavissa valikoissa käytetyn tekstin värin. Voit vaihtaa väriä muuttamalla HEX-värikoodia.
Esimerkki:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
Valittu arvo (avattava)
Tämä asetus määrittää avattavassa valikossa valittujen kohteiden tekstivärin. Voit muuttaa väriä muuttamalla HEX-värikoodia.
Esimerkki:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Valintaväri (avattava valikko)
Alla olevat kaksi asetusta määrittävät fonttivärin ja taustavärin sille kohteelle, jonka päällä osoitinta pidetään. Vaihda HEX- ja RGBA-koodit haluamiksesi värikoodeiksi.
Esimerkki:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Reunat
Takaisin-painikkeen reunan väri
Tämä asetus määrittää Takaisin-painikkeen reunan värin. Kyse on "palaa kauppaan" -painikkeesta kassalla käydessä. Vaihda HEX-koodi haluamaksesi väriksi.
Esimerkki:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Tilaustietojen ympärillä käytettävä reuna
Kassalla näkyy ruutu, joka sisältää yleiskuvan ostettavista tuotteista. Tämän asetuksen avulla voit vaihtaa kyseisen ruudun reunan väriä. Vaihda RGBA-väri haluamaksesi. Ruudussa olevan tekstin väri on aina musta.
Esimerkki:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Otsikon reuna
Tämän asetuksen avulla voit muuttaa otsikoiden alleviivauksen väriä, esimerkiksi kassasivulla. Vaihda HEX-väri haluamaksesi.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Alareuna
Tällä asetuksella on mahdollista asettaa viiva kohteiden alapuolelle kassasivulla. Muuta vain HEX-väri haluamaksesi.
Esimerkki:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Kohdistuksen värit
Kohdistuksen värejä käytetään hintoihin, ostoskärrykuvakkeeseen ja mobiililaitteiden säätimiin. Vaihda HEX-väri haluamaksesi.
Esimerkki:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Kohdistuksen väri, kun osoitinta pidetään kohteen yllä
Kyse on samoista asetuksista kuin yllä, mutta silloin, kun osoitinta pidetään kohteen yllä. Vaihda RGBA-värit väriksi, jonka haluat näkyvän, kun osoitinta pidetään kohteen yllä.
Esimerkki:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Markkinointimerkintä
Tämän asetuksen kautta voit määrittää markkinointimerkinnän tekstin ja taustan värin. Voi lisätä markkinointimerkinnän tuotteeseen, niin että se erottuu paremmin muista tuotteista. Voit myös tutustua tuotteiden markkinointioppaaseen.
Esimerkki:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Verkkokauppa mobiilinäkymässä
Jos haluat muokata verkkokaupan ulkoasua mobiililaitteissa, voit lisätä "viewport" meta-kuvauksen verkkokauppasi HTML-tiedoston ylätunnisteeseen.
Jos emme havaitse meta-kuvausta, lisäämme automaattiseseti seuraavan meta-kuvauksen parhaan mahdollisen mobiilikokemuksen luomiseksi:
meta name="viewport" content="width=320, initial-scale=1"
Aiheeseen liittyvät artikkelit:
