Aşağıdaki makale size yardımcı olacaktır:Shopify Temanızı Özel CSS ile Nasıl Düzenleyebilirsiniz?
Shopify mağazanızı özelleştirmek, popüler bir temaya sahip sıradan bir mağaza değil, markanıza benzeyen nihai bir ürün oluşturmak için hayati önem taşır.
Premium Shopify teması kullansanız bile temel özelleştirme seçenekleriniz sınırlı olacak ve mağazanız bu temayı kullanan diğer mağazalarla çarpıcı bir benzerlik taşıyacaktır.
Yazı tiplerinizde ve düzenlerinizde önemli ayarlamalar yapmak için temanızın CSS dosyalarında ince ayar yapmak isteyeceksiniz.
Biraz teknik bilginiz olmadığı sürece Shopify’a nasıl özel kod ekleyeceğinizi anlayamayabilirsiniz.
Shopify temanıza özel CSS ekleme işini uzmanların yapmasına izin vermeniz önemli olsa da (ve bu işi onlara bırakmanızı öneririz), Shopify mağazanızda CSS’yi nasıl düzenleyeceğinizi daha iyi anlayabilmeniz için CSS ile ilgili her şeyi ayrıntılı olarak açıklayacağız (ve zahmet edip etmemeniz gerekip gerekmediği).
Öncelikle CSS’nin temellerini ele alalım, ardından onu mağazanızda nasıl kullanabileceğinize geçebiliriz.
#cta-visual-pb#
–
CSS nedir?
CSS Basamaklı Stil Sayfaları anlamına gelir. Köprü metni biçimlendirme dili (HTML) öğelerinin bir web sitesinde nasıl görüntüleneceğini belirtmek için kullanılan bir kodlama dilidir.
HTML, bir sayfanın temel yapısını (başlıklar, gövde içeriği, resimler, video vb.) belirleyen, tüm web sayfalarının sabit kodlanmış iskeletidir. CSS, bu yapının kullanıcılara nasıl görüneceğini (düzenler, yazı tipleri, renkler, aralıklar vb.) oluşturmak için HTML ile birlikte çalışır.
Yani basit bir HTML örneği şöyle olabilir:
#cta-paragraph-pb#
Ben bir başlığım!
Bu, tek başına “Ben bir rotayım!” ifadesini görüntüler. H1 başlık formatında.
Dekorasyonunun kapsamı, stil sayfasında (öğelerin stilini belirlemek için HTML tarafından çağrılan ayrı bir belge) tanımlanan CSS stiline bağlı olacaktır.
h1 öğesinin CSS stil sayfasındaki stili şu şekilde görünebilir:
#cta-paragraph-pb#h1 { renk:siyah; yazı tipi boyutu:36px; }
Yukarıdaki stil, HTML başlığının 36 puntoluk düz siyah metin olarak görünmesini sağlar. Pek heyecan verici değil, biliyorum.
Bu bir CSS satırı, bir sayfadaki her H1’in nasıl görüneceğini belirler.
CSS kod yapısı
Yukarıdaki CSS kodu örneğindeki “h1” seçici denir. Bir paragraf etiketi (“p”) veya benzersiz şekilde tanımlanmış bir sınıf (“.uniquely-Definition-class”) olabilir.
Seçici, CSS’nin HTML koduyla bağlantısıdır. Yani “h1” seçicisi HTML belgesindeki tüm
etiketlerinin stilini tanımlıyor.
Kıvrımlı parantezlerin içinde beyanlarınız var. Bu durumda H1 başlığına ilişkin bildirimler “color:black” ve “font-size:36px” şeklindedir.
Bu bildirimler iki bölümden oluşur: özellik ve değer. Renk bir özelliktir ve siyah da bu özelliğin değeridir. Bildirimler HTML’nin nasıl stilize edileceğini belirler.
Birden fazla bildiriminiz olduğunda, çoğu zaman yaptığınız gibi, bunların noktalı virgülle ayrılması gerekir. Bildirimlerin sonunda da noktalı virgül kullanılmalıdır.
CSS kuralları hakkında bir not:
Herhangi bir nedenle bir CSS dosyasında bir seçici birden fazla kullanılırsa, belgenin daha aşağısındaki seçici kullanılacaktır. Daha sonraki kod eski kodu geçersiz kılar. Bir dosyayı düzenlerken bu kullanışlıdır.
Shopify mağazanızı özelleştirmenin 3 Yolu
Shopify CSS dosyalarını nasıl düzenleyeceğimiz konusuna girmeden önce Shopify mağazanızı özelleştirmek için sahip olduğunuz çeşitli seçeneklerden bahsedelim.
İdeal temanızı yükledikten sonra Shopify mağazanızın görünüşünü ve verdiği hissi özelleştirmenin birkaç yolu vardır.
Shopify tema düzenleyicisi
Resim: Shopify
Shopify, tema düzenleyicide temanızı özelleştirmenizi kolaylaştırır.
adresine giderek erişebilirsiniz. Online Mağaza > Temalar, ve tıklamak Özelleştirmek Değişiklik yapmak istediğiniz temayı seçin.
Tema düzenleyicisi, tek tek sayfa şablonlarının yanı sıra genel temada (renkler, yazı tipleri, düğme stilleri vb.) stil değişiklikleri yapmanıza olanak tanır.
Online Mağaza 2.0 temalarıyla Shopify bölümleri herhangi bir sayfa şablonuna eklenebilir, taşınabilir ve özelleştirilebilir.
Shopify kod düzenleyicisi
Resim: Shopify
Bununla birlikte, tema düzenleyicinin değiştirebilecekleriniz sınırlıdır. Kod düzenleyicinin devreye girdiği yer burasıdır.
Kod düzenleyici, temanızın tüm sıvı, CSS ve HTML dosyalarına erişmenizi sağlar.
Bu dosyalarda yapacağınız değişiklikler temanızın işlevselliğini etkileyebileceğinden ne yaptığını bilen bir geliştirici tarafından yapılmalıdır. Ayrıca şunları yapmalısınız: herhangi bir şeyi düzenlemeden önce daima temanızı yedekleyin.
Bugün bahsettiğimiz konu için kod düzenleyiciyi inceleyeceğiz.
Shogun Sayfa Oluşturucu
Son olarak, kodla uğraşmak istemiyorsanız ancak Shopify mağazanızı özelleştirmek için daha güçlü bir şeye ihtiyacınız varsa, sürükle ve bırak görsel düzenleyicisinde sayfa öğelerinin nasıl çalıştığı konusunda size daha fazla kontrol sağlayan bir sayfa oluşturma uygulaması kullanabilirsiniz. .
Güçlü bir şeye ihtiyacınız olduğunda ve kod değişikliği yapmakla ilgilenmediğinizde Shogun Sayfa Oluşturucu sizin için burada.
Daha sonra neler yapabileceğine dair bazı örnekler göstereceğim.
ÖNEMLİ: Shopify CSS kodunuzu düzenlemeden önce yapmanız gerekenler
Shopify temanızı kod düzenleyicide özelleştirmeden önce HER ZAMAN temanızı kopyalamanız gerekir.
Bu, CSS değişiklikleriniz ters giderse geri dönebileceğiniz bir yedek kopya oluşturur.
Temanızı kopyalamak için Hareketler söz konusu temayı seçin ve Kopyalamak açılır menüden.
Hangi sürüme geri döneceğinizi açıkça belirtmek için yedeği yeniden adlandırdığınızdan emin olun (kesin bir zaman damgası için tarih gibi bir şey).
#cta-visual-pb#
–
Shopify kod düzenleyicisinde CSS dosyalarına nasıl erişilir?
Shopify kod düzenleyicisine erişim basittir. Her zaman olduğu gibi Shopify yönetici kontrol panelinizden başlayacaksınız.
1. Adım: Temalar sayfanıza gidin
Şu yöne rotayı ayarla Çevrimiçi Mağaza > Temalar. Düzenlemek istediğiniz temayı temalar sayfasında bulun ve tıklayın. Hareketler.
2. Adım: Kodu düzenle’ye tıklayın
İçinde Hareketler açılır menüye tıklayın Kodu düzenle Kod düzenleyiciye ulaşmak için.
3. Adım: CSS dosyaları için Varlıklar klasörünü bulun
Kod düzenleyiciye girdikten sonra, Şablonlar klasör (varsayılan olarak açıktır). Bunun altında şunları bulacaksınız: Varlıklar dosya. Temanızın CSS klasörünü ortaya çıkarmak için genişletin.
Stilini içerdikleri bileşenler ve bölümler için başlıklı tonlarca CSS dosyası bulacaksınız.
Birden fazla dosyaya tıklayabilirsiniz; bunlar, birden fazla dosyayı aynı anda özelleştirmek için düzenleme pencerenizde sekmeler olarak kalır.
Shopify’da mevcut CSS nasıl düzenlenir?
Shopify temanızdaki mevcut dosyalarda basit CSS düzenlemeleri yapabilirsiniz.
Bunu yapmak için değişiklik yapmak istediğiniz CSS dosyasını bulmanız gerekir. Dawn teması için ana CSS dosyasına base.css adı verilir. Main.css veya theme.css olarak da adlandırılabilir.
Adım 1: Base.css dosyasını açın
Varlıklar altında base.css dosyasını bulun ve açmak için tıklayın. Ana düzenleyici ekranında, diğer dosyaları düzenlerken kaybetmemeniz için yukarıda bir sekmeyle birlikte göründüğünü göreceksiniz.
2. Adım: Düzenlemek istediğiniz öğenin adını bulun
Hangi öğelerde değişiklik yapmak istediğinizi zaten biliyor olabilirsiniz ancak araştırmanızı tarayıcınızda da kolayca yapabilirsiniz.
Tarayıcınızda mağazanızı açın, değişiklik yapmak istediğiniz öğeye sağ tıklayın ve Denetle’ye tıklayın.
Denetleyici penceresindeki öğeye tıkladığınızda, halihazırda kullanımda olan CSS niteliklerini göreceksiniz.
Güncellemelerinizin mağazanızın görünümünü nasıl etkileyeceğini görmek için CSS’de bile değişiklikler yapabilirsiniz (bu, gerçek sitenizi etkilemez).
Öğeyi inceleyerek, öğenin CSS dosyasında onu tanımlamak için kullanılan sınıfını veya kimliğini bulabilirsiniz.
3. Adım: CSS dosyasında öğenizi bulun
CSS öğesi adı bilindiğinde, değişiklik yapmak istediğiniz şeyi bulmak için base.css dosyanızda (theme.css olarak da adlandırılabilir) arama yapabilirsiniz.
tuşuna basarak arama yapabilirsiniz. Kontrol + F (PC’ler için) veya Komut + F (Mac’ler için).
4. Adım: CSS düzenlemelerinizi yapın ve kaydedin
CSS öğenizde değişiklikleri yaptıktan sonra yeşil simgeye tıklamanız yeterlidir. Kaydetmek sağ üst köşedeki düğmeye basın.
Bununla, Ön izleme Değişikliklerinizin söz konusu öğe üzerindeki etkisini görmek için düğmesine basın.
Yeni bir özel Shopify CSS dosyası nasıl oluşturulur?
Özel CSS stillerinizi barındırmak için yeni bir CSS dosyası oluşturmak yalnızca birkaç adım sürer.
1. Adım: Kod düzenleyicide “Yeni varlık ekle”yi tıklayın
Altında Varlıklar klasör, tıklayın Yeni bir varlık ekle özel bir CSS dosyası oluşturmak için.
2. Adım: Mevcut bir CSS dosyasını yükleyin veya boştan başlayın
Zaten yüklemeye hazır bir CSS dosyanız varsa dosyayı seçebilirsiniz.
Sıfırdan başlıyorsanız, Boş bir dosya oluştur sekmesini seçin ve CSS dosyanızı adlandırın. Burada da dosya son ekinizi seçebilirsiniz ancak güncellenen temalar artık .css dosya uzantısını kullanıyor.
Boş bir dosya varlığından başlamayı seçtiyseniz CSS kodunuzu dosyaya ekleyin. CSS kodunuzda base.css dosyasındaki yinelenen adlandırma kurallarına sahip olmadığından emin olun.
3. Adım: Düzen klasöründe theme.liquid’e gidin
Yeni bir CSS dosyası oluşturduğunuz için, mağazanızda sihrini gerçekten işe yaraması için tema dosyasında bu dosyaya referans verilmesi gerekir.
Liquid dosyasına CSS eklemek için şuraya gidin: Düzen klasörünü açın ve theme.liquid dosyasını seçin.
4. Adım: Custom.css stil sayfası için kod ekleyin
Base.css dosyasını çağırdığı yere doğru aşağı kaydırın (veya “base.css”yi arayın).
Base.css kod satırını kopyalayın ve bu satırın altına yapıştırın. Dosya adını kendi özel CSS dosya adınızla değiştirin. Örneğimizde şöyle olurdu:
#cta-paragraph-pb#{{ ‘özel.css’ | asset_url | stil sayfası_etiketi }}
Şimdi tıklayın Kaydetmek sağ üst köşede, özel CSS’niz mağazanızda görünecektir.
Shopify mağazanızı kod olmadan özelleştirin
CSS koduyla uğraşmadan mağazanızın görünümü ve tarzı üzerinde daha fazla kontrole sahip olmak istiyorsanız Shogun Page Builder sizin için doğru Shopify uygulamasıdır.
Bunlar, Sayfa Oluşturucu ile yapabileceğiniz şeylerden sadece birkaçıdır, ancak teknik bilgi birikimi olmadan görsel değişiklikler yapmak istediğinizde, onun yeteneklerinin genişliğini gösterirler.
Animasyonlar
Sayfa Oluşturucu’daki belirli sayfa öğelerine hareket eklemek için öğeyi seçin ve animasyon efektini seçin.
Bu kapsayıcı bölüm için, görünüme kaydırıldığında veya fareyi bölüm üzerinde hareket ettirildiğinde tetiklenen animasyonları kullanma seçeneğim var.
Bir animasyon efekti seçtiğinizde, gecikmeyi, süreyi, gerçekleşme sayısını ve yalnızca bir kez tetiklenip tetiklenmeyeceğini özelleştirebilirsiniz.
Bunun için fareyle üzerine gelindiğinde tetiklenen Darbe animasyonunu seçtim. Alışveriş deneyimime hoş bir hareket efekti katıyor ve oluşturulması yalnızca birkaç saniye sürdü.
Shogun Sayfa Oluşturucu’nun animasyonları aracılığıyla darbe efekti
Kenar boşlukları ve dolgu
CSS stilinin büyük bir kısmı öğelerin sayfaya nasıl yerleştirildiğidir.
Kenar boşlukları ve dolgular, sayfa öğelerinizin sayfada birbirleriyle nasıl etkileşime gireceğine karar veren aracılardır.
Bizim sistemimizde tam olarak nasıl çalıştıklarını anlattım. kenar boşlukları ve dolgu kılavuzu.
Kısacası kenar boşlukları, bir öğenin kenarı ile diğer her şey arasındaki görünmez dış alandır; dolgu ise bir öğenin kenarı ile öğenin içindeki içerik arasındaki görünür iç boşluktur.
Sayfa Oluşturucu’da bu ölçümler, tam özelleştirme kontrolü için her öğede mevcuttur.
Birçok sayfa öğesi zaten uygun aralıklarda gelecektir, ancak her birini vizyonunuza en iyi şekilde uyacak şekilde ayarlayabilirsiniz.
Yazı tipi stillerini düzenleme
Metninizin doğru görünmesini sağlamak çok kolaydır. Özelleştirme seçeneklerini görmek için metni veya başlık öğesini tıklamanız yeterlidir.
Başlık türünü, yazı tipi ailesini, yazı tipi ağırlığını, yazı tipi boyutunu, rengini, satır yüksekliğini, harf aralığını ve hizalamayı değiştirin.
Shopify mağazanızda özel yazı tipleri kullanmak için Sayfa Oluşturucu aracılığıyla bunlara erişmeden önce bunları eklemeniz gerekir. Bunun nasıl yapılacağını öğrenmek için Shopify yazı tiplerini ekleme ve özelleştirme kılavuzumuza göz atın.
Ardından mağazanızın birinci sınıf görünmesini sağlamak için en iyi Shopify yazı tiplerini ve eşleştirmelerini bulun.
Arka plan renklerini değiştirme
Herhangi bir bölümün arka plan rengi gibi büyük değişiklikleri hızla yapın.
İhtiyacınız olduğunda doğru renklere erişmek için markanızın renk paletini kaydedin. Renklerin ötesinde şunları da yapabilirsiniz: Zengin bir deneyim oluşturmak için yüksek çözünürlüklü resimler ve tam genişlikte videolar ekleyin müşteriler için.
Resim arka planları için paralaks efekti, alışveriş yapanların ekranı kaydırırken hareketi sunmanın harika bir yoludur; başlık için harikadır.
Shopify mağazanız için özel CSS öğeleri oluşturun
Ayrıca herhangi bir sayfaya eklemek için Sayfa Oluşturucu’da özel CSS öğeleri de oluşturabilirsiniz.
Özel öğeler şurada bulunur: Gelişmiş Sayfa Oluşturucu kontrol panelinin bölümü. Yeni bir tane oluşturmak için mor simgeye tıklayın Yeni Özel Öğe düğme.
Bu sizi Liquid, Javascript veya CSS’de özel kod öğeleri oluşturmanıza olanak tanıyan bir kod düzenleyici sayfasına götürecektir.
Özel CSS düzenleyicisini kullanmaya başlamak için CSS’yi seçin. İşiniz bittiğinde Kaydet’e tıklayın; yeni özel kodunuz Özel Öğeler kitaplığınızda bulunabilir.
Özel öğelerinize herhangi bir sayfaya eklemek için doğrudan sürükle ve bırak düzenleyiciden erişebileceksiniz.
Alışveriş deneyiminizi geliştirmek için Shopify CSS’nizi nasıl özelleştireceğiniz konusunda artık net bir anlayışa sahip olmalısınız.
Yapabileceğiniz tonlarca özel CSS değişikliği vardır ancak bunlar mağazanıza ve markanıza özel olacaktır. Yapmak istediğiniz değişiklikleri öğrendikten sonra Shopify mağazanızı bunlarla nasıl özelleştireceğinizi tam olarak bilebilirsiniz.
Bu görsel güncellemeler için sürükle ve bırak özellikli bir düzenleyici kullanmayı tercih ediyorsanız, Shogun Sayfa Oluşturucu bunu yapmayı son derece kolaylaştırmak için burada.
–
#cta-visual-pb#
