Widget renklerini temanıza nasıl uydurabilirsiniz

Bundlex, birkaç tıklamayla paket widget'ınızı mağazanızın görünümüne uydurabilir. Widget renk ön ayarları paneli, Shopify temanızın renk şemalarını okur ve kullanıma hazır renk kombinasyonları önerir. Böylece teklifler sonradan eklenmiş gibi değil, sayfanın doğal bir parçası gibi görünür.

Renk ön ayarları nerede bulunur

Editörde bir paket açın ve Style sekmesine gidin. Widget color presets paneli, ayrıntılı Widget style kontrollerinin üzerinde bulunur. Her şeyi aynı anda ayarlamak için ön ayarları kullanın, ardından isterseniz aşağıdaki Widget style bölümünde ayrı öğelerin renklerini ince ayarlayın.

Birincil renk seçin

Primary color satırı, tüm paletin başlangıç noktasıdır. Bunu ayarlamanın dört yolu vardır:

• Önerilen renk örnekleri - renkli örnekler doğrudan Shopify temanızın renk şemalarından, düğme renkleri, metinler, arka planlar ve benzeri değerlerden alınır. Uygulamak için birine tıklayın.
• Varsayılan renkler - temanızın renk örneklerinden sonraki koyu gri örnek, widget'ın varsayılan siyah ve beyaz renklerini geri yükler.
• Özel renk - renk seçiciyi açmak ve istediğiniz hex değerini seçmek için artı simgeli örneğe tıklayın. Hex değerini yazdıktan sonra Enter'a basın ve önizlemenin değiştiğini kontrol edin.
• Rastgele renk - seçenekleri keşfetmek istiyorsanız rastgele bir renk seçmek için yenileme örneğine tıklayın.

Hangisini seçerseniz seçin, Bundlex widget'ın geri kalan renklerini anında bunun etrafında yeniden oluşturur ve sonucu canlı önizlemeye uygular.

Vurgu, yani ikincil renk, seçin

Secondary color, rozetler, etkin durumlar ve vurgular için kullanılan vurgudur. Bundlex, birincil renginizle uyumlu olması için bu rengi otomatik olarak oluşturur ve tıklayarak deneyebileceğiniz birkaç uyum seçeneğini renk örnekleri olarak sunar.

Vurguyu kendiniz ayarlamayı tercih ederseniz, birincil satırdakiyle aynı iki geçersiz kılma seçeneğine sahipsiniz:

• Özel vurgu rengi - artı simgeli örnek, tam bir hex değeri girebileceğiniz renk seçiciyi açar.
• Rastgele uyum rengi - yenileme örneği, renk çarkından birincil renginizle hâlâ uyumlu olan zıt bir rengi seçer.

Transparent teklifleri açma/kapama düğmesi

Birincil rengin yanında, seçilmeyen teklif kartlarının arka planını kontrol eden bir Transparent açma/kapama düğmesi bulunur:

• Kapalı - seçilmeyen tekliflerin arka planları düz bir renk alır, ön ayardan geldiğinde renklerinizin açık bir tonu kullanılır. Böylece her kademe kendi kartı olarak görünür.
• Açık - seçilmeyen tekliflerin arka planları daha temiz ve düz bir görünüm için şeffaf kalır ve sayfayla bütünleşir.

Düğmeyi değiştirmek yalnızca seçilmeyen teklif arka planının şeffaflığını değiştirir. Seçili ve üzerine gelinen arka planlar ile metin, rozet ve kenarlık renkleri aynı kalır. Kapatmak, arka planı yeniden tamamen opak yapar. Açıkken tıkladığınız renk örnekleri, o ön ayarın şeffaf sürümünü uygular.

"Apply border radius" önerisi

Bundlex'in temanızdan alabileceği tek şey renkler değildir. Temanızın köşe yarıçapının widget'ın mevcut köşelerinden farklı olduğunu algılarsa, "Widget köşelerini temanızla eşleştirin." notuyla birlikte bir Apply border radius banner'ı görünür.

1. Temanızın köşe yarıçapını widget'ın teklif kartlarına, teklif görsellerine ve çapraz satış görsellerine uygulamak için banner'da Apply seçeneğine tıklayın.
2. Mevcut köşelerinizi tercih ediyorsanız kapatma simgesiyle öneriyi kapatın.

Algılanan bir fark olmadığı, tema kullanılabilir bir yarıçap sağlamadığı veya öneriyi kapattığınız için öneri görünmeyebilir. Köşeleri yine de Widget style altında kendiniz ayarlayabilirsiniz.

Ayrı öğeleri ince ayarlayın

Paletinizi seçtikten sonra Widget style altında bir öğeyi genişletin. Offer card, kenar yarıçapını, boşluklarını ve seçili, üzerine gelinen ve seçilmeyen durumlarını ayrı ayrı ayarlamanıza olanak tanır. Bu örnekte kart yarıçapını 8 piksel olarak ayarladık. Önce ön ayarları uygulayın, ardından bu son ayarları yapın; çünkü başka bir ön ayar seçmek ayrı renk seçimlerini değiştirebilir.

Kaydedin ve mağazanızı kontrol edin

Save seçeneğine tıklayın. Etkin bir indirimi hedeflenen ürün sayfasında test edin. Her teklifi seçin, metin ve rozet kontrastını kontrol edin, varyantları seçin ve Add to cart seçeneğini kullanın. Editör önizlemesi her tema arka planını veya ekran boyutunu gösteremediğinden sayfayı masaüstü ve mobil cihazlarda kontrol edin.

Örneğimiz aynı miktar indirimi kurallarını korur: iki Ivory Small çantanın %10 indirim sonrası ürün ara toplamı $43.20 olur. Stil değişiklikleri görünümü etkiler, indirim hesaplamasını değiştirmez. Son incelemenizin parçası olarak sepeti ve ödeme sayfasını kontrol edin.

Öneriler nasıl oluşturulur

Bundlex, temanızın renk ayarlarını okur ve uyumlu tonlar oluşturur. Temadan türetilen öneriler, aynı tema ayarları için tekrarlanabilir. Rastgele renk ve Rastgele uyum kontrolleri ise bilerek yeni seçenekler üretir.

İpuçları

• Ön ayarlar hızlı bir başlangıç noktasıdır. Birini uyguladıktan sonra Widget style içinde herhangi bir tek öğenin rengini ayarlayabilirsiniz.
• Önerilen renk örnekleri görünmüyorsa Bundlex etkin temanızdaki renk değerlerini okuyamamış demektir. Özel ve rastgele seçenekleri yine de kullanabilirsiniz.
• Kontrastı kontrol etmek için canlı önizlemeyi kullanın. Özellikle Transparent açıkken rozetlerin ve metinlerin sayfa arka planınızda okunabilir kalmasını sağlayın.