Érintett verzió: Horizon 4.0.0 (és minden korábbi verzió) | Platform: Shopify | Státusz: ⚠️ Nincs hivatalos javítás – manuális módosítás szükséges
Mi történt?
Több vásárló jelezte, hogy Facebook- és Instagram-hirdetésekre kattintva nem tudják leadni rendeléseiket az érintett webáruházakban. A panaszok alapján megkezdtük a hibakeresést, és a Shopify fejlesztői csapatával folytatott, több mint egyórás közös egyeztetés eredményeként sikerült azonosítani és javítani a problémát.
A Shopify Horizon témájának aktuális, 4.0.0-s verziója egy kritikus hibát tartalmaz, amely a Facebook és Instagram alkalmazások beépített WebView böngészőjében teljesen használhatatlanná teszi az érintett webáruházakat.
Milyen tüneteket tapasztaltunk?
- A navigáció nem működött – menüelemekre, termékkártyákra kattintva semmi sem történt
- Az oldal látszólag betöltött, de interakció nem volt lehetséges
- Ablakváltás után visszatérve az oldalra az első kattintás még "reagált", utána ismét lefagyott
- Termékekre, kategóriákra kattintva nem nyílt meg semmi
- Kosárba helyezés és rendelésleadás nem volt lehetséges
A hiba kizárólag Android eszközökön jelentkezik. Tesztelt és érintett eszközök: Samsung Galaxy S23, Galaxy S25, Google Pixel 8.
Asztali böngészőben, mobilos Chrome-ban, valamint iOS eszközökön a téma rendesen működik. A hibát a Prestige és Dawn témákban nem tudtuk reprodukálni – az kizárólag a Horizon témára jellemző.
⚠️ Ha Facebook vagy Instagram hirdetéseket futtatsz Horizon témán alapuló webáruházhoz, a hirdetési forgalmad Android felhasználók számára jelenleg gyakorlatilag elvész, ha nem cselekszel azonnal.
Hogyan találtuk meg a hibát?
A vásárlói visszajelzések alapján többeszközös-tesztelésbe kezdtünk. Mivel mi magunk több mint 50 Horizon-alapú webáruházat építettünk és tartunk karban, a probléma skálája azonnal nyilvánvaló volt: az összes érintett store hirdetései rosszul teljesítettek, a valódi ok pedig a téma kódjában keresendő.
A Shopify support csapatával felvettük a kapcsolatot, és a technikai specialisták, Kristopher és Naitikkumar segítségével közösen elvégeztük a hibakeresést. Az egyeztetés során megállapítottuk, hogy a hiba a CSS View Transitions API és a kapcsolódó HTML meta tag nem megfelelő implementációjából ered.
A View Transitions API egy modern böngészőfunkció, amely sima oldalátmeneteket tesz lehetővé. A Facebook és Instagram Android-alkalmazásainak beépített WebView motorja azonban ezt nem kezeli megfelelően, és ennek következtében az oldal navigációja teljesen megbénul.
A javítás: két fájl módosítása szükséges
Figyelem az alábbiakban található megoldás egy ideiglenes workaround addig, amíg a Shopify nem ad ki hivatalos javítást a Horizon témához. A javítás elvégzése után az érintett store-ok azonnal működőképessé válnak.
Hogyan nyisd meg a kódszerkesztőt?
Shopify Admin → Online Store → Themes → Horizon melletti „..." → Edit code
Lépés 1
Keresd meg a assets/base.css ( fájlt nyisd meg és menj a 226. sor körülre
Keresd meg az alábbi blokkot:
/* view transitions */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}
Módosítsd a navigation értékét auto-ról none-ra:
/* view transitions */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: none;
}
Screenshot by Naitikkumar (Shopify)
Lépés 2
Keresd meg a layout/meta-tags.liquid fájlt
Keresd meg az alábbi meta taget:
<meta
name="view-transition"
content="same-origin"
>
Tedd megjegyzésbe (comment-eld ki) az egész blokkot:
{% comment %}
<meta
name="view-transition"
content="same-origin"
>
{% endcomment %}
Screenshot by Naitikkumar (Shopify)
Ennyi az egész!
Mentés és tesztelés
Mindkét módosítás mentése után Facebook vagy Instagram alkalmazásból, Android eszközről teszteld a webáruházat. A navigációnak azonnal, cache-ürítés nélkül is működnie kell – de a biztonság kedvéért érdemes a böngésző gyorsítótárát is törölni.
A tesztelés legegyszerűbb módja
- Felmész a webshopod Facebook oldalára Android telefonon a Facebook alkalmazásban
- Rákattintasz a weboldal címedre, amit a "Links" mezőben találsz
- A shopod a beépített böngészőben megnyílik és ha jól csináltál mindent, akkor tudsz vásárolni.
Miért okoz ekkora problémát két kis kód?
A View Transitions API ( (@view-transition: navigation: auto + <meta name="view-transition" content="same-origin">)) egy viszonylag új webes szabvány, amelynek célja, hogy az oldalak közötti navigáció vizuálisan sima, animált átmenettel valósuljon meg – ahelyett, hogy a böngésző hirtelen, "villanással" váltana az egyik oldalról a másikra. Modern asztali böngészőkben és mobilos Chrome-ban ez kiválóan működik, és valóban szebb felhasználói élményt nyújt.
A probléma ott kezdődik, hogy a Facebook és az Instagram Android-alkalmazásai nem a rendszer beépített Chrome böngészőjét használják, hanem egy saját, beépített WebView motort nyitnak meg, amikor egy linkre kattintasz az alkalmazáson belül. Ez a WebView motor elméletileg támogatja a View Transitions API-t – de csak részben, és hibásan.
Konkrétan: amikor a felhasználó egy linkre kattint, a WebView elindítja az átmeneti animációt, de valamiért nem fejezi be. Az oldal egy köztes, "limbo" állapotban ragad – a tartalom vizuálisan látható, de az összes kattintás- és navigációs esemény le van tiltva, mintha az átmenet még mindig zajlana. Az eredmény az, amit a vásárlók is tapasztaltak: az oldal betölt, de teljesen érzéketlen minden interakcióra.
Ez magyarázza azt is, hogy miért segített az "ablak váltás" trükk ideiglenesen – az alkalmazás háttérbe küldése és visszahozása egyfajta "reset"-et kényszerített ki a WebView-n, ami pillanatnyilag feloldotta a zárolt állapotot. De a következő kattintásnál a jelenség azonnal visszatért.
Ez engem is érint?
Ha a webáruházad a Shopify Horizon témát használja bármilyen verzióban (a jelenlegi legújabb, 4.0.0-s verzió is érintett), és futnak Facebook vagy Instagram hirdetéseid, akkor igen – minden bizonnyal érintett vagy.
A hiba reprodukálása egyszerű:
- Nyisd meg a Facebook vagy Instagram alkalmazást Android eszközön
- Navigálj az áruházad URL-jére (pl. egy saját posztban megosztott linkre kattintva)
- Próbálj meg egy termékre vagy menüpontra kattintani
Ha az oldal nem reagál – érintett vagy, és el kell végezni a fenti módosítást.
Mikor jön a hivatalos javítás?
A Shopify fejlesztői csapatának már be van jelentve a hiba, és az eset bekerült a hibajelentési rendszerükbe. A javítás várhatóan egy közelgő Horizon verziófrissítésben érkezik meg – de konkrét dátum egyelőre nincs.
Addig is kövesd a Horizon téma release notes-ait, vagy Facebook oldalunkat – értesítünk, amint megjelenik a hivatalos patch.
Segítségre van szükséged?
Ha nem rendelkezel fejlesztői hozzáféréssel, vagy több store-ban is el kell végezni a módosítást, a TotalStudio csapata segít.
