Petrevit Offer — Teljes beállítási útmutató

📦

Termék létrehozása

Alap adatok és kötelező opcióstruktúra beállítása

Navigálj az Adminban

Shopify Admin → Termékek → Termék hozzáadása

Töltsd ki a cím, leírás és képek mezőket. Ezután görgess le a Változatok szekcióhoz.

Opcióstruktúra — kötelező!

A szekció pontosan két opciót vár, ebben a sorrendben:

Opció neve	Példa értékek	Szerepe
Kutyasúly	10 kg alatt, 10-20 kg, 20-30 kg, 30 kg felett	Súlyválasztó pill gombok
Csomag	60 napos, 120 napos, 180 napos, 240 napos	Tier kártyák az adott súlynál

💡

Az opció nevei pontosan "Kutyasúly" és "Csomag" legyenek — a szekció JS-je ezeket olvassa. Különböző súlyokhoz különböző csomagok tartozhatnak, a szekció automatikusan kezeli.

Variáns képek (opcionális)

Minden variánshoz rendelhetsz egyedi képet — ezek a tier kártyákon jelennek meg. A webshop galériájából automatikusan kiszűrődnek.

Töltsd fel a képeket a termék Média szekciójában
Variáns szerkesztőben kattints a képikonra az adott variánsnál
Rendeld hozzá a megfelelő képet

💰

Variánsok & Árak

Egységár logika és készletkezelés

Az árazás logikája

Ár (Price) = 1 doboz kedvezményes egységára
Compare at price = 1 doboz eredeti ára (ha van kedvezmény)

A szekció JS-je automatikusan számítja: Ár × dobozszám = megjelenített csomag ár
A kosárba a helyes dobozszám kerül be automatikusan.

⚠️

Ne add meg a teljes csomag árát — mindig az 1 dobozra jutó kedvezményes árat add meg!

Példa — 12 990 Ft alapár esetén

Csomag	Doboz	Kedvezmény	Price (1 doboz)	Compare at	Megjelenített ár
60 napos	1	0%	12 990 Ft	—	12 990 Ft
120 napos	2	10%	11 691 Ft	12 990 Ft	23 382 Ft
180 napos	3	15%	11 042 Ft	12 990 Ft	33 126 Ft
240 napos	4	20%	10 392 Ft	12 990 Ft	41 568 Ft

🧮

Képlet: Ár = Alapár × (1 − kedvezmény%)
Pl. 10% kedvezmény: 12 990 × 0,90 = 11 691 Ft

Készletkezelés

Beállítás	Érték
Track quantity	Be
Continue selling when out of stock	Ki
Kezdeti készlet	Tényleges dobozszám

ℹ️

A készlet dobozokban értendő. Ha valaki egy 240 napos / 10 kg alatti csomagot rendel, a rendszer automatikusan 4 dobozt von le a készletből.

Ingyenes kiszállítás küszöb

A webshopban jelenleg 32 000 Ft feletti rendeléseknél ingyenes a kiszállítás — ez automatikusan érvényes minden termékre. Az "Ingyenes kiszállítás" badge megjelenítését a metafieldek vezérlik (következő lépés).

🏷️

Variáns metafieldek

Két metafield értéket kell megadni minden variánsnál

A két metafield

Metafield	Típus	Szerepe
`custom.box_count`	Egész szám	Hány dobozt tartalmaz a csomag — ez alapján számol a JS és vonja le a készletet
`custom.free_shipping`	Igen/Nem	Megjelenik-e az "Ingyenes kiszállítás" badge a kártyán

Hol kell kitölteni

Shopify Admin → Termékek → [Termék] → Változatok → [Variáns] → Metafieldek

Minden variánsnál egyenként kell kitölteni a termék szerkesztő alján.

⚠️

Ha a custom.box_count üres, a szekció nem tudja kiszámítani az árat és a kosárba rakandó mennyiséget!

Példa értékek — Ultrabiotikum

Kutyasúly	Csomag	box_count	free_shipping
10 kg alatt	60 napos	1	Nem
10 kg alatt	120 napos	2	Nem
10 kg alatt	180 napos	3	Igen
10 kg alatt	240 napos	4	Igen
10-20 kg	30 napos	1	Nem
10-20 kg	60 napos	2	Nem
10-20 kg	90 napos	3	Igen
10-20 kg	120 napos	4	Igen
10-20 kg	150 napos	5	Igen
20-30 kg	40 napos	2	Nem
20-30 kg	60 napos	3	Igen
20-30 kg	80 napos	4	Igen
20-30 kg	100 napos	5	Igen
30 kg felett	30 napos	2	Nem
30 kg felett	60 napos	4	Igen
30 kg felett	90 napos	6	Igen

📄

Product template beállítása

Template létrehozása és hozzárendelése a termékhez

Meglévő template használata

Az ultrabiotic-powder-new template már létezik a store-ban és tartalmazza a Petrevit Offer blokkot. Új terméknél ezt kell hozzárendelni.

Shopify Admin → Termékek → [Termék] → jobb oldali panel → Temasablon

Válaszd ki: ultrabiotic-powder-new

Új template létrehozása (ha szükséges)

Ha teljesen új template kell egy másik terméktípushoz, a fejlesztőnek kell létrehozni a Shopify CLI segítségével. A template tartalmazza:

A main-product szekciót
A szokásos blokkokat (cím, leírás, ikonok, accordion stb.)
A Petrevit Offer blokkot — buy_buttons blokk nélkül

ℹ️

A buy_buttons blokkot szándékosan kihagyjuk — a "Kosárba rakom" gomb a Petrevit Offer blokkban van beépítve.

Termék aktiválása

Miután minden beállítás kész és a tesztelés sikeres, állítsd a termék státuszát Aktívra a jobb oldali panelben.

✅

Draft státuszban a termék nem látható a webshopban — biztonságosan tesztelheted éles környezetben.

🎨

Theme Editor beállítások

A Petrevit Offer blokk teljes testreszabása

Navigálj a Theme Editorba

Shopify Admin → Online áruház → Témák → Testreszabás

A tetején válaszd ki a termék URL-jét, majd a bal oldali panelben kattints a Petrevit Offer blokkra.

1. Súlyválasztó felirat

A "HÁNY KILOGRAMM A KUTYUSOD?" szöveg és stílusának beállítása.

TEXT Felirat szöveg

A súlyválasztó feletti cím szövege. Default: "HÁNY KILOGRAMM A KUTYUSOD?"

RANGE Betűméret

10–32px. Default: 16px

SELECT Betűvastagság

Normal / Medium / Semibold / Bold / Extrabold. Default: Bold

COLOR Szín

Default: #1a1a1a

CHECKBOX Nagybetűs

Uppercase megjelenítés. Default: Be

CHECKBOX Dőlt

Italic stílus. Default: Ki

2. Csomagválasztó felirat

A "VÁLASSZ CSOMAGOT" szöveg és stílusának beállítása — ugyanazok a lehetőségek mint a súlyválasztónál.

TEXT Felirat szöveg

Default: "VÁLASSZ CSOMAGOT"

RANGE Betűméret

10–32px. Default: 14px

SELECT Betűvastagság

Default: Bold

COLOR Szín

Default: #1a1a1a

CHECKBOX Nagybetűs

Default: Be

CHECKBOX Dőlt

Default: Ki

3. Súly pill gombok

A súlykategóriákat megjelenítő pill gombok stílusai — normál és aktív állapot külön.

RANGE Betűméret

10–20px. Default: 13px

SELECT Betűvastagság

Default: Medium

COLOR Szöveg szín

Normál állapot. Default: #1a1a1a

COLOR Háttérszín

Normál állapot. Default: #ffffff

COLOR Border szín

Normál állapot. Default: #cccccc

RANGE Lekerekítés

0–30px. Default: 20px

COLOR Aktív szöveg szín

Default: #ffffff

COLOR Aktív háttérszín

Default: #2d4a35

COLOR Aktív border szín

Default: #2d4a35

4. Tier kártya

A csomagkártyák megjelenése — normál és kiválasztott állapot, szövegméretek.

COLOR Háttérszín

Default: #ffffff

COLOR Border szín

Default: #e0e0e0

RANGE Lekerekítés

0–20px. Default: 8px

COLOR Kiválasztott háttér

Default: #f0f7f0

COLOR Kiválasztott border

Default: #7ab648

RANGE Cím betűméret

12–24px. Default: 16px (pl. "240 NAPOS")

SELECT Cím betűvastagság

Default: Extrabold

RANGE Dobozszám méret

10–18px. Default: 12px (pl. "4x Ultrabiotikum")

RANGE Ár betűméret

12–28px. Default: 16px

SELECT Ár betűvastagság

Default: Bold

5. Badge-ek

Az akció és ingyenes kiszállítás badge-ek külön testreszabhatók.

COLOR Akció badge háttér

A "-10%" stílusú kedvezmény badge. Default: #4a7c59

RANGE Akció badge lekerekítés

0–20px. Default: 20px

COLOR Kiszállítás badge háttér

Az "Ingyenes kiszállítás" badge. Default: #4a7c59

RANGE Kiszállítás badge alsó lekerekítés

Csak az alsó két sarok. 0–20px. Default: 8px

6. Kosárba gomb

TEXT Gomb felirat

Default: "KOSÁRBA RAKOM"

RANGE Betűméret

12–24px. Default: 15px

SELECT Betűvastagság

Default: Bold

COLOR Szöveg szín

Default: #ffffff

COLOR Háttérszín

Default: #4a7c59

COLOR Border szín

Default: transparent

RANGE Lekerekítés

0–30px. Default: 8px

Egyéb szövegek

TEXT Ingyenes kiszállítás felirat

A badge szövege. Default: "Ingyenes kiszállítás"

RANGE Padding bottom

Szekció alatti üres hely. Default: 20px

✅

Összefoglaló checklist

Minden lépés egyben — élesítés előtt pipáld végig

Termék & variánsok

Termék létrehozva, cím és leírás kitöltve
Option1 neve: Kutyasúly, értékek megadva
Option2 neve: Csomag, értékek megadva
Variáns képek feltöltve és hozzárendelve (opcionális)
Minden variánsnál Track quantity: Be
Kezdeti készlet (dobozszám) megadva

Árak

Minden variánsnál Price = 1 doboz kedvezményes ára
Kedvezményes variánsoknál Compare at price = 1 doboz eredeti ára
0% kedvezménynél Compare at price üres

Metafieldek

custom.box_count kitöltve minden variánsnál
custom.free_shipping kitöltve minden variánsnál

Template & megjelenés

Temasablon: ultrabiotic-powder-new hozzárendelve
Theme Editorban Petrevit Offer blokkon termék kiválasztva
Beállítások (szövegek, színek) testreszabva ha szükséges

Tesztelés

Súlyváltás: a helyes csomagok jelennek meg
Árak és kedvezmény badge-ek helyesek
Ingyenes kiszállítás badge a megfelelő kártyákon
Kosárba gomb működik, helyes dobozszám kerül be
Kosárban "Csomag módosítása" drawer működik
Checkout összeg helyes

Aktiválás

Termék státusza: Aktív
Termék kollekciókhoz adva (ha szükséges)

🏗️

Hogyan működik a szekció

Technikai összefoglaló

        Súlyválasztó pill gombok → Kutyasúly (Option1) egyedi értékei

        Tier kártyák → Azon variánsok, ahol Option1 == kiválasztott súly

          • Cím: Option2 értéke (pl. "240 napos")

          • Dobozszám: custom.box_count metafield

          • Ár: variant.price × box_count (megjelenítve)

          • Áthúzott ár: variant.compare_at_price × box_count

          • Ingyenes kiszállítás badge: custom.free_shipping metafield

        Kosárba gomb → /cart/add.js → variant ID + quantity: box_count

        Kosár oldal → Quantity helyett "Csomag módosítása" drawer

Petrevit OfferTeljes beállítási útmutató

Termék létrehozása

Navigálj az Adminban

Opcióstruktúra — kötelező!

Variáns képek (opcionális)

Variánsok & Árak

Az árazás logikája

Példa — 12 990 Ft alapár esetén

Készletkezelés

Ingyenes kiszállítás küszöb

Variáns metafieldek

A két metafield

Hol kell kitölteni

Példa értékek — Ultrabiotikum

Product template beállítása

Meglévő template használata

Új template létrehozása (ha szükséges)

Termék aktiválása

Theme Editor beállítások

Navigálj a Theme Editorba

1. Súlyválasztó felirat

TEXT Felirat szöveg

RANGE Betűméret

SELECT Betűvastagság

COLOR Szín

CHECKBOX Nagybetűs

CHECKBOX Dőlt

2. Csomagválasztó felirat

TEXT Felirat szöveg

RANGE Betűméret

SELECT Betűvastagság

COLOR Szín

CHECKBOX Nagybetűs

CHECKBOX Dőlt

3. Súly pill gombok

RANGE Betűméret

SELECT Betűvastagság

COLOR Szöveg szín

COLOR Háttérszín

COLOR Border szín

RANGE Lekerekítés

COLOR Aktív szöveg szín

COLOR Aktív háttérszín

COLOR Aktív border szín

4. Tier kártya

COLOR Háttérszín

COLOR Border szín

RANGE Lekerekítés

COLOR Kiválasztott háttér

COLOR Kiválasztott border

RANGE Cím betűméret

SELECT Cím betűvastagság

RANGE Dobozszám méret

RANGE Ár betűméret

SELECT Ár betűvastagság

5. Badge-ek

COLOR Akció badge háttér

RANGE Akció badge lekerekítés

COLOR Kiszállítás badge háttér

RANGE Kiszállítás badge alsó lekerekítés

6. Kosárba gomb

TEXT Gomb felirat

RANGE Betűméret

SELECT Betűvastagság

COLOR Szöveg szín

COLOR Háttérszín

COLOR Border szín

RANGE Lekerekítés

Egyéb szövegek

TEXT Ingyenes kiszállítás felirat

RANGE Padding bottom

Összefoglaló checklist

Termék & variánsok

Árak

Metafieldek

Template & megjelenés

Tesztelés

Aktiválás

Hogyan működik a szekció

Petrevit Offer
Teljes beállítási útmutató