🐞 Issue Judul dan Harga product grid tidak muncul di device iOs (Shopify)

Published on February 11, 2026

📌 Deskripsi Masalah

Tampilan products grid di device iOs tidak menampilkan Judul dan Harga produk. Sudah melakukan berbagai cara dan proses. Untuk sekarang berhasil menggunakan tambahan css dibawah.

✅ Solusi Akhir

  • Menambahkan CSS custom di product-cart.liquid

📚 Catatan Penting

  • Case ini terjadi di website Wakai Go

  • Theme nya Thinker

 

⌨️ Penambahan CSS di dalam “product-cart.liquid”



/* RIZKY - 11 FEB | PERBAIKAN TAMPILAN DI IOS TIDAK MUNCUL JUDUL DAN HARGA PRODUK */

/* Perbaikan Khusus iOS Safari */
product-card, 
product-card-link {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

      /* Memastikan kontainer konten tidak 'collapse' di Safari */
.product-card__content {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 1px !important; /* Mancing Safari untuk render */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Jika tema Anda menggunakan display contents, ini akan memperbaikinya untuk Safari */
.product-card {
    display: block !important; 
}

@supports (display: grid) {
.product-grid, .grid {
/* Memastikan grid utama memberikan ruang yang cukup */
    align-items: stretch;
}
}

.product-card__link {
    z-index: 1 !important;
}

.product-card__content {
    z-index: 2 !important;
    pointer-events: none; /* Supaya klik tetap tembus ke link di bawah */
}

/* Pastikan tombol beli tetap bisa diklik */
.product-card__content button, 
.product-card__content a,
.product-card__content .quick-add {
    pointer-events: auto !important;
}

/* END OF RIZKY - 11 FEB | PERBAIKAN TAMPILAN DI IOS TIDAK MUNCUL JUDUL DAN HARGA PRODUK */

 

NB : Pernah terjadi di Nokha

Previous

Next