Ulkoasu

Verkkokaupan ulkoasun CSS-tyylit ovat aluksi samat kuin demokaupoissamme. Verkkokaupan ulkoasun suunnitteleminen alkaa siitä, että suunnittelija miettii, mitä muutoksia ja parannuksia demokauppamme CSS-tyyleihin on tehtävä, jotta verkkokaupasta tulisi persoonallinen.

Kaikki muutokset verkkokaupan ulkoasuun voidaan tehdä verkkokaupan hallintaliittymän kautta. FTP-ohjelmaa ei tarvita, mutta sen käyttö on myös mahdollista.

CSS-tyylien muokkaaminen

• 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

Verkkokaupan ulkoasuun voidaan lisätä omia HTML-elementtejä. Esimerkiksi verkkokaupan logon ja maksunvälittäjän bannerin lisääminen tapahtuu tällä tavalla.

• 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.

Omien CSS-tyylien lisääminen

Omille HTML-elementeille voidaan lisätä 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.

Omien kuvien lisääminen

Omiin HTML-elementteihin ja CSS-tyyleihin määritellyt kuvat voidaan ladata (upload) kotisivutilaan verkkokaupan hallintaliittymän kautta.

• 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.

Väriteemat

Verkkokaupan värit on koottu yhteen koodikorttiin. Tämä nopeuttaa verkkokaupan ulkoasun suunnittelemista. Koodikortti on mahdollista kopioida, liittää, deaktivoida ja aktivoida. Tämä puolestaan mahdollistaa esimerkiksi Black Friday -teeman suunnittelemisen etukäteen.

Ohjelmistopäivityksen vaikutukset

Kaikki HTML-elementit ja CSS-tyylit on tallennettu tietokantaan. Ne säilyvät siellä ohjelmistopäivityksen yhteydessä. Kuvat säilyvät kotisivutilassa. Näin verkkokaupan ulkoasu säilyy ohjelmistopäivityksen yhteydessä ennallaan. Joskus ohjelmistopäivityksen yhteydessä on tehtävä ulkoasuun liittyviä lisätöitä, jotka on mainittu lueminut.txt -tiedostossa.

CSS-tyylien nollaaminen

Verkkokaupan CSS-tyylit kannattaa nollata noin 2-5 vuoden välein, jotta ne toimisivat paremmin uusien ohjelmistoversioiden kanssa. Nollaamalla saadaan käyttöön myös sellaisia uusia CSS-tekniikoita, joita verkkoselaimet eivät vielä tukeneet 2-5 vuotta sitten. Ulkoasun nollaaminen virkistää verkkokaupan ulkoasun tähän päivään.

• Lataa ohjelmisto ja pura se omalle tietokoneellesi.
  - Nyt tehdään vain CSS-tyylien nollaaminen (ei tehdä ohjelmistopäivitystä).
• Valitse adm / documents / layout -kansiosta uusin ulkoasupohja.
• Avaa tyylitiedostot yksinkertaisella tekstieditorilla, kuten Notepad++.
• Kopioi tyylitiedostojen sisältö verkkokaupan hallintaliittymän asetukset / koodit ja ulkoasu -kohdassa oleviin koodikortteihin.
  - Voit päätellä tiedostojen nimistä, mitä olet kopioimassa ja koodikorttien nimistä, mihin olet liittämässä.

Malliesimerkkejä

• Verkkokaupan logon vaihtaminen
• Otsikkojen fontin vaihtaminen
• Painikkeiden tyylin päivittäminen

Katso myös

• Responsiivinen ulkoasu
• Vimpaimet (HTML/CSS/JavaScript)
• Ohjelmointi (PHP/MySQL)
• Clover Connections™