Tema kodunu düzenleme

Kod düzenleyiciyle tema kodunuzu düzenleyerek online mağazanızda ayrıntılı değişiklikler yapabilirsiniz. Bir temayı oluşturan dosyaların çoğu, Shopify'ın şablon dili olan Liquid'i içerir. Tema dosyaları ayrıca HTML, CSS, JSON ve JavaScript de içerir. Bir temanın kodunu yalnızca HTML ve CSS biliyorsanız ve temel düzeyde Liquid bilgisine sahipseniz düzenleyin.

Bir temanın kodunu yalnızca satın aldıktan sonra düzenleyebilirsiniz. Buna, tema düzenleyicisindeki yapay zeka kod oluşturucuyu kullanmak da dahildir. Ücretli bir temanın deneme sürümünü kullanıyorsanız kod değişiklikleri yapabilmek için temayı satın almanız gerekir.

Kod düzenleyici, tema dosyalarınızın bir dizinini ve dosyaları görüntüleyip düzenleyeceğiniz bir alanı gösterir. Dizindeki bir dosyaya tıkladığınızda bu dosya, kod düzenleyicide açılır. Aynı anda birden fazla dosyayı açıp düzenleyebilirsiniz. Ayrıca aynı anda birden fazla dosyayı açıp inceleyebilirsiniz.

Tema kodunuzu düzenleme

Kod düzenleyiciyi kullanarak temanızın dosyalarını değiştirebilirsiniz.

Adımlar:

Değişiklikleri kaydetme

Bir dosyayı düzenlediğinizde kaydedilmemiş değişiklikleri belirtmek için sekme adının yanında bir nokta görüntülenir. Değişikliklerinizi kaydetmek için Kaydet düğmesine tıklayın. Değişikliklerinizi kaydetmek için Mac'te ⌘ + S veya Windows'ta Ctrl + S tuşlarına da basabilirsiniz.

Tema kodunu biçimlendirme

Kod girintisini düzeltmek için Mac'te ⌘ + Shift + P veya Windows'ta Ctrl + Shift + P tuşlarına basarak Komut Paleti'ni açın, format yazın ve ardından Belgeyi biçimlendir'i seçin.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Biçimlendirmek istediğiniz dosyayı açın.

4. Mac'te ⌘ + P veya Windows'ta Ctrl + P tuşlarına basın.

5. Komut paletine format yazın, ardından klavyenizde Enter tuşuna basın.

6. Dosyayı kaydedin.

Dosya değişikliklerini izleme

Değiştirilmiş bir tema dosyasını önceki bir sürüme geri yüklemek için o dosyaya ait Zaman akışı görünümünü kullanın.

Zaman akışı görünümü aynı anda yalnızca bir mevcut dosyayı geri yükler. Tüm temayı geri yüklemez ve silinen tema dosyalarını kurtaramaz. Zaman akışı geçmişi sınırlı olduğundan daha eski sürümler mevcut olmayabilir.

Geri yükleme işlemi, saklamak isteyebileceğiniz değişiklikler dahil olmak üzere tüm dosya içeriğini değiştirir. Saklamak istediğiniz herhangi bir değişiklik varsa bir dosyayı geri yüklemeden önce mevcut dosya içeriğini güvenli bir yere kopyalayın.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Gözden geçirmek veya geri yüklemek istediğiniz mevcut dosyayı açın.

4. İsteğe bağlı: Mevcut değişiklikleri saklamak istiyorsanız geri yükleme yapmadan önce geçerli dosya içeriğini güvenli bir yere kopyalayın.

5. Zaman akışı görünümünde, farklılıkları karşılaştırmak için zaman akışındaki bir kayda tıklayın.

6. Tüm dosya içeriğini seçilen önceki sürümle değiştirmek için zaman akışı kaydına sağ tıklayıp İçeriği geri yükle'yi seçin.

7. Geri Yükle'ye tıklayın.

Tema Kontrolü

Kod düzenleyici, hataların canlı temanızda ortaya çıkmasını beklemeden, kod yazılırken anında geri bildirim sunarak hataları önlemeye yardımcı olan Theme Check özelliğini içerir.

Kod düzenleyicide Theme Check, düzenlenen koddaki aşağıdaki hataları belirleyebilir:

• Dijital vitrini yavaşlatabilecek, ayrıştırıcıyı engelleyen komut dosyaları
• Eksik çeviri anahtarları veya bir yerel ayar dosyasında eşleşmeyen çeviriler gibi, çeviri dosyaları arasındaki tutarsızlıklar
• Eksik şablonlar

Hatalar, kodun altında kırmızı bir çizgiyle belirtilir. Hatayı görüntülemek için farenizi vurgulanan satırın üzerine getirin.

Kod düzenleyicide arama ve değiştirme

Kod düzenleyicide aşağıdaki yöntemlerden birini kullanarak arama yapabilirsiniz:

• Belirli bir dosyadaki kodu arama.
• Temadaki tüm dosyalardaki kodu arama.

Ayrıca, belirli bir dosyadaki kodu veya tüm tema dosyalarındaki birden çok örneği değiştirebilirsiniz. Dosya açmak için bir dosyayı ada göre de arayabilirsiniz.

Bir dosya içinde arama yapma

Belirli bir dosyadaki kodu arayabilir ve kodu değiştirebilirsiniz. Kodun her bir örneğini incelemek için ok tuşlarını kullanın.

Kodda arama yaptıktan sonra bir dosyadaki kodu değiştirebilirsiniz.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Arama yapmak istediğiniz dosyayı açın.

4. Mac'te ⌘ + F veya Windows'ta Ctrl + F tuşlarına basın.

5. Ara alanına arama teriminizi girin.

6. İsteğe bağlı: Kodu değiştirmek için aşağıdaki eylemleri tamamlayın:

• Arama modunda, simgesine tıklayın.
• Değiştir alanına, yerine geçecek kodu girin. Değiştirilecek kodun büyük/küçük harf kullanımını mevcut örnekle eşleştirmek için Büyük/küçük harf koru'ya tıklayabilirsiniz.
• Örnekleri tek tek değiştirmek için Değiştir simgesine veya tüm örnekleri tek seferde değiştirmek için Tümünü değiştir simgesine tıklayın.

Tüm dosyalarda arama yapma

Tüm tema dosyalarında arama yapmak için sol kenar çubuğundaki arama düğmesine tıklayın. Sonuçlarda arama teriminizin her bir örneği ve göründüğü dosya gösterilir.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Arama panelini açmak için simgesine tıklayın.

4. Ara alanına arama teriminizi girin.

5. İsteğe bağlı: Kodu değiştirmek için aşağıdaki eylemleri tamamlayın:

• Arama modunda, simgesine tıklayın.
• Değiştir alanına, yerine geçecek kodu girin.
• Örnekleri tek tek veya tümünü tek seferde değiştirin.

Gelişmiş arama seçenekleri

Arama sonuçlarınızı daraltmak için aşağıdaki arama seçeneklerinden birini veya birkaçını kullanın:

• Büyük/küçük harf eşleştir, büyük/küçük harf durumunu eşleştiren arama terimlerini bulur. Örneğin, ürün yazarsanız arama, "ürün" veya "Ürün" kelimelerinin geçtiği yerleri vurgular. Büyük/küçük harf eşleştir seçeneğini belirlerseniz arama yalnızca ürün kelimesinin geçtiği yerleri vurgular.
• Tam Kelimeyi Eşleştir, tam olarak kelimeyle eşleşen arama terimlerini bulur ve kısmi eşleşmeleri hariç tutar. Örneğin, ara yazarsanız arama, "ara" kelimesinin geçtiği yerleri vurgular ancak "araba" kelimesini vurgulamaz.
• Normal İfade Kullan, bir normal ifade (regex) ile eşleşen arama sonuçları bulur. Regex, metin içinde bir eşleşme deseni belirten bir karakter dizesidir.

Arama panelinde, arama sonuçlarına dahil edilecek veya sonuçlardan hariç tutulacak dosyaları ve klasörleri de seçebilirsiniz.

Gelişmiş menüyü açmak için simgesine tıklayın. dahil edilecek dosyalar veya hariç tutulacak dosyalar alanlarına herhangi bir dosya veya klasör yolu girebilirsiniz. Birden fazla dosya ya da klasör eklemek için bunları virgülle ayırın. Örneğin, sections klasöründeki dosyaları aramak için dahil edilecek dosyalar alanına ./sections girin.

Ayrıca dosya dizini görünümünden belirli bir klasörün içinde de arama yapabilirsiniz. Bir klasöre sağ tıklayın ve ardından açılır menüden Klasörde bul... seçeneğini belirleyin.

Tema dosyalarını yönetme

Tema kodunuzdaki dosyaları yönetebilirsiniz. Dosyaları silebilir, yeni dosyalar ekleyebilir, dosyaları yeniden adlandırabilir ve önceki bir sürüm mevcut olduğunda değiştirilmiş mevcut kod dosyalarını Zaman akışı görünümünden geri yükleyebilirsiniz. assets klasöründeki görseller, CSS, JavaScript ve yazı tipleri gibi varlık dosyalarının Zaman akışı geçmişi bulunmaz.

Tema dosyası açma

Bir tema dosyasını açmak için bir klasöre ve ardından gezginden dosya adına tıklayın. Dosyaları ada veya uzantıya göre arayabilir ve ardından dosyayı açabilirsiniz.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Mac'te ⌘ + P veya Windows'ta Ctrl + P tuşlarına basın.

4. Arama çubuğuna dosya adını girip dosyayı seçin veya Son açılanlar listesinden bir dosya seçin.

Yeni tema dosyası ekleme

Dosya eklemek için bir klasör seçin, Yeni dosya simgesine tıklayın ve ardından dosya adını ve dosya uzantısını girin.

Dosya adları A-Z arası harfleri, 0-9 arası rakamları içerebilir ve boşluk karakteri içeremez. Kelimeleri kısa çizgilerle veya alt çizgilerle ayırın. Dosya uzantısı, bir nokta . ve uzantı türüyle tanımlanır. Örneğin, .liquid veya .css.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Yeni bir dosya eklemek istediğiniz klasöre tıklayın.

4. Klasör adına sağ tıklayın ve açılır menüden Yeni dosya... seçeneğini belirleyin.

5. Dosya için yeni bir ad girin.

6. Klavyenizde Enter tuşuna basın.

Yeni bir varlık yükleme

Kod düzenleyicinin assets klasörüne simge veya görsel dosyası gibi yeni bir varlık yükleyebilirsiniz.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. assets klasörüne sağ tıklayın.

4. Yükle... seçeneğine tıklayın.

5. Yüklemek istediğiniz dosyayı seçin.

6. Aç'a tıklayın.

Tema dosyasını yeniden adlandırma

Bir dosyayı yeniden adlandırmak için dosyaya sağ tıklayabilirsiniz. Dosya uzantısını düzenlememeye veya kaldırmamaya dikkat edin. Dosya uzantısı, bir nokta . ve uzantı türüyle tanımlanır. Örneğin, .liquid veya .css. Dosya adları A-Z arası harfleri ve 0-9 arası rakamları içerebilir ancak boşluk karakteri içeremez. Kelimeleri kısa çizgilerle veya alt çizgilerle ayırın. Dosya adı geçerli değilse yeni dosya adı kaydedilmez.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Bir dosyaya sağ tıklayın ve açılır menüden Yeniden adlandır... seçeneğini seçin.

4. Dosya için yeni bir ad girin.

5. Klavyenizde Enter tuşuna basın.

Tema dosyası silme

Temanızdaki herhangi bir dosyayı silebilirsiniz. Silinen tema dosyaları kurtarılamaz.

Adımlar:

1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne gidin.

2. > Kodu düzenle seçeneğine tıklayın.

3. Bir dosyaya sağ tıklayın ve açılır menüden Kalıcı olarak sil seçeneğini seçin.

4. Sil'e tıklayın.