Ana içeriğe geç

serMobile PRO | Ana Sayfa Tasarımı

Mobil uygulamanızın ana sayfa tasarımını, uygulamanıza serB2B sisteminize tanımlı dil seçeneklerine göre özelleştirebilir ve App Store, Google Play Store ve Huawei App Gallery* uygulama mağazalarında ek bir güncelleme onayı olmadan anında yayınlayabilirsiniz.

Yönetici panelinden Tasarım > ileri Düzey > serMobile PRO bölümüne giderek mobil uygulama ana sayfa tasarımına dilediğiniz kadar widget ekleyerek özelleştirebilir ve kolayca yönetebilirsiniz.

serMobile PRO uygulamanız hangi uygulama mağazalarında yayında ise tasarım değişikliği gerçekleşir. Uygulamanızın tüm uygulama mağazalarında yer alması ile ilgili bilgi almak için [email protected] adresi ile iletişime geçebilirsiniz.

Başlamadan Önce​

serMobile PRO | Image Dosyaları Nasıl Oluşturulur?​

Mobil uygulamanızın ana sayfasındaki tasarımınızın nasıl olduğuna karar verip, gerekli imajları oluşturun ve bilgisayarınıza her bir imaj ayrı olacak şekilde kaydedin.

bilgi

serMobile PRO Widget komponentlerinin sunduğu kullanım modellerine bakarak tasarımınızı hazırlayın. İmaj dosyalarınızı ayrı oluşturun ve bilgisayarınıza .png .jpg .jpeg veya .webp formatında kaydedin.

Video içerikler için oluşturduğunuz dosya formatı .mp4 olmalıdır.

ipucu

En yüksek kalitede içerik gösterimi için imaj genişliklerini 1000 px olarak belirleyin.

Uygulamanın optimum hızda çalışabilmesi için hazırladığınız imaj dosyalarının (.png .jpg .jpeg) boyutları 1 MB boyutundan küçük olması daha iyi bir kullanıcı deneyimi sağlamaktadır.

Uygulamanın optimum hızda çalışabilmesi için hazırladığınız video dosyalarının boyutları 2 MB boyutundan küçük olması daha iyi bir kullanıcı deneyimi sağlamaktadır.

serMobile PRO | Yönlendirmeler Nasıl Yapılır?​

Eklenen her widget tıklandığında belirli alanlara yönlendirilebilir. Kullanıcı deneyimini daha etkin kılmak için eklenen her bir widget için yönlendirmeleri aşağıdaki görselde gördüğünüz gibi kolayca yapabilirsiniz.

  • Örnek olarak; Main Category, Category, Brand, Group, Modal, Search gibi.
bilgi

Eklenen widget türlerinde yönlendirme yapabilmek için TYPE sekmesinden nereye yönlendirme yapacağınızı seçmelisiniz.

Giriş EkranıGiriş Ekranı 2

serMobile PRO | Hangi Widget Ne İşe Yarar?​

Mobil uygulamanızın ana sayfa tasarımını doğru bir biçimde SerMobileBoss ekranından ilgili widget türlerinden seçim yaparak ekleyin.

bilgi

Güncel widget türleri: IMAGE, IMAGECAROUSEL, SLIDER, DIVIDER, IMAGELIST, TEXT, GRID, PRODUCTCARD, FLASHSALE, MODAL, MIXEDCAROUSEL, TIMEIMAGE, VIDEOLIST ve VISITEDPRODUCTS.

Widget Türleri​

Widget | IMAGE​

Bu widget ile dilediğiniz resmi mobil uygulamanıza kolayca ekleyebilirsiniz.

  1. Widget Ekle butonuna basın.
  2. IMAGE widget türünü seçin.
  3. Url bölümündeki Choose File tıklayarak yüklemek istediğiniz imaj dosyasını seçin.
  4. Kaydet butonuna basın.

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız id, type değerlerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

bilgi

IMAGE widget'ında ayrıca radius (köşe yuvarlama) ve padding (yatay boşluk) alanları da bulunur. type alanına girebileceğiniz yönlendirme değerleri: category, main_category, product, collection, brands, search (search_text ile birlikte), filter (filter veya id ile birlikte), modal (bir MODAL widget'ının id'sine yönlendirir), link (goto alanındaki harici URL'i açar), login, register ve cyb. type değeri login veya register ise ve kullanıcı zaten giriş yapmışsa, görsel otomatik olarak gizlenir.

Widget | IMAGECAROUSEL​

Bu widget ile dilediğiniz resimleri öncelikle Admin paneli üzerinden Tasarım > Slaytlar bölümüne ekleyin. Oluşturmuş olduğunuz Slayt'ın ID değerini IMAGECAROUSEL widget eklerken id alanına girin.

bilgi

IMAGECAROUSEL için Slayt bölümü üzerinden eklenmiş olan resimler horizontal olarak hareket eder.

ipucu

Slayt ID değerini bulmak için oluşturduğunuz Slayt ın bulunduğu sayfa URL' in sonunda bulunan sayı değerini not edin.

  1. Widget Ekle butonuna basın.
  2. IMAGECAROUSEL widget türünü seçin.
  3. Item_count alanına kaç adet resim görüntülenmesini istiyorsanız belirtin. (Örnek:4)
  4. Slayt ID değerini id alanına girin.
  5. Kaydet butonuna basın.

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız Slaytlar içerisine resim eklerken karşınıza çıkan penceredeki Type bölümüne type değerini URL bölümüne id değerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | SLIDER​

Bu widget ile dilediğiniz resimleri öncelikle Admin paneli üzerinden Tasarım > Slaytlar bölümüne ekleyin. Oluşturmuş olduğunuz Slayt'ın ID değerini SLIDER widget eklerken id alanına girin.

bilgi

SLIDER için Slayt bölümü üzerinden eklenmiş olan resimler horizontal olarak hareket eder.

ipucu

Slayt ID değerini bulmak için oluşturduğunuz Slayt ın bulunduğu sayfa URL' in sonunda bulunan sayı değerini not edin.

  1. Widget Ekle butonuna basın.
  2. SLIDER widget türünü seçin.
  3. Slayt ID değerini id alanına girin.
  4. Kaydet butonuna basın.

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız Slaytlar içerisine resim eklerken karşınıza çıkan penceredeki Type bölümüne type değerini URL bölümüne id değerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | DIVIDER​

Bu widget ile dilediğiniz widget türleri arasına divider ekleyebilirsiniz.

  1. Widget Ekle butonuna basın.
  2. DIVIDER widget türünü seçin.
  3. Height değerini px cinsinden girin. (Örnek: 10px ise height:10)
  4. Kaydet butonuna basın.

Widget | IMAGELIST​

Bu widget ile dilediğiniz resimleri, aynı satırda eşit genişlikte yan yana sıralanacak şekilde mobil uygulamanıza kolayca ekleyebilirsiniz. IMAGE widget'ından farkı, tek bir widget içinde birden fazla görseli liste olarak tutmasıdır.

  1. Widget Ekle butonuna basın.
  2. IMAGELIST widget türünü seçin.
  3. Url bölümündeki Choose File tıklayarak yüklemek istediğiniz imaj dosyasını seçin.
  4. Kaydet butonuna basın.
  5. Yukarıdaki 4 adımı yüklemek istediğiniz resim sayısı kadar aynı widget detay üzerinde tekrar edin.

Örnek:

Eğer yüklemek istediğiniz imaj dosyasına yönlendirme yapmak istiyorsanız id, type değerlerini girin.

ipucu

En uygun görüntü kalitesini elde edebilmek için height percent değerini doğru girin.

Height Percent hesaplamak için örnek:

Çıktı Örneği:

Widget | TEXT​

Bu widget ile dilediğiniz metni mobil uygulamanıza kolayca ekleyebilirsiniz.

  1. Widget Ekle butonuna basın.
  2. TEXT widget türünü seçin.
  3. Text bölümündeki Choose File tıklayarak yüklemek istediğiniz imaj dosyasını seçin.
  4. Kaydet butonuna basın.

Çıktı Örneği:

Widget | GRID​

Bu widget ile dilediğiniz miktarda serB2B'ye eklediğiniz ürünleri 2'li gösterim olacak şekilde mobil uygulamanıza kolayca ekleyebilirsiniz.

  1. Widget Ekle butonuna basın.
  2. GRID widget türünü seçin.
  3. limit alanına gösterimi olacak ürün adetini giriniz. (Örnek:40)
  4. order_by alanına son eklediğiniz üründen itibaren gösterim için desc (azalan), ya da ilk eklediğiniz üründen itibaren gösterim için asc (artan) şeklinde tanımlayın.
  5. Kaydet butonuna basın.

Çıktı Örneği:

bilgi

GRID widget'ında ürünleri category_id, collection_id, brand_id, group_id, search veya filter alanlarından biriyle de filtreleyebilirsiniz. Bu alanlardan hiçbiri girilmezse tüm ürünler listelenir.

Widget | FLASHSALE​

Trendyol'daki "Flash İndirim" benzeri, geri sayım saati içeren bir kampanya banner'ıdır. Kullanıcı banner'a dokunduğunda ekranın altından açılan bir modal içinde filtreye uyan ürünler gösterilir. Süre dolduğunda banner otomatik olarak gizlenir.

  1. Widget Ekle butonuna basın.
  2. FLASHSALE widget türünü seçin.
  3. title ve isteğe bağlı subtitle alanlarına banner başlığını/alt yazısını girin.
  4. end_time alanına indirimin biteceği tarih/saati girin. (Örnek: 2026-07-10T18:00:00)
  5. Modalda gösterilecek ürünleri category_id, collection_id, brand_id, group_id, search veya filter alanlarından biriyle belirleyin.
  6. Kaydet butonuna basın.

Çıktı Örneği:

FLASHSALE bannerFLASHSALE ürün modalı
ipucu

end_time için saat dilimi belirtilmezse, geri sayım kullanıcının cihazının yerel saatine göre hesaplanır. Yurt dışındaki veya saati farklı ayarlı kullanıcılarda hatalı sürelerin önüne geçmek için tarihi UTC (2026-07-10T18:00:00Z) ya da açık saat dilimi farkıyla (2026-07-10T18:00:00+03:00) girmeniz önerilir.

bilgi

end_time geçmiş bir tarihse widget hiç görüntülenmez. Ürün filtreleme alanlarının (category_id, collection_id, search vb.) tamamı boş bırakılırsa modal "Ürün bulunamadı" gösterir.

Widget | MODAL​

Bu widget, sayfa açılır açılmaz otomatik olarak bir popup (alt sheet) içinde görsel gösterir. Görsele tıklandığında modal kapanır ve ilgili sayfaya yönlendirir. Sağ üst köşedeki X butonuyla kapatılabilir.

  1. Widget Ekle butonuna basın.
  2. MODAL widget türünü seçin.
  3. Url alanına gösterilecek görseli yükleyin.
  4. height_percent ve radius alanlarıyla görselin boyutunu ve köşe yuvarlamasını ayarlayın. (height_percent girilmezse ekran yüksekliğinin %70'i kullanılır)
  5. Yönlendirme yapmak için type ve buna bağlı id/filter/search_text/goto alanlarını IMAGE widget'ında olduğu gibi doldurun.
  6. Kaydet butonuna basın.

Çıktı Örneği:

bilgi

MODAL widget'ı, widget listesinde nerede olursa olsun sayfa yüklenir yüklenmez otomatik olarak açılır. Bu nedenle bir duyuruyu yalnızca belirli bir dönemde göstermek istiyorsanız widget'ı o dönem sonunda listeden kaldırmanız gerekir.

Widget | MIXEDCAROUSEL​

Bu widget, kendi kendine kayan (5 saniyede bir, elle kaydırılınca durur) ve her sayfası ya 4 ürünlük bir grid ya da bir görsel olabilen karma bir carousel'dir. Her sayfanın kendi arka plan rengi, başlığı ve açıklaması olabilir.

  1. Widget Ekle butonuna basın.
  2. MIXEDCAROUSEL widget türünü seçin.
  3. height_percent alanına carousel'in yüksekliğini girin. (Varsayılan: 1.1)
  4. Eklemek istediğiniz her sayfa için item_type alanına products (ürün grid'i) veya image (görsel) seçin.
    • products seçtiyseniz ürünleri GRID widget'ındaki gibi category_id, collection_id, brand_id, group_id, search veya filter alanlarından biriyle filtreleyin. (Bu sayfa her zaman 4 ürün gösterir.)
    • image seçtiyseniz IMAGE widget'ındaki gibi url ve yönlendirme alanlarını (type, id, goto vb.) doldurun.
  5. Her sayfa için isteğe bağlı olarak bg_color, title, title_color, description, description_color alanlarını girin.
  6. Kaydet butonuna basın.

Çıktı Örneği:

Widget | TIMEIMAGE​

Bu widget ile bir görselin üzerine geri sayım zamanlayıcısı ekleyebilirsiniz. Belirlediğiniz tarih geçtiğinde widget kendiliğinden gizlenir.

  1. Widget Ekle butonuna basın.
  2. TIMEIMAGE widget türünü seçin.
  3. Url alanına arka plan görselini yükleyin.
  4. date alanına geri sayımın biteceği tarih/saati girin. (Örnek: 2026-12-31 23:59:59)
  5. İsteğe bağlı olarak title, title_color ve title_position (left veya sağ için boş bırakın) alanlarıyla zamanlayıcı üzerindeki yazıyı, position_top/left/right/bottom alanlarıyla da konumunu ayarlayın.
  6. Kaydet butonuna basın.

Çıktı Örneği:

bilgi

position_top ve position_bottom alanlarını aynı anda doldurmayın; ikisi birlikte gönderilirse overlay'in yüksekliği kısıtlanır ve içerik taşabilir.

Widget | VISITEDPRODUCTS​

Bu widget, kullanıcının daha önce detay sayfasını açtığı ürünleri otomatik olarak yatay bir liste halinde gösterir. Herhangi bir ürün seçimi ya da filtre gerektirmez; veriler kullanıcının cihazında saklanır ve sunucudan çekilmez.

  1. Widget Ekle butonuna basın.
  2. VISITEDPRODUCTS widget türünü seçin.
  3. limit alanına en fazla kaç ürün gösterileceğini girin. (Varsayılan: 10)
  4. Kaydet butonuna basın.

Çıktı Örneği:

bilgi

Bu widget kullanıcıya özeldir: kullanıcı uygulamayı silip yeniden yüklerse listesi sıfırlanır. Kullanıcının hiç ürün görüntülememiş olması durumunda widget hiçbir şey göstermez.

Mobil Uygulamanız Artık Hazır!​

Yukarıdaki adımları izleyerek serMobile PRO mobil uygulamanızın tanımlı dil seçeneklerinden biri için uygulamanızın tasarımı artık hazır!

serMobile PRO | Farklı Dillerde Tasarım​

Mobil uygulamanızda farklı dillerde tasarım yapabilmek için öncelikle serB2B sisteminizde tanımlı dil seçeneklerinden birini seçin (Örnek:TR, EN, RU, FR, AR) ve ardından ilgili dile özgü widget türlerini ekleyin. Tasarımınızı serMobile PRO | Ana Sayfa Tasarımı dokümanındaki adımları izleyerek tamamlayın.

bilgi

serMobile PRO uygulamanız yeni dil eklemek ve bilgi almak için [email protected] adresi ile iletişime geçebilirsiniz.

Sıkça Sorulan Sorular (SSS)​

  • serMobile PRO mobil uygulamamıza yeni bir dil nasıl eklerim?

Yeni bir dil eklemek için öncelikle serB2B sisteminizde istediğiniz dilin tanımlı olduğundan emin olun. Ardından dil seçeneklerinden ilgili dili seçin ve serMobile PRO | Ana Sayfa Tasarımı dokümanındaki adımları izleyerek tasarımı bu dile göre özelleştirin. Yardım almak için [email protected] adresiyle iletişime geçebilirsiniz.

  • Mobil uygulamamda widget görüntülenmesinde sorun yaşıyorum, ne yapmalıyım?

Widget görüntülenmesiyle ilgili bir sorun yaşamanız durumunda, widget türünün ve ayarlarının doğru yapılandırıldığından emin olun. GRID widget'ında resim boyutları, yükseklik yüzdeleri ve ürün limit değerlerinin doğru girildiğini kontrol edin. Sorun devam ederse, destek almak için [email protected] adresiyle iletişime geçebilirsiniz.

  • FLASHSALE widget'ım hiç görünmüyor, neden?

end_time alanına girdiğiniz tarih geçmişse widget otomatik olarak gizlenir. Ayrıca ürünleri filtrelemek için kullandığınız category_id, collection_id, brand_id, group_id, search veya filter alanlarından en az birinin dolu olduğundan emin olun; hepsi boşsa modal boş görünür.

  • MODAL widget'ı her sayfa açılışında çıkıyor, sadece belirli bir dönemde göstermek istiyorum, ne yapmalıyım?

MODAL widget'ı sayfa yüklenir yüklenmez otomatik olarak açılır ve listede olduğu sürece her seferinde gösterilir. Belirli bir kampanya döneminden sonra gösterilmesini istemiyorsanız, o dönemin sonunda widget'ı SerMobileBoss ekranından kaldırmanız gerekir.

İlgili Kaynaklar​

İletişim ve Destek​

Herhangi bir sorunla karşılaşırsanız veya yardıma ihtiyaç duyarsanız, destek ekibimizle iletişime geçebilirsiniz. Size en kısa sürede yardımcı olmaktan memnuniyet duyarız.