Ulkoasu

Kun olet asentanut Clover Shop® 2024 -verkkokauppaohjelmiston, niin ulkoasu näyttää aluksi samalta kuin demokaupoissamme. Ulkoasua ei ole pakko muokata, mutta verkkokaupan logo on vähintäänkin vaihdettava.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

  • verkkoselain (esim. Edge)

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 "Ulkoasupohja: Värit vaalea" tai "Ulkoasupohja: Värit tumma".
  • 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.
Uudet värit näkyvät verkkokaupassa minuutin kuluttua tai sitä ennen klikkaamalla Ctrl-F5.

Tumma vai vaalea tila? Molemmat

Uusin ulkoasupohja "Jam 2023" tunnistaa automaattisesti, onko verkkokaupan asiakkaan tietokoneessa (tai selaimessa) käytössä tumma vai vaalea tila, ja näyttää automaattisesti tilaa vastaavan ulkoasun.

CSS-tyylien muokkaaminen

Jos haluat muokata ulkoasun mittoja, marginaaleja, reunoja, pyöristyksiä, häivytyksiä ja niin edelleen, niin voit muokata CSS-tyylejä.

  • 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.
Uudet CSS-tyylit näkyvät verkkokaupassa minuutin kuluttua tai sitä ennen klikkaamalla Ctrl-F5.

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.
Uudet CSS-tyylit näkyvät verkkokaupassa minuutin kuluttua tai sitä ennen klikkaamalla Ctrl-F5.

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

Näin rakennat yrityksellesi verkkokaupan

1. Asenna ohjelmisto

Asenna ohjelmisto tai tilaa meiltä maksuton asennustyö. Maksuton asiakaspalvelumme ja tekninen tukemme neuvoo tarvittaessa kummassakin tapauksessa.

2. Perusta verkkokauppa

Kirjaudu selaimella verkkokaupan hallintaliittymään ja perusta verkkokauppa. Tarjoamme maksuttomat Maxi-ominaisuudet verkkokaupan perustamisen ajaksi.

3. Tilaa lisenssi

Tilaa lisenssi vasta, kun olet perustanut verkkokaupan, eli verkkokauppa on ns. laitettu tulille. Voit myös olla tilaamatta lisenssiä ja luopua hankkeesta.

Scroll to Top