# 9 Tata Letak Toko URL: https://canvaswp.com/id/templates/shop/ Updated: 2026-11-03 Templat Tata letak katalog WooCommerce: jumlah kolom dan posisi sidebar, halaman kategori, halaman filter, lalu keranjang dan checkout. [Buka showcase langsung](https://demos.canvaswp.com/classic/) [Jelajahi situs demo](https://canvaswp.com/id/demos/) Diperbarui 3 November 2026 - [4 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/shop/) - [3 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/shop-3/) - [2 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/shop-2-right-sidebar/) - [1 Kolom (membuka di tab baru)](https://demos.canvaswp.com/classic/shop-1/) - [Tata Letak Produk (membuka di tab baru)](https://demos.canvaswp.com/classic/product/pink-printed-dress/) - [Kategori - Parallax (membuka di tab baru)](https://demos.canvaswp.com/classic/shop-category-parallax/) - [Filter Kombinasi (membuka di tab baru)](https://demos.canvaswp.com/classic/shop-combination-filter/) - [Keranjang (membuka di tab baru)](https://demos.canvaswp.com/classic/cart/) - [Checkout (membuka di tab baru)](https://demos.canvaswp.com/xmas/xmas-checkout/) Setiap tautan membuka halaman sungguhan di showcase langsung, dibangun dengan tema dan blok yang sama dengan yang Anda pasang. Yang membentuk setiap halaman ## Halaman toko yang dibangun dengan blok dan templat WooCommerce menjalankan toko: produk, stok, keranjang, dan pembayaran. Canvas merancang halaman yang dilalui pembeli, dan setiap tata letak ini berasal dari komponen yang dirilis dalam tema dan plugin-nya. ### Kolom katalog Halaman empat kolom adalah halaman toko WooCommerce itu sendiri, yang ditampilkan oleh templat arsip produk tema. Halaman tiga, dua, dan satu kolom menampung blok Canvas Products, yang pengaturan Kolom-nya menentukan baris, di dalam halaman yang menggunakan salah satu dari empat templat toko: lebar penuh, atau sidebar di kiri, di kanan, atau di kedua sisi. ### Halaman produk Produk mengambil tata letaknya dari templat yang Anda pilih saat mengeditnya. Selain halaman standar, tersedia versi dengan sidebar di salah satu sisi atau kedua sisi, ringkasan yang tetap terlihat saat menggulir, sampel warna, dan daftar spesifikasi, serta templat Linked Gallery yang juga tersedia sebagai carousel. ### Banner kategori Serangkaian blok Parallax Image setinggi layar penuh, satu gambar per kategori, masing-masing bergerak saat halaman digulir. Blok ini memiliki overlay dan konten sendiri, sehingga judul dan tombol dapat mengarahkan pembeli ke bagian toko tersebut. ### Filter kombinasi Blok Canvas Products dengan dua bar Grid Filter di atasnya, satu berlabel Pilih Kategori dan satu lagi berlabel Urutkan Berdasarkan, sehingga pembeli dapat mempersempit katalog ke satu jenis dan mengurutkannya menurut nama atau harga seketika, tanpa memuat ulang halaman. ### Keranjang Keranjang showcase menggunakan blok Cart yang disertakan WooCommerce. Canvas menambahkan blok Cart Table dan Cart Totals sendiri untuk toko yang ingin menata halaman keranjang blok demi blok. ### Checkout Keranjang kosong tidak memiliki checkout untuk ditampilkan, jadi tautan ini membuka checkout dari demo Christmas Store, yang dibangun dari blok Canvas Checkout Billing dan Checkout Order Review. Demo tersebut diimpor beserta produk dan checkout ini. Memilih ## Tata letak toko mana yang cocok untuk katalog Anda Biarkan ukuran katalog menjadi acuan. Rentang produk yang kecil dengan foto yang kuat paling cocok ditampilkan dalam kartu lebar, yaitu dua atau tiga per baris, atau satu kolom jika setiap produk memerlukan paragraf tersendiri. Katalog besar memerlukan lebih banyak tampilan sekaligus di layar, dan itulah fungsi halaman toko empat kolom. Gunakan filter kombinasi ketika pembeli memikirkan dua cara sekaligus, berdasarkan jenis lalu harga. Letakkan banner kategori di beranda atau lookbook, tempat gambar bekerja menjual sebelum grid bekerja. Di halaman produk, pilih templat sesuai faktor yang mendorong pembelian. Pakaian dijual berdasarkan warna, jadi versi swatch warna layak digunakan. Produk teknis dijual berdasarkan detail, dan itulah fungsi daftar spesifikasi. Ringkasan lengket juga menjaga harga dan tombol tetap terlihat pada halaman yang panjang. 21 dari 88 situs demo diimpor sebagai toko WooCommerce, lengkap dengan produk, kategori, serta halaman keranjang dan checkout. ### Fitur toko 24 blok WooCommerce dan 18 templat toko, dari galeri produk hingga tinjauan pesanan. - [WooCommerce di Canvas](https://canvaswp.com/id/woocommerce/) ### Panduan langkah demi langkah Produk, halaman toko, halaman produk, keranjang, dan checkout, sesuai urutan Anda membangunnya. - [Mulai toko WooCommerce](https://canvaswp.com/id/guides/start-a-woocommerce-store-with-wordpress/) ### Demo toko Fesyen, keramik, furnitur, dan lainnya, masing-masing dapat dipratinjau halaman demi halaman sebelum Anda mengimpornya. - [Perbandingan demo e-commerce](https://canvaswp.com/id/wordpress-themes/ecommerce/) Templat lainnya ## Koleksi lainnya - [Templat Halaman 13](https://canvaswp.com/id/templates/page-templates/) - [Shortcode dan Elemen 57](https://canvaswp.com/id/templates/shortcodes/) - [Tata Letak Portofolio 27](https://canvaswp.com/id/templates/portfolio/) - [Tata Letak Blog 35](https://canvaswp.com/id/templates/blog/)