Voit korvata MyCashflow'n oletusarvoisen favicon-kuvakkeen tekemällä muutoksia verkkokaupan teeman tiedostoihin.

Favicon on kuvake, joka näytetään verkkoselaimen välilehdillä, kun kävijät tulevat verkkokauppaasi.

Oletusarvoisesti MyCashflow-verkkokauppojen favicon-kuvakkeena käytetään MyCashflow'n harmaata ostoskorikuvaketta.

Näin voit ottaa käyttöön oman brändisi mukaisen faviconin:

  1. Luo favicon-kuvake haluamassasi kuvankäsittelyohjelmassa.

    Kuvan tulee olla neliön muotoinen PNG-tiedosto ja mielellään mitoiltaan samanlainen kuin se on selaimessa (yleisiä kuvakokoja ovat esim. 32x32 px ja 96x96 px).

  2. Mene hallintatyökalun sivulle Asetukset > Yleiset asetukset.
  3. Syötä luomasi kuvatiedosto Favicon-kenttään.

    Favicon-asetukselle on lisättävä tuki teemaan (valmisteemat eivät tue asetusta).

    Sivupohjan <head>-osioon on lisättävä teemassa {Favicon}-tagi, jotta favicon näytetään verkkokaupassa.

    Barebones-teemassa <head>-osio sijaitsee tiedostossa helpers/header.html

    Jos teeman HTML/CSS/JavaScript-tiedostojen muokkaaminen ei ole sinulle tuttua, ota yhteyttä verkkokaupan teeman suunnittelijaan tai MyCashflow'n asiakaspalveluun.

Nyt favicon on käytössä kaikissa verkkokaupan versioissa.

Vaihtoehtoisten favicon-kuvakkeiden käyttäminen

Verkkokaupan teemaan voi lisätä myös useita erilaisia tai erikokoisia favicon-kuvakkeita eri tarkoituksia varten. Eri laitteet ja ohjelmat käyttävät erikokoisia faviconeja, joten yksi kuvake ei välttämättä sovi kaikkiin tarkoituksiin.

  1. Luo kaikki tarvittavat faviconit.
  2. Luo favicon-merkkauksen sisältävä helper esimerkiksi tiedostoon helpers/favicon.html.
    <link rel="shortcut icon" type="image/ico" href="{ThemeUrl}/images/favicon-32x32.ico" sizes="32x32"/>
<link rel="apple-touch-icon" type="image/ico" href="{ThemeUrl}/images/favicon-180x180.ico" sizes="180x180"/>
<link rel="apple-touch-icon" type="image/ico" href="{ThemeUrl}/images/favicon-196x196.ico" sizes="196x196"/>

    Tässä esimerkissä luodaan viittaukset kolmeen erikokoiseen favicon-kuvakkeeseen, joita näytetään koon perusteella eri yhteyksissä. Kaksi viimeistä riviä esimerkiksi ovat sopivia iPhonen ja iPadin retina-näytöille.

  3. Lisää teemaan viittaus faviconien helper-tiedostoon.

    Vaadittu merkkaus on lihavoitu alla näkyvässä koodiesimerkissä:

    <head>
    <meta charset="utf-8" />
    <title>{Title}</title>
    <meta name="description" content="{MetaDescription}" />
    <meta name="robots" content="index, follow" />
    {Feed}
    <link rel="canonical" href="{ShopUrl}{CanonicalUrl}" />
    {Helper(file: 'helpers/favicon')}
    {Helper(file: 'helpers/styles')}
</head>

    Varmista että kansioiden ja tiedostojen nimet ovat samat kuin omassa teemassasi, jos kopioit tämän esimerkin itsellesi.

    Teeman <head>-osio sijaitsee usein tiedostossa helpers/header.html, varsinkin jos teema pohjautuu MyCashflow'n oletusteemaan.

Jos verkkokaupan eri versioilla on käytössä eri teemoja, tee muutokset kaikkiin tarvittaviin teemoihin. Näin voit käyttää myös eri faviconia eri versioissa.