Merhaba, ben Büşra. İstanbul’da bir dijital ürün stüdyosu olan Tio’da sorumluluk aldığım bir projenin e-ticaret kısmını Shopify entegrasyonuyla gerçekleştirmeye karar verdik. Bu yazıda süreç boyunca öğrendiklerimi paylaşacağım.
Yazıda temel olarak Shopify’da mağaza açarken özel font tanımlamaya ve yazı tiplerini özelleştirmeye odaklanacağız.
Öncelikle Shopify’da özel yazı tipi tanımlamak için çeşitli yöntemler olduğundan bahsetmek istiyorum. Temel olarak 2 yola başvurabilirsiniz:
- Shopify uygulamaları.
- Temanızı özelleştirmek.
Shopify Uygulamaları İle Özel Yazı Tipleri Nasıl Eklenir?
Shopify’ın özel font tanımlamak için geliştirilmiş birçok uygulaması var. Bunlardan önde gelenler Fontify, Fontbox, FontPicker, gibi uygulamalar. Bu uygulamalar, Google Fontları için tamamen ücretsiz olsalar da çoğunlukla özel font yüklemek için ayrıca ücretli üyelik isteyen araçlardır.
Fontify’ın nasıl işlediğine birlikte göz atalım:
Fontify adresine gidelim. Shopify hesabıyla giriş yaptıktan sonra uygulamayı indirelim. Sonrasında çıkan ekranda Install App dedikten sonra Shopify hesabınızın Fontify uygulamasıyla entegre olduğunu göreceksiniz.
Yönlendirilen sitede font değiştirebilmeniz için iki seçenekle karşılaşacaksınız: Upload Fonts ve Google Fonts. Upload Fonts kısmında yüklediğiniz özel fontu, tanımladığınız elementleri vs. ile birlikte, “ *You must upgrade plan to upload fonts (Fee is 10$) ” uyarısından anladığınız gibi, Shopify Store’nuza ücretsiz olarak ekleyemezsiniz. Diğer bir seçenek olan Google Fonts kısmında Choose butonu ile karşınıza çıkan panelde dilediğiniz fontu seçip ekleyebilir, Element Picker kısmında özelleştirebilirsiniz.
Ancak, bu yazıda özel font tanımlamak için Shopify uygulamalarını kullanmayacağız. Şimdi benim örnek olarak oluşturduğum Shopify adresimize göz atalım.
Shopify’da Tema Özelleştirerek Özel Yazı Tipleri Nasıl Eklenir?
Shopify adresinize giriş yapın, Home bölümüne gittiğinizde karşınıza 5 adımlı bir yol çıkacak:
Customize theme’e gittiğinizde mevcut temanız olan Dawn temasını göreceksiniz. Sağ üstte bulunan view your store yazısına tıklayalım.
Mevcut fontuyla Shopify sitemizi görmektesiniz. Şimdi bu fontu kendi özel fontumuzla değiştirelim 🙂
Bu arada, kısa bir bilgi. Customize > Theme Settings > Typography kısmına gittiğinizde mevcut olan fontu görebilirsiniz. O kısımda bulunan Shopify’da tanımlı olan fontlar arasından dilediğiniz fontla değiştirebilirsiniz de.
Öncelikle, font formatları hakkında ön bilgi vermek istiyorum. Örneğin otf, ttf, ttc, woff, woff2, gibi format tipleri bulunur. Bunların bazısı masaüstü formatı için, bazısı ise web formatı için kullanılır.
Şu an bizim örnek temamızda otf ve ttf font formatları bulunmakta. Bu fontları Shopify üzerinde kullanabilmek için woff ve woff2 ye dönüştürmemiz gerekiyor. Bunun için, tarayıcınız üzerinden çalışan çevrimiçi dönüştürücüleri kullanabilirsiniz. Bu adımdan sonra dönüştürülen fontları masaüstüne indirin.
✨ İşte şimdi özel font yüklemeye hazırız, başlayalım!
Shopify kullanıcınızdan Online Store > Themes > gidin. Düzenlemek istediğiniz temanız üzerinde bulunan seçeneklerden Actions > Edit Code tıklayalım. Dönüştürdüğünüz woff ve woff2 tipindeki fontları yüklemek için solda görülen dosyalardan Assets > Add a new asset seçelim.
Bundan sonra Browse butonuna tıklayıp dönüştürülen fontları tek tek yükleyelim.
Şimdi, sadece html ve css kullanarak font değiştirme kısmına geldik. Css kodları için yeni bir asset oluşturalım. Dosya ismine bir isim verelim.
Ancak, “tio.css” dosyasındaki kodların çalışması için, “theme.liquid” dosyasında bulunan kodlarda “base.css” altında, kendi dosyamızı tanımlamamız gerekiyor. Çünkü “base.css”teki kodlar, kendi yazdığımız kodların üzerine yazabilir. Bu, göz önünde bulundurmanız gereken önemli bir nokta.
Bu adımdan sonra ise Layout içinde bulunan “theme.liquid” dosyasını açın. Sonra koda kolayca ulaşabilmek için ctrl+f ile “stylesheet” kelimesini aratalım ve aşağıda bulunan kodu “base.css” kod satırı altına yapıştıralım.
{{ “css file name” | asset_url | stylesheet_tag }}
Daha sonra, aşağıdaki kod parçacığında gösterildiği gibi kendi özel fontunuzun ismini içe aktarmak gerekiyor. Bu kısma dikkat etmelisiniz.
@font-face {
font-family: “font name“;
src: url({{ “font file name.woff” | asset_url }}) format(“woff”);
}
Bu kodu “theme.liquid”te bulunan {% endstyle %} kod satırının üstüne yapıştırın. “font name” yazan yerleri kendi fontunuzun ismiyle, “font file name” yazan yerleri ise bilgisayarınızda bulunan font dosyanızın tam ismiyle değiştirin.
Şimdi istediğiniz fontu yüklediniz. Tarayıcınızda yeni bir sekme açarak web sitenizin önizlemesini görebilirsiniz. Seçtiğiniz herhangi bir metin veya kelime üzerinde sağ tıklayıp Inspect’e gidin. Sitenizin kod bilgilerini gösteren ve düzenleme yapmanıza izin veren bir pencere açılacak. Ne ve nasıl değişiklik yapmak istiyorsanız orada önce deneyimleyerek sonrasında kendi css dosyanıza yazıp değişiklikleri kontrol edebilirsiniz.
Aşağıda gördüğünüz gibi, özellik vermek için “body, h1, h2, h3, h4, h5, h6, p, li, a” kısmını aldım.
Yaptığınız düzenlemeleri kaydedin ve sitenizi yeniden yükleyin.
Gördüğünüz gibi, web sitenin yazı tipleri SwearDisplayDemo fontuyla değişmiş oldu. Inspect ile kontrol edebilirsiniz.
İşte bu kadar.
Aslında ne kadar basit, değil mi? Süreç kavrandığında ne kadar basit olduğu anlaşılsa da, ilk defa bu konulara girişenler için epey karmaşık olabiliyor. Fakat deneme-yanılma ile yeni ve yapıcı bir çözüm bulabilmek eğlenceli ve öğretici oluyor.
Artık siz de Shopify Store’unuza özel font yükleyebilirsiniz!
Shopify’a özel bir font yüklemek, müşterileriniz için sitenizi daha özel ve göz alıcı yapar.
Umarım bu yazı, başta benim gibi, karşılaştıkları sorunlara çözüm arayan ve mücadele eden herkes için faydalı olmuştur. 🙂
