Özel CSS ekleme

Uygulamanın stil ayarları, mağazaların ihtiyaç duyduklarının çoğunu kapsar. Kapsamadıklarında (belirli bir köşe yuvarlaklığı veya yalnızca mobilde geçerli olması gereken bir ince ayar gibi) kendi CSS’inizi ekleyebilirsiniz.

Dikkat

Bu, bu dokümantasyondaki gerçekten teknik tek sayfadır. CSS konusunda rahat değilseniz, ne istediğinizi bunun yerine [email protected] adresine anlatın. Ekip genellikle tam kod parçasını sağlayabilir; hiç yazmadığınız CSS ise temanız güncellendiğinde bozulamayacak CSS’tir.

Yerleşik ayarlarla başlayın

İnsanların CSS ile yapmaya yöneldiği görünüm değişikliklerinin neredeyse tamamı zaten Quote settings > Customize altında bir ayardır. Bir şey yazmadan önce bunlara göz atın.

Nerede	Ayarlayabilecekleriniz
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color ve Font size.
Quote form > Style	Bir stil ön ayarı ve Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color ve Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color ve Background color — kayan widget’ın kabul ettiği yalnızca bu ikisidir.

Görünüm değişikliklerinin çoğu zaten bir ayardır; buradan başlayın.

Not

Match theme styling if possible işin büyük kısmını kendi başına yapar: “Theme styling applies on your storefront and is not shown in this preview.” Seçeneği açın ve formun CSS’e ihtiyacı olduğuna karar vermeden önce canlı mağaza vitrininize bakın. Bkz. Tema stilinize uyum sağlayın.

Dikkat

CSS’e asla verilmemesi gereken bir iş, bir fiyatı veya satın alma düğmesini gizlemektir. Advanced settings > Hide price bunun için Hide Add To Cart button ve Hide Buy Now button dahil uygun ayarlara sahiptir. Bir CSS kuralı fiyatı sayfada bırakır ve fiyat, stil sayfanız yüklenmeden önce kısa süre görünebilir — bkz. Add to Cart ve Buy now düğmelerini gizleme.

CSS’inizi nerede tutmalısınız

Özel CSS’i nerede tutarsanız tutun, yeniden bulabileceğiniz ve geri alabileceğiniz bir yerde tutun. Kendi temanızda tutulan CSS’in yararlı bir yan etkisi vardır: tema ile birlikte sürümlenir; bu yüzden düzenlemeden önce temayı çoğaltmak size geri dönebileceğiniz bir sürüm sağlar.

Not

Bir şey yazmadan önce yukarıdaki yerleşik ayarları gözden geçirin. Bir değişikliğin ayara mı yoksa CSS’e mi ait olduğunu anlayamıyorsanız, önce [email protected] adresine sorun; bu, hiç ihtiyaç duymadığınız bir kuralı sürdürmekten sizi kurtarır.

Hedefleyeceğiniz öğeyi bulma

Mağaza vitrininizde öğeye sağ tıklayın ve Inspect seçeneğini seçin. Bu, kuralları yazacağınız sınıf adlarını gösterir.

Neyi hedefleyeceğinizi bulmak için teklif düğmesini kendi mağaza vitrininizde inceleyin.

Başlamadan önce bilmeye değer iki nokta var:

• Teklif düğmesi, belirlediğiniz Button text ile ve Button position altında seçtiğiniz yerde görüntülenir; bu yüzden onu aramaya başlamadan önce Product page button position ayarını kontrol edin.
• Quote (n) etiketli kayan teklif widget’ı, grfq-quote-widget-container sınıfına sahip bir kapsayıcının içinde yer alır.

Not

Düğmeyi incelemek için bir koleksiyon sayfasında bulamıyor musunuz? Bir ürün kartının üzerine gelin. Modern temalarda uygulama düğmeyi temanın kendi hızlı ekleme denetimine bağlar; bu yüzden kart üzerine gelinene kadar sıfır opaklıkta durur ve ardından etiketli bir düğme yerine küçük bir simge olarak görünür. Bu eksik bir stil değil, temanın davranışıdır — bkz. Koleksiyon sayfalarındaki teklif düğmesi.

Birkaç pratik kural

Kural	Neden
Her seferinde yalnızca bir şeyi değiştirin	Bir şey bozulduğunda hangi kuralın yol açtığını bilirsiniz.
Mobilde test edin	Teklif taleplerinin çoğu telefonlardan gelir ve yalnızca masaüstüne yönelik bir ince ayar çoğu zaman orada bozulur.
Bir kopyasını başka yerde saklayın	Gerekirse geri yükleyebilmek için CSS’inizi bir nota da yapıştırın.
Mümkün olduğunda !important kullanmaktan kaçının	Bugün işe yarar, ancak gelecekteki her değişikliği zorlaştırır.
Her kuralı yorumlayın	Altı ay sonra açıklaması olmayan bir CSS bloğu, kimsenin silmeye cesaret edemediği bir şeydir.

Tema değişikliğinden sonra

Yeni temada uygulama yerleştirmesiyle başlayın. Bu, temanızda etkinleştirilir ve etkinleştirilene kadar uygulamanın yaptığı hiçbir şey mağaza vitrininizde görünmez — bkz. Uygulamayı temanızda etkinleştirme.

Ardından CSS’inizi kontrol edin. CSS, temanızın işaretlemesine göre yazılmıştır; bu yüzden tema değiştirdikten veya büyük bir tema güncellemesinden sonra teklif düğmenize, teklif formunuza ve kayan widget’ınıza bakın — kuralların ayarlanması gerekebilir.

Sonraki adımlar

• Düğme metnini ve renklerini değiştirme — önce denemeniz gereken düğme ayarları
• Tema stilinize uyum sağlayın — formun temanızı otomatik olarak izlemesini sağlayın
• Destekle iletişime geçin — bir kod parçası isteyin