/ Kauppa

Kaupan lisääminen kotisivuille

Kauppasi osoitteen löydät Giftistä, heti avaussivulta.

HUOM: Jos käytät Wordpressiä, katso ohje Wordpress-pluginin käytöstä

Kauppanapin lisääminen

Yksinkertaisimmillaan asiakkaat voi ohjata kauppaan lisäämällä kotisivuille täysin tavallinen linkki tai painike, joka ohjaa omaan lahjakorttikauppaasi.

Valmiiksi tyylitellyn painikkeen saat lisäämällä seuraavan koodinpätkän sivullesi, minne haluat kauppapainikkeen lisättävän. Korvaa "ESIMERKKI" oman yrityksesi kaupan osoitteen mukaisesti.

<a class="gifti-shop-now" 
   href="https://gifti.fi/shop/ESIMERKKI">
   Osta lahjakortti
</a>
<script src="https://gifti.fi/static/js/embed.js"></script>

Mikäli lisäät useamman kauppapainikkeen sivuillesi, lisää <script ...-osuus vain kerran sivun koodin loppuun (esim. footeriin).

Kauppapainikkeen muokkaaminen

Kauppanapista löytyy useampi versio erilaisia nettisivuja varten. Painiketta saa muokattua helposti data- attribuuttien avulla.

data-attribuutit
  • data-btn-theme - light (oletus), dark, purple, none - Muuttaa napin väriteemaa. none ei lisää nappiin mitään tyylejä, jolloin napin ulkoasua voi muokata vapaasti kirjoittamalla omat tyylit.
  • data-btn-size - default (oletus), small - Muuttaa napin kokoa.
  • data-icon - gifti (oletus), none - Valitsee napissa näytettävän ikonin
  • data-lang- fi, sv, en - Minkä kieliseen kauppaan asiakas ohjataan. Huomioithan, että kaupan täytyy tukea kyseistä kieltä.

kauppanapit

Esimerkki

Allaoleva koodinpätkä lisää pienen, tummateemaisen ja ikonittoman kauppapainikkeen.

<a class="gifti-shop-now" 
   href="https://gifti.fi/booking/ESIMERKKI"
   data-btn-theme="dark"
   data-btn-size="small"
   data-icon="none">
   Osta lahjakortti
</a>
<script src="https://gifti.fi/static/js/embed.js"></script>

pikkumusta

Kaupan upottaminen kotisivuille

Lahjakorttikaupan voi myös upottaa kotisivulle samalla koodinpätkällä kuin millä kauppapainike lisätään. Upotuksen saa käyttöön käyttämällä data- -attribuutteja.

Upotettaessa kauppaa, voit valita joko upotuksen kaikenkokoisille laitteille, tai upotuksen suurille laitteille ja kauppapainikkeen pienille laitteille (esim. puhelimet). Suosittelemme jälkimmäistä, koska tällöin pienillä laitteilla kauppa voi aueta koko näytölle ja asettua applikaatiomaisesti näytölle eliminoiden häiritsevän mahdollisuuden skrollata pois kauppanäkymästä vahingossa.

Hyödynnä myös kaupan ulkoasun muokkausmahdollisuudet sivua upottaessasi.

data-attribuutit
  • data-embed - true (kaikki laitteet) tai non-small-devices (isot laitteet) - määrittää kuinka upotuksen.

HUOM: Katso myös kauppapainikkeen yhteydessä esitellyt data-attribuutit yltä.

Esimerkki

Allaoleva koodinpätkä upottaa kaupan nettisivuun isoille laitteille, mutta näyttää vaaleateemaisen kauppapainikkeen pienemmillä laitteilla.

<a class="gifti-shop-now" 
   href="https://gifti.fi/booking/ESIMERKKI"
   data-btn-theme="light"
   data-embed="non-small-devices">
    Osta lahjakortti
</a>
<script src="https://gifti.fi/static/js/embed.js"></script>
upotettusivu

Isoilla laitteilla

whitebtn
Pienillä laitteilla