Ana içeriğe geç

Shopify - PDP Şablonunu Test Et

Son güncelleme: 22 Nis 20261 dk okuma süresi
İçindekiler

Kısaca​

Varify ile Shopify mağazan için alternatif PDP şablonlarını kolayca test edebilirsin. Bunun için önce istediğin tüm özelleştirmelerle yeni bir PDP şablonu oluştur. Yeni bir A/B testi oluştur ve bu kılavuzdaki JavaScript'i ekle. Ürünlerde veya Shopify ayarlarında herhangi bir değişiklik yapılmasına gerek yoktur.

Yeni şablon oluştur​

Öncelikle ürün detay sayfanız (PDP) için yeni bir şablon oluşturun. Bu, alternatif düzenleri, uygulama widget'larını veya diğer öğeleri test etmenizi sağlar.

Sadece birkaç adımda yeni bir şablon nasıl oluşturulur:

  1. Online Store > Themes > Customize bölümüne gidin
  2. Varsayılan olarak "Home page" olarak ayarlanmış üstteki açılır menüye tıklayın
  3. Açılır menüden Products alanını seçin
  4. Yeni PDP şablonunuzu oluşturmak için Create Template'e tıklayın
Üç adımda Shopify tema düzenleyicisi: sayfa açılır menüsünü açın, "Products" seçeneğini seçin, ardından "Create template"e tıklayın
  1. Yeni şablona bir ad ver, örneğin: new-pdp.
  2. „Based on“ altında, şu anda kullandığın şablonu seç—bu, yeni şablonun başlangıç noktası olarak kullanılacak.
„Default product“ temel alınarak „new-pdp“ adıyla oluşturulan Shopify „Create a template“ diyaloğu
  1. Şimdi yeni şablonda istediğin tüm değişiklikleri yap:
  • Bir Shopify uygulamasının widget'larını test et
  • Yeni bloklar, öğeler veya metinler oluştur
  • Mevcut blokların sırasını değiştir
  • Renk şemasını özelleştir
  • ve daha fazlası
  1. Ardından PDP şablonunun yeni sürümünü kaydet. Ürünlerin hâlâ orijinal şablona ayarlı olması nedeniyle henüz görünür değildir.

Varify'da yeni bir deney oluştur​

  1. Ürün sayfalarından birinde yeni bir deney oluştur
  2. Sağ üstteki kod simgesine tıkla
  3. "Add JavaScript"i seç
  4. Aşağıdaki JavaScript'i ekle
    1. satırda, pdpVariationName sabitinin değerini 'new-pdp' olarak değiştir ve bunu yeni şablonunun adıyla değiştir
    1. ve 4. satırlarda, deney ve varyant ID'lerini deneyin ID'leriyle uygun şekilde değiştir. (Önemli: ID'lerin oluşturulabilmesi için testi önce bir kez kaydetmen gerekir. Ardından Edit üzerinden tekrar kaydedip ID'leri değiştirebilirsin.)
  7. Deneyi kaydet
(function () {
  // ─── CONFIG ───
  const experimentId = 32898;
  const variationId = 49279;
  const viewValue = 'new-pdp'; //"view"-value (z.B. Template-Name)

  // ─── HELPERS ───
  if (window.varify.helpers.isInEditor()) {
    return
  }

  // ─── LOGIC ───
  const params = new URLSearchParams(window.location.search);
  const paramAsBase64 = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');

  const needsView = params.get('view') !== String(viewValue);
  const needsVa = params.get('va-red') !== paramAsBase64;

  if (needsView || needsVa) {
    params.set('view', String(viewValue));
    params.set('va-red', paramAsBase64);

    const newUrl =
      `${window.location.origin}${window.location.pathname}?${params.toString()}${window.location.hash || ''}`;

    window.location.href = newUrl;
  }
})();

Deney hedeflemesini yapılandır ve başlat​

Deney tüm ürün sayfalarında gösterilmelidir. Bu nedenle sayfa hedeflemesinde küçük bir ayarlama gereklidir.

  1. Deneyin sayfa hedeflemesini aç
  2. Hedeflemeyi, eşleşme türü "Contains" olacak şekilde /products/ olarak ayarla
  3. Ürün detay sayfaların URL üzerinden net bir şekilde tanımlanamıyorsa, yalnızca PDP'lerinde görünen benzersiz bir CSS seçici de kullanabilirsin. Bunun için genellikle "Buybox" seçici uygundur.
  4. Deneyi başlat
"PDP Template test" deneyinin sayfa hedeflemesi: "Contains" URL koşulu "/products/" ile eşleşir
Bu sayfada