Ulkoasu
Kun olet asentanut Clover Shop® 2023 -verkkokauppaohjelmiston, niin ulkoasu näyttää aluksi samalta kuin demokaupoissamme. Ulkoasua ei ole pakko muokata, mutta verkkokaupan logo on vähintäänkin vaihdettava.
Logon vaihtaminen
- Kirjaudu verkkokaupan hallintaliittymään (demo).
- Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
- Valitse luettelosta "Ulkoasupohja: Verkkokaupan logo suomeksi [KUVA]".
- Klikkaa Kuva-kohdassa olevaa sinistä kuvaketta ja etsi uusi logo tietokoneeltasi.
- Klikkaa Päivitä-painiketta.
- Kopioi kuvan polku ja tiedostonimi tietokoneesi leikepöydälle (Ctrl-C).
- Älä kopioi kuvan tiedostonimeä Kuva-kohdasta vaan kopioi ylempänä näkyvä koko polku ja tiedostonimi. - Valitse luettelosta "Ulkoasupohja: Verkkokaupan logo [HTML]".
- Liitä (Ctrl-V) kuvan polku ja tiedostonimi suomenkielisen img-tagin src-kohtaan.
- Klikkaa Päivitä-painiketta.
- Toista tämä tarvittaessa ruotsin- ja englanninkielille.
Värien vaihtaminen
- Kirjaudu verkkokaupan hallintaliittymään (demo).
- Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
- Valitse luettelosta "Väriteema: Mustavalkoinen".
- Päivitä Koodi-kohdassa olevia RGB-värikoodeja.
- R=Red, G=Green, B=Blue; asteikko on 0-255; netistä löytyy väripaletteja. - Klikkaa Päivitä-painiketta.
CSS-tyylien muokkaaminen
Jos haluat muokata ulkoasun mittoja, marginaaleja, reunoja, pyöristyksiä, häivytyksiä ja niin edelleen, niin voit muokata CSS-tyylejä. Tällä tavalla voit myös ylikirjoittaa väriteemassa olevia värejä tai lisätä värejä, joita väriteemassa ei ole.
- Kirjaudu verkkokaupan hallintaliittymään (demo).
- Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
- Valitse luettelosta jokin koodikortti, jonka tyyppi on "CSS".
- Muokkaa Koodi-kohdassa olevia CSS-tyylejä.
- Klikkaa Päivitä-painiketta.
Omien HTML-elementtien lisääminen
Voit lisätä verkkokaupan ulkoasuun omia HTML-elementtejä samalla periaatteella kuin miten verkkokaupan logo on lisätty demokauppojemme ulkoasuun.
- Kirjaudu verkkokaupan hallintaliittymään (demo).
- Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
- Klikkaa Lisää uusi -painiketta.
- Valitse tyypiksi "HTML5".
- Syötä nimeksi mitä tahansa.
- Valitse Sivu-kohdasta "[ei merkitystä]".
- Valitse Sijainti-kohdasta haluamasi upotuspiste.
- Lisää Koodi-kohtaan HTML-elementtejä.
- Klikkaa Tallenna-painiketta.
Lisäksi voit lisätä omille HTML-elementeille omia CSS-tyylejä.
- Kirjaudu verkkokaupan hallintaliittymään (demo).
- Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
- Klikkaa Lisää uusi -painiketta.
- Valitse tyypiksi "CSS3".
- Syötä nimeksi mitä tahansa.
- Valitse Sivu-kohdasta "[ei merkitystä]".
- Lisää Koodi-kohtaan CSS-tyylejä.
- Klikkaa Tallenna-painiketta.
Lisäksi voit ladata (upload) verkkokauppaan omissa HTML-elementeissä ja CSS-tyyleissä olevat kuvatiedostot.
- Kirjaudu verkkokaupan hallintaliittymään (demo).
- Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
- Klikkaa Lisää uusi -painiketta.
- Valitse tyypiksi "Kuva".
- Syötä nimeksi mitä tahansa.
- Klikkaa Kuva-kohdassa olevaa sinistä kuvaketta.
- Valitse kuvatiedosto omalta tietokoneeltasi.
- Klikkaa Tallenna-painiketta.
Hyvä tietää
Ulkoasu säilyy ohjelmistopäivityksen yhteydessä, koska edellä mainitut koodikortit tallennetaan tietokantaan ja kuvat säilyvät kotisivutilassa. Joskus ohjelmistopäivityksen yhteydessä on tehtävä ulkoasuun liittyviä lisätöitä, jotka on mainittu lueminut.txt -tiedostossa.
Katso myös
