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.

Faviconin vaihtaminen edellyttää teeman HTML-tiedostojen muokkaamista. Jos sinulla ei ole kokemusta HTML:n käsittelystä, voit pyytää MyCashflow'n asiakaspalvelua tekemään muutokset puolestasi.

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 ja mielellään samankokoinen, kuin se on selaimessa (yleinen kuvakoko on 32x32 px).

    Tallenna kuvake .ico-muodossa.

  2. Lisää kuvake teemaan esimerkiksi kansioon images/ nimellä favicon.ico

    Löydät teeman tiedostot hallintatyökalun sivulta Ulkoasu > Tiedostoselain.

    Katso tarvittaessa ohjeet verkkokaupan tiedostojen hallintaan.

  3. Lisää teemaan faviconin HTML-merkkaus.

    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}" />
    <link rel="shortcut icon" type="image/ico" href="{ThemeUrl}/images/favicon.ico" />
    {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.

Vaihtoehtoisten favicon-kuvakkeiden käyttäminen

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.