Tyylit ja osat

Tyyli on koko kaupan suunnittelukieli.

Missä: + New variant suunnittelutyökalun varianttivalikossa ja suunnittelutyökalun välilehti Theme.

#Kolme kerrosta

#Valitse tyyli

Valitset tyylin, kun teet suunnittelutyökalussa uuden variantin.

1. Avaa varianttivalikko ja paina + New variant.
2. Kirjoita nimi kohtaan Name.
3. Valitse kohdassa Start from A style ja sitten tyyli. Omien tyyliesi nimen perässä on · yours.
4. Paina Create variant.

Variantti saa tyylin ulkoasun ja pohjat Collection pages, Product page ja Text pages. Etusivu ja omat sivusi ovat sellaisia kuin asiakkaat ne näkevät.

Kokeile tyyliä uudessa variantissa. Kauppa ei muutu ennen kuin julkaiset variantin. Tyylin pohjissa on esimerkkiteksti kaupan kielellä: ruotsiksi, kun kaupan kieli on ruotsi, muuten englanniksi.

#Vaihda tyyli myöhemmin

Variantti pitää tyylin, jolla se tehtiin. Jos haluat toisen tyylin tai jonkin omista tyyleistäsi, tee siitä uusi variantti painikkeella + New variant. Kauppa ei muutu ennen kuin julkaiset uuden variantin.

Variantti kopioi tyylin, kun variantti tehdään. Myöhemmät tyylin muutokset tulevat varianttiin vasta, kun painat painiketta, jossa lukee Reset to ja tyylin nimi, esimerkiksi Reset to Bold. Painike on kohdassa Style of this variant suunnittelutyökalun välilehdellä Theme. Se hakee sisäänrakennetun tyylin, ei koskaan tallentamaasi tyyliä, ja pyytää ensin vahvistuksen.

Väreihin ja osiin tekemäsi muutokset katoavat. ⌘Z palauttaa ne.

#Osien valinnat

Tyyli määrää, mitä ulkoasuja ja valintoja kullakin osalla on. Komponenttikohtainen lista on sivulla Komponentit yksitellen.

Valinnat asetat komponenttipaneelin kohdissa Look ja Options, katso Komponenttipaneeli. Jos komponentilla on tallennettu tyyli, valinta kirjoitetaan tyyliin, muuten varianttiin. Paneeli näyttää aina arvon, jota kauppa käyttää.

#Väripisteet varianteille

Variantin valinta nimeltä Color, Colour tai Färg näytetään väripisteinä. Jokaisen arvon on oltava luettavissa väriksi, esimerkiksi black, red, grön tai #E30613. Muut valinnat näytetään painikkeina.

#Muoto ja värit komponentissa

Komponenttipaneelin kohdan Options alla ovat lohkot Shape ja Colours. Ne näyttävät variantin tokenit, joita komponentti käyttää. Koodieditorissa lohkoja ei ole. Tallennettu komponenttityyli ei koskaan sisällä muotoa eikä teeman värejä.

Shape sisältää kulmien sirut. Näkyvät sirut riippuvat komponentista:

Sirujen alla oleva rivi kertoo, missä arvoa käytetään:

• Photo corners: kaikki tuotekuvat ja kategoriaruudut ilman kuvaa.
• Thumbnail corners: pikkukuvat ja sivun osioiden kulmat.
• Button corners: kaikki kaupan painikkeet.

Classicin kuvakulmat ovat 14 px ja Boutiquen 20 px. Jos tyylillä on arvo, joka ei ole askel, se saa oman sirun, jonka nimenä on luku. Se siru on painettuna koskemattomassa variantissa. Jos variantilla on muu arvo, asetettuna kohdassa More tokens, mikään siru ei ole painettuna ja rivi näyttää luvun. Tyylistä poikkeava arvo saa painikkeen reset.

Colours näyttää teeman värit, joita komponentti käyttää:

Huom: Kohdan Colours värit ovat variantin värejä. Muutos tässä muuttaa värin kaikkialla, missä sitä käytetään. Vain komponenttia koskevat värit asetat koodieditorin välilehdellä Design.

#Tokenit välilehdellä Theme

Suunnittelutyökalun välilehti Theme muuttaa variantin tokeneita vaihtamatta tyyliä.

Koskemattomat otsikkovalinnat seuraavat tyyliä, ja rivi näyttää Style default. Oma arvo saa painikkeen reset, joka palauttaa tyylin valinnan.

#Tallenna omaksi tyyliksi

Oma tyyli tallentaa variantin tyylin, valinnat, värit, fontit, logon ja teeman CSS:n sekä kolmen pohjan osiot.

1. Avaa suunnittelutyökalun välilehti Theme.
2. Paina + Save current as my style kohdassa Your styles.
3. Kirjoita nimi ja tallenna. Nimi ei saa olla jo kohdassa Your styles.

Tyyli tallentaa kaikkien osien valinnat, ei vain muuttamiasi. Se tallentaa myös osiot pohjista Collection pages, Product page ja Text pages, katso Sivupohjat. Home ja omat sivusi eivät tallennu sen mukana. Tyylistä tehty uusi variantti alkaa niillä osioilla. Tyyli näkyy kaikissa workspacen kaupoissa: suunnittelutyökalun kohdassa Your styles ja kohdassa + New variant.

Tallenna oma tyyli uudelleen variantin ulkoasulla:

1. Avaa variantti suunnittelutyökalussa ja välilehti Theme.
2. Paina tyylin kohdalla Update kohdassa Your styles.
3. Paina ruudussa Update.

Tyyli saa variantin ulkoasun ja säilyttää nimensä. Avoinna oleva variantti ei muutu, ja tyylistä jo tehdyt variantit säilyttävät ulkoasunsa. Tyylin vanhaa versiota ei säilytetä.

Poista oma tyyli:

1. Paina tyylin vieressä olevaa ruksia.
2. Paina Continue.
3. Kirjoita tyylin nimi.
4. Paina Delete.

Tyyli katoaa kaikista workspacen kaupoista. Sitä käyttävät kaupat säilyttävät ulkoasunsa, koska niillä on oma kopio.

#Your styles ja Your header styles

Molemmat listat kuuluvat workspacelle ja näkyvät kaikissa kaupoissa. Listasta poistettu tyyli ei muuta kauppaa, joka jo käyttää sitä.