Első lépések

Üdvözlünk! Köszönjük, hogy a kosR alkalmazást választottad. Ezzel a bejegyzéssel egy teljesen általános webáruház beállításait mutatjuk be a telepítéstől egészen az első címke nyomtatásig.

A minta webáruházunk GLS és Foxpost szállítást kínál számlázz.hu integrációval, céges vásárlási lehetőséggel, utánvétes és bankkártyás fizetéssel

A lépéseket követve megismerheted a kosR alapvető működését és beállítását, ami megközelítőleg 15 percet vesz igénybe a végeredmény azonban a tökéletes vásárlói élmény a Shopify környezetében

Amikre szükséged lesz

A telepítés előtt mindenképpen jó, ha kéznél van

• GLS felhasználóneved és jelszavad továbbá az ügyfélszámodat
• FOXPOST felhasználóneved, jelszavad és API kulcsod
• Szamlazz.hu API kulcs

  0. Webáruházad beállítása

  0.1 Confirmation step tiltása

  Annak érdekében, hogy a vásárlónak minél kevesebb lépésen kelljen túljutnia, javasoljuk, hogy kapcsolja ki a Confirmation Step-et a webáruházban. Ehhez

• Kattints a Settings-re
• Válaszd a General menüt
• Keresd meg a "Require a confirmation step" checkboxot és szed ki

  0.2 Branding beállítások

  A realkalmazás a megenítéskor a Shopify branding beállításaiból szedi a logót, illetve a színeket. Ezek beállítását javasoljuk, és ugyanazokat a beállításokat, színeket használd, mint a Shopify checkout oldal beállításainál.

• Kattints a Settings-re
• Válaszd a General menüt
• Keresd meg a "Brand assets" szekciót és kattints a "Manage" gombra

Logos / Default - ez fog megjelenni a chekout oldalon Colors / Primary color - ez lesz a linkek színe Colors / Contrasting color - ez lesz a gomb szövegének színe Colors / Secondary color 1 - ez lesz a gomb színe a checkout oldalon

0.3 Checkout oldal beállítás

A tökéletes vásárlói élmény érdekében érdemes a Checkout oldal beállításait is módosítani.

• Kattints a Settings-re
• Válaszd a Checkout menüt
• Keresd meg a "Configurations" szekciót és kattints a "Customize" gombra

Az új ablakban kattins a fogaskerék gombra majd

• Logo - töltsd fel a logót
• Logo position - állítsd be a "Checkout form" nézetet FONTOS!
• Background 1 - állítsd be a "Color" mezőt fehérre: #ffffff (Fontos megjegyezni, hogy látszólag lehet azon áll de újra ki kellhet választani.)
• Background 2 - állítsd be a "Color" mezőt fehérre: #f5f5f5 (Fontos megjegyezni, hogy látszólag lehet azon áll de újra ki kellhet választani.)
• Color / Accent - be állítsd be ugyanazt a színt amit korábban a Secondary color 1 -be beállítottál
• Color / Buttons - ba állítsd be ugyanazt a színt amit korábban a Primary color-nál megadtál

  

  Ha végeztélk kattints a Save gombra

  0.4 Engedélyezd az utánvétet a webshopban

  A módok között engedélyezned kell az utánvét szedést a Shopify-ban. Ehhez a következő lépéseket kell tenned:

• Kattints a Settings-re
• Válaszd a Payments menüt
• Keresd meg a "Manual payment methods" szekciót és kattints a "Manual payment method" gombra (ha a listában még nem látod a COD-ot)
• Válaszd a "Cash on Delivery (COD)" opciót
• Kattints az Activate Cash on Delivery (COD)" gombra

0.5 Checkout oldal átszövegezése

Eredeti felhasználói élmény érdekében két szöveget érdemes átírni a Shopify eredeti Checkout oldalán. Ezeket a következő módon éred el:

• Kattints a Settings-re
• Válaszd a Checkout menüt Keresd meg a "Checkout language" szekciót és kattints a "Edit checkout content" gombra

Átnevezés 1 "Kapcsolattartási adatok" cserélése "Rendelés áttekintése" szövegre

Átnevezés 2 "Szállítási mód" cserélése "Vásárlói adatok" szövegre (A mód több helyen is szerepel, ezért a képen megjelölt "derivery title" legyen átírva.)

Átnevezés 3 "Szállítási cím használata számlázási címként" cserélése "Vásárlói adatok használata számlázási címként" szövegre

Átnevezés 4 "Megegyezik a szállítási címmel" cserélése "Megegyezik a vásárlói adatokkal" szövegre

Átnevezés 5 (céges vásárlás engedélyezés esetén) "Cégnév (nem kötelező beírni)" cserélése "Cégnév, adószám (nem kötelező)" szövegre

0.6 Sablonból vedd le az azonnali fizetés gombokat

Ne maradjanak a sablonban azonnali fizetés gombok (Quick checkout, Fast checkout), ellenkező esetben a vásárló nem fog tudni eljutni a kosR által nyújtott checkoutoldalra

A gombot minden sablonnál más módszerrel lehet leszedni. Az alábbi képeken bemutatunk pár példát, hogy bizonyos sablonokban ezt hogyan lehet kikapcsolni.

Amennyiben nem található az adminra kivezetett kikapcsoló gomb, akkor általában a sablon kódjában lehet kiszedni ezeket a gombokat. (Haladó beállítás!)

A forráskódban az "additional_checkout_buttons" részt egyszerűen kommentek közé helyezzük vagy kitöröljük a megadott sablonban. Dawn esetébenez a sablon a sections/main-cart-footer.liquid

0.7 Checkout beállítások

Annak érdekében, hogy a címkék nyomtathatóak legyenek és a felhasznló is megkapja az értesítéseket a csomagjárol MINDENKÉPPEN szükséges az Email ezért a beállításokban kattintsd át "Email" -re a Customer contact method-ot

További beállítások

Megjegyzés: céges vásárlás esetén a "Company name" mezőre szükség van.

0.8 "Shop" fizetési opció kikapcsolása (opcionális de javasolt)

Európában nem igazán elterjedt fizetési mód, a Shopify saját Shop elnevezzésű fizetési módja, ennek kikapcsolását javasoljuk, ugyanis felesleges mezőket, illetve opciókat ad a vásárlók számára, ezzel megzavarva őket a gyors és zökkenőmentes check-out folyamatban.

1. Alkalmazás telepítése

Keresd fel a Shopify App Store-ban a kosR oldalát https://apps.shopify.com/kosr majd kattints az Install gombra. A következő oldalon fogadd el a telepítést az Install gombra kattintva Ezzel felteleítődött az alkalmazásod, amit a baloldali menüből mindig elérsz.

TIPP: Kattints a kitűzés ikonra így mindig kéznél lesz az alkalmazás

2. Szállítási módok feltöltése

Telepítés után kattints a baloldali menüben a szállítási módok menüpontra, majd kattints a szállítási mód hozzáadása gombra.

Figyelem! Az első mentéskor a korábban a Shopify-ban definiált szállítási módjaid törlésre kerülnek! Amennyiben később szeretnéd azokat visszaálltatni gondoskodj azok lementéséről!

TIPP: A jobb felső szállítási mód hozzáadása gombbal további szállítási módokat is hozzáadhatsz.

Válaszd ki a listából a neked megfelelő szállítási módokat majd kattints az OK, gombra. Jelen példányban a GLS házhozszállítást, illetve a FoxPost csomagautomatát fogjuk beállítani.

2.1 Töltsd ki a GLS adatokat

Általános beállítások

• Engedélyzés - Ezzel tudod a boltodban engedélyezni a szállítási módot.
• Sorrend - A mezőbe beírt számmal tudod sorrendezni a szállítási módokat.
• Szállítási mód megnevezése - ezen a néven fog megjelenni a vásárlóknak a szállítási mód
• Megjegyzés - tetszőleges megjegyzést adhatsz ami a szállítási mód neve alatt jelenik meg

Szállítási költségek

• A szállítási költségeket súly-arányban tudod megadni.
• Az új sor gombra kattintva új súlyzónát definiálhatsz.
• Az ingyenes szállítás limit mezőbe írt összegtől a szállítás automatikusan 0 forint lesz.

GLS esetében add meg az Ügyfélazonosítódat, Felhasználónevedet és jelszavadat (ezekkel lépsz be a mygls.hu oldalon)

2.2 Töltsd ki a FOXPOST adatokat

Általános beállítások

• Engedélyzés - Ezzel tudod a boltodban engedélyezni a szállítási módot.
• Sorrend - A mezőbe beírt számmal tudod sorrendezni a szállítási módokat.
• Szállítási mód megnevezése - ezen a néven fog megjelenni a vásárlóknak a szállítási mód
• Megjegyzés - tetszőleges megjegyzést adhatsz ami a szállítási mód neve alatt jelenik meg

Szállítási költségek

• A szállítási költségeket súly-arányban tudod megadni.
• Az új sor gombra kattintva új súlyzónát definiálhatsz.
• Az ingyenes szállítás limit mezőbe írt összegtől a szállítás automatikusan 0 forint lesz.

FOXPOST esetében add meg az API felhasználónevedet, API jelszavadat és API kulcsodat. Ezek beszerzéséről bővebben itt olvashatsz a 2. pontban

Amikor mindent beállítottál kattints a Save gombra

3. Fizetési módok feltöltése

A közösségi menüből válaszd ki a fizetési módok menüpontot, majd kattints a fizetési mód kiválasztása gombra.

TIPP: A jobb felső fizetési mód hozzáadása gombbal további szállítási módokat is hozzáadhatsz.

Válaszd ki a listából a neked megfelelő fizetési módokat. A minta beállításokban a Shopify Payments-et, illetve az utánvételt fogjuk használni és beállítani.

3.1 Töltsd ki a Shopify Payments (bankkártyás fizetés) adatokat

• Engedélyzés - Ezzel tudod a boltodban engedélyezni a fizetési módot.
• Sorrend - A mezőbe beírt számmal tudod sorrendezni a fizetési módokat.
• Név - ezen a néven fog megjelenni a vásárlóknak a fizetési mód
• Leírás - tetszőleges megjegyzést adhatsz ami a fizetési mód neve alatt jelenik meg
• Elérhető virtuális termékekhez - Ha a fizetési módot szeretnéd virtuális termékekhez, például oktatásokhoz, előfizetésekhez, lehetővé tenni, akkor pipád be a négyzetet
• Szállítási mód elérhetősége - Lehetőséged van megjelölni, hogy mely szállítási módhoz érhető el az aktuális fizetési mód. A listában megtalálod az összes korábban felvitt szállítási módot. Csak azokat jelöld be, amelyiknél szeretnéd, hogy a bankkártyás fizetés elérhető legyen.
• Csere kulcsszavak - Ez egy technikai beállítás alapértelmezetten nem kell vele foglalkozni azonban ellenőrizd, hogy az alábbiak megtalálhatóak-e benne: bogus, credit card, shopify, gpay, google, apple

3.2 Töltsd ki az Utánvét adatokat

• Engedélyzés - Ezzel tudod a boltodban engedélyezni a fizetési módot.
• Sorrend - A mezőbe beírt számmal tudod sorrendezni a fizetési módokat.
• Név - ezen a néven fog megjelenni a vásárlóknak a fizetési mód
• Leírás - tetszőleges megjegyzést adhatsz ami a fizetési mód neve alatt jelenik meg
• Elérhető virtuális termékekhez - Ha a fizetési módot szeretnéd virtuális termékekhez, például oktatásokhoz, előfizetésekhez, lehetővé tenni, akkor pipád be a négyzetet
• Szállítási mód elérhetősége - Lehetőséged van megjelölni, hogy mely szállítási módhoz érhető el az aktuális fizetési mód. A listában megtalálod az összes korábban felvitt szállítási módot. Csak azokat jelöld be, amelyiknél szeretnéd, hogy a bankkártyás fizetés elérhető legyen.
• Csere kulcsszavak - Ez egy technikai beállítás alapértelmezetten nem kell vele foglalkozni

Az utánvét feldolgozásra két módszert ajánl a kosR

1. módszer: Utánvételi díj termékkel

Ebben az esetben egy utánvét nevezetű termék jön létre, és ez kerül hozzáadása a kosárba vásárláskor.

2. módszer: Utánvételi díj szolgáltatónként

Ebben az esetben minden szolgáltatónál külön tudsz definiálni utánvételi díjat, az utánvételi díja szállítási mód díjába fog bele számolódni. Fullfilment esetén ajánlott

INFÓ: Amennyiben a második módszert választod és állítod be, ne felejtsd el átváltani a szállítási módok beállításra és minden egyes szállítási módnál kitölteni az utánvét díjat, majd mentést csinálni. Ellenkező esetben nem fognak megjelenni az utánvétes szállítási díjak.

• Kizárt országok - Lehetőséged van az utánvétel vezetést bizonyos országokban letiltani.

  4. Általános beállítások

  Amikor a beállításokkal megvagy a kosR már elérhető a webshopodban a https://domainneved.hu/apps/checkout oldalon. A 4.1-es pontban pedig kiaktiválhatod élesre a webshopodba.

  4.1 kosR beállítások

• Megjelenés és nyelv - a kosR alkamlazás nyelvét állíthatod be
• Csak magyar nyelven aktiválódik a kosR - Lehetőséged van beállítani, hogy a kosR alkalmazást kizárólag a magyar nyelvű vásárlók láthassák.
• kosR frontend engedélyezése - ahhoz, hogy a boltban működni tudjon a kosR elnedélyezned kell a sablonodban a "kosR frontend engedélyezése" gombra kattintva Új ablakban megjelenik a sablon szerkesztő, ahol ellenőrizd, hogy a kosR Settings be van kapcsolva majd a Save gombra kell kattintani

Ugyanitt ügyelj, hogy a Cart buttons és a Cart drawer element is a sablonodhoz illeszkedően van kitöltve tehát azonos HTML elem és Class van megadva mint amit a sablono használ. A kosr működésének kiválasztása. Javasoljuk az "Új oldalon" történő megjelenítést, amely gyakorlatilag két lépcsőre változtatja a Shopify fizetési folyamatát. Ezen kívül van lehetőség "Widget" használatára, ami hasonló a DigiLoop és a Parcely működéséhez illetve Popup használatára, amikor a "Új oldalhoz" hasonló tartalmú adatbekérő form jelenik be de a felhasználó nem kerül elirányításra.

4.2 Bolt beállításai

Add meg a Webáruház általános szerződési feltételeink linkjét, illetve adatvédelmi linkjét. Alapértelmezetten a Shopify által használt URL-eket találod meg.

4.3 Üzemeltetői adatok megadása

Add meg a webshop üzemeltetőjének adatait. Ezek az adatok fontosak lesznek később a számlázásnál, illetve a címkenyomtatásoknál is.

4.4 Számlázás beállítása

Az lehetőséged van a számlázz.hu, illetve a Bidlingo számlázási programok integrálására a webáruházadban. Ennek beállításait ismertetjük most. Jelen esetben úgy, hogy a shop képes legyen céges számlák kiállítására is. ⚠️Céges számlázás esetén ne feledd Engedélyezni a "Checkout rules" szekcióban a kosR alkalmazást!"

• Számlázó - Válaszd ki a számlázó szolgáltatódat
• API kulcs - add meg a szolgáltatódtól kapott API kulcsot. Szamlazz.hu esetében itt találod míg Billingo esetében ide kattintva olvashatod el hogy miként kaphatsz API kulcsot
• Számla kiállítása - Válaszd ki hogy a vásárlód mikor kapja meg a számláját.
  • Fullfilment esetén - A számla a Shopify "fullfilment" gombra kattintása esetén állítódik ki automatikusan, vagyis amikor a címke nyomtatásra kerül
  • Kézi számlázás - Nem történik automatikus számlázás. A számla akkor állítodik ki, amikor az admin a rendelésnél a nyomtatásra nyom.
  • Fizetettnek jelölve - A számla, akkor állítodik ki automatikusan, amikor az admin fizetetre jelöli a rendelést. Vagy hogyha bankkártyás fizetés történik.
  • Rendelés feladásakor - A számla a rendelés feladásakor állítódik ki automatikusan.
• Számla megjegyzés - Lehetőséged van a számlán tetszőleges megjegyzést megjeleníteni. Ez a megjegyzés minden kiállított számlán megjelenik.
• Számla nyelve - Lehetőséged van a számlákat több nyelven kiállítani. A magyar piacon javasoljuk a kizárólag magyar nyelv használatát. Azonban, ha külföldön is értékesítesz, akkor használd vagy az angolt, vagy az automatikus nyelvválasztást.
• 0%-os ÁFA kulcs a számlán - A kosR A 0%-os ÁFA-val történő értékesítést amennyiben KATA-sként értékesítesz válaszd az AAM-et. Amennyiben külföldi cég számára értékesítesz akkor az ATK-t
• Számla típusa - A számlázóprogram előfizetésétől függően választhatsz papíralapú vagy elektronikus számlát is.
• Céges számlázás kezelése - Lehetőséged van a céges vásárlások kezelésére erről bővebb információkat a help-ben találsz a megfelelő fejezetben. Most jelenleg azt az esetet mutatjuk be, amikor dedikált cégnévmező és adószám mező kerül a checkout folyamatba.

Az "Ugrás a beállításokhoz" gombra kattintva javasoljuk az alábbi beállítások használatát:

• "Address line 2" mező engedélyezése - amenniyben a Shopify-ban engedélyezve van az Address line 2 mező, akkor a kosR checkout folyamatban ezzel az opcióval szintén engedélyezheted. Magyar webshopoknál nincs értelme
• Számla küldése emailben - A vásárló számlát e-mailben kapja meg.
• Teljesítés dátuma és Fizetési határidő - A számlázásra vonatkozó alapértelmezett beállítások
• Számlázott rendelés címke - Amikor egy rendelés számlázásra kerül, akkor a Shopify-ban az order automatikusan kap egy címkét. Itt adhatod meg, hogy mi legyen ennek a címkének a neve. Később erre a címkére a rendelés listában is tudsz szűrni.

  4.5 Szkript beállítások (technikai beállítás a haladóknak)

  Kizárülag tachnikai beállítés alapértelmezetten nincs teendő vele. Lehetőséged van egyéni stílusokat, illetve egyéni JavaScript-eket alkalmazni a Checkout oldalon.

  5. Teszt rendelés feladása

  Adj fel a webáruházadban egy teszt rendelést! Lehetőség szerint használd a céges adatok megadása mezőt is.

A vásárló elször a kosR által generált oldalra érkezik

Ezután jut el a Shopify "gyári" checkout oldalára ahol azonban már minde előre megadott adat ki van töltve kizárólag a rendelés elküldése gombra kell kattitania

Add fel a rendelést a " Rendelés elküldése" gombra kattintva

6. Címke nyomtatás tesztelése

Rendelés nézetében kattints a Print gombra, és válaszd a kosR menüt! A felugró ablakban válaszd a "Címke nyomtatása" menüt

TIPP: lehetőséged van a rendelések listanézetéből csoportosan is elvégezni a nyomtatást a következő módon:

7. Számlázás tesztelése

A címke noymtatásával a példa shopban a számla automatikusan elkészült, hiszen a címke generálása Fulfill állapotba rakta a rendelést.

8. Kimenő email módosítása (haladó)

Annak érdekében, hogy a kimenő emailben a lehető legpontosabb információk szerepeljenek módosítanid kell a felhasználóhoz érkező levél szövegét felkészítve az automatás átvételre.

1. Lépj be a Settings-be
2. Válaszd a Notifications menüt
3. Kattints a "Customer notifications" menüpontra
4. Válaszd az "Order confirmation" levélsablont
5. Jobb felül kattints az Edit code gombra
6. A Email body (HTML) kód szerkezstőben keresd meg az alábbi részt a levél sablonban

Szállítási cím

                   
  {{ shipping_address | format_address }}                    

És cseréld ki erre:

Szállítási cím

    
    {% if shipping_method.title contains 'csomagautomata' or shipping_method.title contains 'csomagpont' or shipping_method.title contains 'automata' %}
        

{{ shipping_method.title }}

      {% else %}
        {{ shipping_address | format_address }}
      {% endif %}     

A kódrészlet annyit csinál, hogyha a szállítási mód nevében benne van a foxpost, a csomag automata, az automata vagy a csomagpont akkor a szállítási mód adatait mutatja a felhasználó adatai helyett így kevesebb félreértés lesz az Ügyfeleiddel.

1. Ugyanezt (6. pont) végezd el az "Order edited" sablonban is

Igény szerint a Staff notification-t is módosítsd