Shopify’da Tek Bir Sayfaya Özel Kod Eklemek Neden Bu Kadar Zor? (Ve En Basit Çözüm)

Eğer WordPress veya geleneksel bir CMS (İçerik Yönetim Sistemi) altyapısından Shopify dünyasına adım attıysanız, muhtemelen çok erken aşamada yaşayacağınız meşhur bir “aydınlanma” (veya cinnet) anı vardır: Sadece tek bir sayfaya özel bir kod eklemek.

Senaryo basittir: İletişim sayfanıza özel bir harita scripti, hakkımızda sayfasına özel bir CSS stili veya sadece tek bir landing page’e özel bir widget eklemek istersiniz. Tema özelleştiriciyi açar, heyecanla bir “Custom Liquid” bloğu ekler, kodunuzu yapıştırır ve kaydedersiniz.

Sonra ana sayfaya veya başka bir ürüne bakarsınız ki… O da ne? Eklediğiniz kod tüm siteye virüs gibi yayılmış!

İşte tam o an, ekran karşısında “Ne saçma bir sistem!” dediğiniz andır. Gelin bu sistemin neden böyle olduğuna, bizi zorladığı dolambaçlı yollara ve en sonunda keşfettiğimiz “en basit, en ilkel ama en hayat kurtaran” çözüme birlikte bakalım.

Büyük Resim: Shopify Neden Çileden Çıkarıyor?

Aslında Shopify bunu bize işkence etmek için yapmıyor. Sistemin arkasında katı bir “Şablon (Template)” mimarisi var. Shopify’ın mantığı şudur:

“Senin 10 bin tane ürünün veya 50 tane sayfan olabilir. Ben sana tek bir ‘Sayfa Şablonu’ veririm. Sen buna bir şey eklersen, hepsinde otomatik güncellenir.”

Evet, büyük ölçekli operasyonlar için harika bir otomasyon. Ancak iş tek bir sayfayı özelleştirmeye geldiğinde, bu devasa çarklar ayağınıza dolanmaya başlar.

Shopify’ın bu durumu çözmek için bize sunduğu resmi yollar ise tam bir bürokrasi zinciridir:

• Dinamik Kaynaklar ve Meta Alanlar (Metafields): Önce arka planda gizli bir veri kutusu tanımla, sonra sayfanın içine git o kutuyu doldur, sonra temaya dönüp o kutuyu Liquid bloğuna bağla… Tam bir dolambaçlı yol!
• Liquid Koşulları: Kodun başına {% if page.handle == 'sayfa-adi' %} yazarak sistemi kandırmaya çalışmak. Fena yöntem değil ama hala tema kodlarıyla uğraşıyorsunuz.

Peki, tüm bu karmaşayı çöpe atıp işi saniyeler içinde halletmenin yolu yok mu? Var. Hem de sistemin açığından değil, en eski ve en sade özelliğinden yararlanarak.

Ve Kurtarıcı Sahneye Çıkıyor: Eski Usul HTML Editörü

Modern tema editörlerinin karmaşık blokları arasında kaybolmak yerine, yönümüzü Shopify’ın yıllardır orada duran ama çoğunlukla gözden kaçan Zengin Metin Editörüne çeviriyoruz.

Eğer bir koda “Bunu sadece bu sayfaya bas ve başka hiçbir şeye karışma” talimatı vermek istiyorsanız, en temiz yol kodu doğrudan o sayfanın veritabanı içeriğine gömmektir.

Adım Adım En Basit Çözüm:

1. Shopify panelinizden Online Mağaza > Sayfalar alanına gidin ve o özel kodu eklemek istediğiniz sayfayı açın.
2. Metin yazdığınız editörün sağ üst köşesinde yer alan <> (HTML’yi Göster) butonuna tıklayın. Ekran bir anda kod editörüne dönüşecek.
3. Eklemek istediğiniz kodu (Script, CSS veya HTML) sayfanın en altına veya en üstüne yapıştırın.
4. Kaydet butonuna basın.

HTML

<!-- Örneğin sadece bu sayfada çalışacak bir stil veya script -->
<style>
  .ozel-baslik { color: #ff5722; font-size: 24px; }
</style>

<script>
  console.log("Bu kod sadece bu sayfada yüklenir, diğer sayfaların ruhu bile duymaz!");
</script>

Neden En İyi Çözüm Bu?

• Sıfır Kurulum: Yeni şablonlar üretmekle, meta alanları birbirine bağlamakla vakit kaybetmezsiniz.
• Tam İzolasyon: Kod, sayfanın kendi içeriğinin bir parçası haline gelir. Bu sayede sitenin diğer hiçbir sayfasını, ürününü veya tasarım şablonunu etkilemesi imkansızdır.
• Geliştirici Dostu: Kodun nerede olduğunu bilirsiniz; sayfa silinirse kod gider, sayfa kalırsa kod sadece orada çalışır.

Bazen modern sistemlerin bize sunduğu “gelişmiş” çözümler, aslında basit bir problemi devasa bir operasyona dönüştürebilir. Shopify’ın katı şablon mimarisinin etrafından dolanmak için sayfaların HTML editörünü kullanmak, web dünyasında bazen en ilkel yöntemin en akıllıca çözüm olduğunun harika bir kanıtı.