Özel CSS

Tasarım kontrolleri yetmediğinde Custom CSS kutusunu kullanın.

Her geri sayım türünün tasarım ayarları, Custom CSS (Developer Zone) kutusuyla biter. Buraya yazdığınız her şey, görsel kontrollerin belirlediği her şeyin üzerine, mağaza vitrininizde o geri sayıma uygulanır.

Tasarım ayarlarının altındaki Custom CSS Developer Zone kutusu

Tasarım ayarlarının sonundaki Custom CSS kutusu.

Gerçekten ne zaman işe yarar

İnce konumlandırma — alışılmadık boşluklara sahip bir temada geri sayımın doğru yere oturması için kenar boşluklarını biraz kaydırmak.
Duyarlı ayarlar — mobil ayarların kapsamadığı bir kırılma noktası için medya sorgusu.
Tema ayrıntısına uyum — temanızın her yerde kullandığı ve kontrollerin tam olarak yeniden üretemediği belirli bir köşe yuvarlaklığı veya gölge.
Bir öğeyi gizleme — geri sayımın başka şekilde kapatamadığınız bir bölümünü kaldırmak.

Yazma

Kutu düz CSS kabul eder: seçiciler ve kurallar, <style> etiketi olmadan:

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

Geri sayımın kendi kapsayıcısı samita-countdown sınıfını taşır ve görüntülenen her geri sayım, geri sayım kimliğinden oluşturulan bir ID alır. Daha belirli bir öğeyi hedeflemek için görüntülenen geri sayımı tarayıcınızın geliştirici araçlarında inceleyin ve orada bulduğunuz sınıfları kullanın.

Kapsamı dar tutun

Bu kutudaki CSS otomatik olarak geri sayımla sınırlı değildir. img { ... } gibi bir seçici, sayfadaki her görseli etkiler.

Kurallarınıza her zaman bir önek ekleyin, böylece yalnızca geri sayıma ulaşırlar:

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

Gerçek bir sayfada test edin

Oluşturucu önizlemesi temanızı yeniden üretmez; bu yüzden önizlemede bir şeyi hizalayan CSS, ürün sayfanızda hizalamayabilir. Kaydedin, gerçek bir sayfayı açın ve kontrol edin; hem masaüstünde hem telefonda.

CSS yazmak istemiyorsanız

Destek ekibi, temaya özgü ayarlamalarda yardımcı olabilir. Uygulama, Custom CSS kutusunun yanında “Chat with us to customize countdown in your theme.” şeklinde tanımlanan bir Chat now! düğmesi sunar. Ayrıca sayfanın bağlantısını ve neyin değişmesini istediğinizi belirterek destekle iletişime geçebilirsiniz.

Sonraki adımlar

Bu sayfa yardımcı oldu mu?