Shopify Horizon témán Androidon megbénul a Facebook-forgalmad? Itt a kétfájlos javítás

Ha Horizon témán fut a webshopod és Facebook vagy Instagram hirdetéseket tolsz rá, lehet hogy az Android-felhasználóid most semmit nem tudnak nálad megvenni. Az oldal betölt, de a kattintásokra nem reagál: se menü, se termék, se kosár. A hiba a View Transitions API és a Facebook/Instagram beépített Android-böngészőjének összeakadásából jön, és két fájl egyetlen-egy soros átírásával elhárítható. Hivatalos Shopify-patch egyelőre nincs, addig ez a workaround tartja életben a hirdetési forgalmadat.

Erre a hibára a totalstudio.hu csapata bukkant rá, ők dokumentálták a megoldást is, a weboldalon megjelent cikk alapján szedtem össze neked, mi történik és mit kell csinálni.

Honnan jött ez elő?

A TotalStudio-nál azzal kezdődött, hogy több vásárló jelezte: a Facebook- és Instagram-hirdetésekre kattintva nem tudják leadni a rendelést. Nem lassú volt az oldal, nem hibát dobott. Egyszerűen nem lehetett rajta kattintani.

Mivel ők maguk több mint 50 Horizon-alapú boltot építettek és tartanak karban, gyorsan kiderült, hogy ez nem egy bolt egyedi bénázása. Az összes érintett store hirdetése rosszul teljesített ugyanúgy. A Shopify supportjával együtt, egy több mint egyórás közös hibakeresés végén jutottak el a tényleges okig.

És itt jön a kellemetlen rész. Az ok nem egy elrontott egyedi kód, nem egy rosszul telepített app. Az ok maga a Horizon téma alapértelmezett beállítása. Tehát friss telepítésen, nulla módosítással is ott a hiba.

Mi ez a hiba pontosan?

A Horizon a modern böngészőfunkciók közé tartozó View Transitions API-t használja. Ez teszi lehetővé, hogy az oldalak közötti váltás ne egy hirtelen villanással történjen, hanem szép, animált átmenettel. Asztali Chrome-ban, mobilos Chrome-ban kiválóan működik, és tényleg jobb élményt ad.

A baj ott kezdődik, hogy a Facebook és az Instagram Android-alkalmazása nem a telefon Chrome böngészőjét nyitja meg, amikor egy linkre kattintasz az appon belül. Saját, beépített WebView motort indít. Ez a WebView elvileg támogatja a View Transitions API-t. A gyakorlatban viszont félig és hibásan.

Konkrétan ez történik: a felhasználó rákattint egy linkre, a WebView elindítja az átmeneti animációt, de soha nem fejezi be. Az oldal beragad egy köztes állapotba. A tartalom látszik, de minden kattintás- és navigációs esemény le van tiltva, mintha az átmenet még mindig zajlana. Az oldal él, csak épp nem hajlandó reagálni semmire.

Ez magyarázza azt a fura jelenséget is, hogy ha kiváltasz az appból egy másik ablakra, majd visszatérsz, az első kattintás még megy, utána viszont megint lefagy. Az app háttérbe küldése egy gyors resetet kényszerít a WebView-ra, ami egy pillanatra feloldja a zárolt állapotot. Aztán a következő kattintásnál minden kezdődik elölről.

Téged is érint? Tipikus tünetek

A hiba kizárólag Androidon jön elő. Asztali böngészőben, mobilos Chrome-ban és iOS-en a Horizon szépen működik. A Total Studio tesztjeiben Samsung Galaxy S23, Galaxy S25 és Google Pixel 8 eszközökön reprodukálták. A Prestige és a Dawn témán nem jött elő, csak a Horizonon.

Amit a vásárlók tapasztalnak:

• Az oldal betölt, de a menüpontokra, termékkártyákra kattintva nem történik semmi
• Termékre, kategóriára kattintva nem nyílik meg semmi
• Kosárba helyezés és rendelésleadás lehetetlen
• Ablakváltás után az első kattintás még reagál, utána újra lefagy

A reprodukálás egyszerű. Nyisd meg a Facebook vagy Instagram appot egy Android telefonon, navigálj a boltod URL-jére (például egy saját posztban megosztott linkre kattintva), és próbálj meg egy termékre vagy menüpontra koppintani. Ha nem reagál, érintett vagy.

A javítás: két fájl, két apró módosítás

Mielőtt nekiállsz: ez egy ideiglenes workaround, amíg a Shopify ki nem ad hivatalos javítást. Viszont azonnal működik, cache-ürítés nélkül is, és semmi mást nem ront el. A kódszerkesztőt itt éred el:

Shopify Admin → Online Store → Themes → a Horizon melletti „..." → Edit code

Első fájl: assets/base.css

Nyisd meg az assets/base.css fájlt, és keresd meg ezt a blokkot (nagyjából a 226. sor környékén):

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

Írd át a navigation értékét auto-ról none-ra:

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: none;
  }
}

Második fájl: layout/meta-tags.liquid

Nyisd meg a layout/meta-tags.liquid fájlt, és keresd meg ezt a meta taget:

<meta
  name="view-transition"
  content="same-origin"
>

Tedd az egészet megjegyzésbe (kommenteld ki):

{% comment %}
<meta
  name="view-transition"
  content="same-origin"
>
{% endcomment %}

Ennyi. Mentés után Facebook vagy Instagram appból, Android eszközről teszteld. A navigációnak azonnal mennie kell. A legegyszerűbb tesztmenet: menj fel a boltod Facebook-oldalára Android telefonon a Facebook appban, koppints a „Links” mezőben lévő weboldal-címedre, és ha jól csináltad, az appon belüli böngészőben megnyíló shopon végig tudsz vásárolni.

Miért ekkora ügy két ilyen apróság?

Itt érdemes megállni egy pillanatra. A View Transitions API egy viszonylag új webes szabvány, aminek az egyetlen célja, hogy szebb legyen az oldalak közötti váltás. Egy esztétikai réteg. Nem méri a konverziót, nem gyorsítja a betöltést, nem tesz semmit, ami a vásárlás szempontjából bármit jelentene.

És pont ez a réteg, ami csak szépíteni akar, az, ami Androidon teljesen megöli a vásárlás lehetőségét. A funkció, amit azért tettek bele, hogy jobb legyen az élmény, a hirdetési forgalmad legnagyobb részén egyszerűen elveszi a vásárlást. A díszítés viszi el a tartalmat.

Az arány itt a lényeg. A Facebook és Instagram hirdetésekről érkező mobil forgalom túlnyomó része Androidon jön. Ha a boltod ott nem kattintható, akkor a hirdetési büdzséd nagyobbik felét gyakorlatilag az ablakon dobod ki, miközben a Google Analytics-ben minden rendben néz ki, hiszen az oldal betöltődik. Csak épp senki nem tud venni.

Mikor jön a hivatalos javítás?

A Shopify fejlesztői csapatának be van jelentve a hiba, bekerült a hibajelentési rendszerükbe. Hogy ne csak a Total Studio szavát kelljen elhinned: a Shopify hivatalos theme store értékelései között több vásárló is jelezte ugyanezt. Az egyik 2026 júniusi értékelés szó szerint arról ír, hogy a téma a mobil hirdetési forgalom számára használhatatlan, az első oldalbetöltés után teljesen lefagy a Facebook és Instagram Android beépített böngészőjében, és ez a teljes hirdetési költés elvesztését jelenti. A Shopify válasza erre annyi volt, hogy tudnak a hibáról, a fejlesztők dolgoznak rajta, és érdemes a supporthoz fordulni egy esetleges egyedi workaroundért.

Konkrét dátum tehát nincs. Egy közelgő Horizon verziófrissítésben várható a javítás, de hogy az mikor jön, azt jelenleg senki nem tudja megmondani. Addig a fenti kétfájlos módosítás az, ami a boltodat működőképesen tartja.

A helyzet egyébként árulkodó. Egy ingyenes, mindenki által használható alaptéma alapértelmezett beállítása dönti romba a hirdetésből érkező vásárlók felét, hetekig, hivatalos javítás nélkül. A Horizont a Shopify a zászlóshajó-témájaként pozicionálja. Egy zászlóshajó-témánál azért nem az lenne az alapelvárás, hogy a fizetős hirdetési forgalmat fel kelljen áldozni egy átmeneti animáció oltárán.

GYIK

Minden Horizon verziót érint a hiba? A Total Studio tapasztalata szerint igen, beleértve a jelenlegi legújabb kiadást is. A Horizon-család összes témája ugyanazon a kódbázison fut, így ha bármelyik verziót használod, valószínűleg érintett vagy. Ellenőrizni a fenti reprodukálási lépésekkel tudod.

Elronthatok valamit ezzel a módosítással? A módosítás mindössze annyit tesz, hogy kikapcsolja az oldalak közötti animált átmenetet. Az oldal ettől nem lesz csúnyább vagy lassabb, csak a váltás lesz a régi, hirtelen módon, animáció nélkül. Funkcionálisan semmi nem sérül. Asztali és iOS felhasználók gyakorlatilag észre sem veszik.

Mi lesz, ha kijön a hivatalos Shopify-javítás? Amikor megjelenik a patch, a témafrissítés felülírhatja a kézi módosításodat. Érdemes a frissítés után újra leellenőrizni, hogy a hivatalos javítás tényleg megoldotta-e a problémát, és ha igen, vissza lehet állítani az eredeti View Transitions működést. Addig viszont hagyd a workaroundot a helyén.

Miért csak Androidon jön elő, iOS-en miért nem? Mert a Facebook és Instagram Android-appja egy saját WebView motort használ a beépített böngészőhöz, ami hibásan kezeli a View Transitions API-t. Az iOS más böngészőmotorra épül, ott ez a konkrét összeakadás nem jelentkezik.

Honnan tudom, hogy tényleg ez a hiba van nálam, és nem valami más? A kulcs a tünet-kombináció: az oldal betölt, de a kattintásokra nem reagál, kizárólag a Facebook/Instagram Android beépített böngészőjében, miközben Chrome-ban és asztalon minden megy. Ha ez a kép, akkor szinte biztosan a View Transitions bug az ok.

Hasznos linkek / Forrás

• Az eredeti, részletes feltárás és javítás a Total Studio-tól: Shopify Horizon témát használsz? Azonnal javítsd ezt a kritikus hibát
• A Horizon téma hivatalos Shopify theme store oldala és értékelései, ahol több merchant is jelezte ugyanezt a hibát: Horizon a Shopify Theme Store-ban

Szójegyzék

• View Transitions API: modern böngészőfunkció, ami animált, sima átmenetet ad az oldalak közötti váltáshoz a hirtelen villanás helyett.
• WebView: az alkalmazásokba beépített böngészőmotor. A Facebook és Instagram az appon belüli linkeket nem a rendszer böngészőjében, hanem ebben nyitja meg.
• Horizon: a Shopify legújabb, ingyenes alaptémája, a Dawn utódjaként pozicionálva.
• Liquid: a Shopify sablonnyelve, amiben a témafájlok (például a meta-tags.liquid) íródnak.