Shopify duyurularında en büyük değişikliğini yapıyor - Shopify Online Mağaza 2.0, yeni altyapı, araçlar ve teknolojilerle esnek bir mağaza oluşturmanıza yardımcı olan değişikliklere atıfta bulunarak. İşte Shopify Online Mağaza 2.0'ın yeni araçları ve özellikleri:

Shopify Online Mağaza 2.0

  • Yenilenmiş Tema Mimarisi: Tüm sayfalar için bölümlerle, siz gibi tüccarlar yeni fırsatlar keşfedebilir ve müşteri deneyimlerini kişiselleştirebilir.
  • Esnek mağaza içeriği:
    • Tema uygulama uzantıları ve uygulama blokları sayesinde, birçok Shopify uygulamasını kolayca entegre edip ardında hayalet kod bırakmadan kaldırabilirsiniz.
    • Geliştirilmiş tema düzenleyici, meta değerlerini dinamik olarak eklemenizi sağlar. Bu, ürüne kolayca ek bilgiler ekleyebileceğiniz anlamına gelir. Daha fazla bilgi edinmek için Shopify 2.0 gelişmiş meta alanları blogumuza bakın.
  • Tema düzenleyicisinde geliştirmeler: Değişiklik yapmak için birden fazla katmana inmek yerine, geliştirilmiş tema düzenleyici, sayfadaki tüm içeriğin kenar çubuğunda ağaç görünümünü gösterir.
  • Yeni geliştirici araçları: GitHub entegrasyonu, yükseltilmiş Shopify CLI ve Tema Kontrol araçları sayesinde, Shopify geliştiricileriniz mağazanızın gelişimine yardımcı olabilir.
  • Yeni referans Tema: Esneklik sağlamak üzere tasarlanan ve oluşturulan Shopify Dawn teması, kaynak kodunu açıklayan ilk referans temadır. Tema hakkında daha fazla bilgi için detaylı Shopify Dawn tema incelemesi blogumuza göz atabilirsiniz.

Shopify Online Mağaza 2.0 duyurularına derinlemesine inmek için Shopify 2.0 tanıtımı blogumuza bakın.

Shopify Online Mağaza 2.0 ile başlamanıza yardımcı olacak adımlar nelerdir?


Shopify Online Store 2.0 - Tanıtım

Temayı Online Mağaza 2.0'a göç ettirmeden önce, temel geliştirici aracını seçmeniz gerekmektedir. İyileştirilmiş Shopify CLI'yı kullanmak istiyorsanız, aşağıdaki komutları takip ederek CLI'ı yüklemeniz gerekmektedir.

Windows için:

  • 1. Adım: İlk olarak, Windows için RubyInstaller kullanarak Ruby+Devkit'i yükleyin.
  • 2. Adım: RubyGems.org paket yöneticisini kullanarak Shopify CLI'ı yükleyin.
  • 3. Adım: Yeni bir terminal açın, ana dizine gidin ve 'gem install shopify-cli' komutunu çalıştırın.
  • 4. Adım: Yüklemeyi doğrulamak için 'shopify version' komutunu çalıştırmanız gerekmektedir.

macOS için:

Shopify CLI, RubyGems.org veya Homebrew aracılığıyla mevcuttur.
  • RubyGems.org kullanıyorsanız, yükleme ve doğrulama için 3. adımı ve 4. adımı takip edin.
  • Homebrew kullanıyorsanız, aşağıdaki komutları çalıştırarak indirme ve doğrulama yapın: 'brew tap shopify/shopify' ve 'brew install shopify-cli', ardından 4. adımı takip edin.

Bir Temayı Shopify Online Mağaza 2.0'ya göç etmeye yardımcı adımlar

En iyi Shopify 2.0 temalarını seçmenize ve tema mimarisini anlamanıza yardımcı olmak için bir Shopify Online Mağaza 2.0 en iyi temalar blogu ve Shopify 2.0 tema mimarisi ile ilgili blogumuzu hazırladık. Çalışacağınız temayı belirledikten sonra aşağıdaki adımları izleyin.

1. Adım: Tema Yedeklemesi

Ormanda kaybolmamak için her zaman bir yedekleme seçeneğiniz olması daha güvenlidir. Tema Geliştirme Kiti kullanıyorsanız, lütfen temayı kopyalayın ve yayımlanmamış olarak saklayın. Shopify CLI kullanarak, 'shopify theme pull' komutunu kullanarak temayı indirebilirsiniz.

2. Adım: Bölüm referanslarını belirleyin ve kaldırın

Her sayfada JSON formatında sayfa türünü çıkararak, Shopify Online Mağaza 2.0'da her sayfaya bölümlerin kullanılabilir hale getirilmesi nedeniyle temanızın Liquid şablonunu JSON şablonuna dönüştürmeye başlamanız gerekmektedir.

  • Dönüşüm yapmaya başlamak için, devam notları alarak herhangi bir {% bölüm %} etiketini kaldırmanız gerekmektedir.
  • Referansları kaldırmak için aşağıdaki adımları izlemeniz gerekmektedir:
    • Adım 1: /templates dizininde dosyayı bulun. Bizim durumumuzda, product.liquid dosyasını ele alalım.
    • Adım 2: Herhangi bir {% bölüm %} etiketini arayın ve konumlarını ve isimlerini not edin.
    • Adım 3: Etiketleri product.liquid dosyasından silin.

3. Adım: Kodu şablondan bölüme taşıma


Shopify Online Mağaza 2.0 - JSON formatı

Bölüm etiketlerini kaldırdıktan sonra, şablon kodunu nereye taşımak istediğinize karar vermeniz gerekmektedir.

  • Kodu var olan bir bölüme eklemek için,
    • Seçtiğiniz bölüm dosyasını açın
    • product.liquid dosyasından kodu kopyalayın
    • Kodu, section dosyasındaki açılış {% schema %} etiketlerinin üstüne yapıştırın.
  • Yeni bir bölüme kod eklemek için,
    • İlk olarak, /sections dizininde yeni bir dosya oluşturmanız gerekmektedir
    • Daha sonra, kalan kodu boş bölüm dosyasına kopyalayıp yapıştırın.

4. Adım: Liquid şablon dosyasını silme

Kopyalama yapıştırma işleminden sonra, aynı anda /templates dizininde product.liquid ve product.json dosyalarını bulunduramayacağınız için, product.liquid dosyasını silmeniz gerekmektedir.

5. Adım: JSON şablon dosyası oluşturma

product.liquid dosyasını sildikten sonra, yerine geçecek JSON şablonunu oluşturmak için aşağıdaki adımları izleyebilirsiniz:

  • Adım 1: Dosya oluşturma:
    • Code editor kullanıyorsanız,
      • Yeni bir şablon ekle seçeneğini seçin.
      • Oluşturulacak şablonun açılır menüsünden, ürün seçeneğini seçin.
      • Şablon türü olarak JSON'ı seçin.
    • Yerel olarak oluşturacaksanız, yeni bir JSON dosyası oluşturun (/templates dizininde product.json adında) ve kaydedin.
  • Adım 2: product.json dosyasını oluşturduktan sonra, dosyanın içine uygun türleri yerleştirin.
  • Adım 3: Dosyayı kaydedin.

6. Adım: Şablonu test etme

JSON şablonunu oluşturduktan sonra, tema düzenleyicisinden ürün sayfasına giderek 'Bölüm ekle' seçeneğini arayarak değişiklikleri kontrol edebilirsiniz.


Shopify Online Mağaza 2.0 - Bölümler


Shopify Online Store 2.0'nin esnaflara ve Shopify geliştiricilere nasıl fayda sağlayabileceğini görmek için, bu BFCM 2021'e göz atın, Shopify 2.0 BFCM faydaları blogumuza göz atın.

7. Adım: Referansları ve bölümlerin sırasını ekleyin

Eğer product.liquid şablon dosyanız ek bölümler içeriyorsa, bu referansları oluşturduğunuz product.json dosyasında tanımlayabilir ve ardından sıralarını belirleyebilirsiniz.

8. Adım (İsteğe Bağlı): Bölümlere uygulama blokları desteği ekleme


Shopify Online Mağaza 2.0 - Uygulama blokları

Güncellenmiş tema mimarisi ve uygulama bloklarıyla birlikte, gerekli şemayı ekleyerek blok içeriğini oluşturabilirsiniz.

  • Blok içeriğini oluşturmak için: Uygun türü kontrol edin ve sonra {% render block %} etiketini kullanarak bloğu oluşturun.
  • Bir uygulama bloğunu bir bölüme eklemek için: @app türündeki blokları bölümün şemasına eklemelisiniz.

9. Adım: Adımları tekrarlayın

Tüm bölümleri çevirmek için yukarıdaki 1. adımdan 7. adıma kadar olan adımları izlemeniz gerekmektedir, bu sayede temanızı Shopify Online Mağaza 2.0 ile uyumlu hale getirebilirsiniz.


Hukuki riskleri azaltın

Web erişilebilirliği için ADA düzenlemelerinin uygulanması ile, web sitenizi tamamen erişilebilir bir kullanıcı deneyimiyle uyumlu hale getirmek düşündüğünüzden daha kolay. Olanaklardan yararlanmak için HulkApps Shopify ADA Uyumluluk ve web erişilebilirlik hizmet paketi ile iletişime geçin.


Dawn Tema Shopify'i Shopify/Dawn Tema GitHub aracılığıyla nasıl yüklersiniz?

Shopify Dawn temasını Shopify/dawn tema GitHub üzerinden indiremezsiniz. Shopify Dawn temasını hızlıca indirmek için Shopify Tema Mağazasına gidip Dawn temasını aratabilirsiniz.

Shopify/dawn tema GitHub, tema kodunu oluşturmanızı ve değişiklikleri takip etmenizi sağlar. Github entegrasyonu, Shopify geliştiricilerinizin temaları düzenlerken sürüm kontrolü yapıp değişiklik öncesi önizlemeleri paylaşmalarına güvenli bir şekilde olanak tanır.

Sonuç:

Tüccarların Shopify 2.0 özelliklerinden yararlanması zorunlu değilken, Shopify Online Mağaza 2.0'ı deneyimlemenizi şiddetle tavsiye ederiz. Bu temel ötesinde büyümek için seçenekler sunar.

Eğer Shopify Dawn teması uygulamak, göç etmek veya başlamak istiyorsanız, uzman Shopify Online Mağaza 2.0 ekibimiz yeni özelliklerden, mimari tasarımlardan ve diğerlerinden faydalanmanızda size yardımcı olabilir.