Homepage dengan Page Builder

Homepage sering jadi wajah bisnis Anda — wajar kalau ingin membangunnya sendiri dengan page builder (Elementor, Divi, Bricks, dan sejenisnya) agar sesuai branding. Sejoli Commerce mendukung pola ini sepenuhnya: homepage milik Anda, toko milik Commerce.

Pola ini adalah mode presentasi Pertahankan situs web yang sudah ada — homepage, tema, dan page builder Anda tidak disentuh, sementara katalog, keranjang, dan checkout multi-produk berjalan di halaman-halaman Commerce.

Alur Singkat

1. 1
   Pilih mode Pertahankan situs web yang sudah ada

   Saat Setup Wizard (langkah Tampilan toko) atau belakangan dari tab Storefront. Homepage WordPress Anda tidak berubah.

2. 2
   Pastikan halaman toko siap

   Wizard menyiapkan halaman Katalog, Keranjang, dan Pelacakan otomatis (atau lewat menu Alat). Checkout berjalan di /checkout.

3. 3
   Bangun homepage dengan page builder

   Susun sesuka hati, lalu pasang bagian toko lewat shortcode di bawah.

Shortcode untuk Homepage

Semua shortcode berfungsi di widget shortcode page builder mana pun:

Referensi atribut lengkap ada di halaman Shortcodes.

Contoh: Grid Produk Unggulan

[sejoli_commerce_products featured="yes" limit="4" columns_desktop="4" title="Produk Pilihan"]

Atau kurasi manual per ID produk:

[sejoli_commerce_products ids="101,105,110" layout="slideshow" title="Terlaris"]

Tampilan Halaman Toko: Canvas atau Embedded

Halaman katalog/keranjang/pelacakan dirender dengan salah satu dari dua mode (Advanced Settings → Katalog & Halaman → Render Mode):

Di mode Canvas, halaman toko tetap punya navigasi internal: judul halaman, breadcrumb kembali ke beranda, dan tombol keranjang di toolbar katalog.

Yang Tetap Berlaku

• Produk rahasia — produk dengan visibilitas Hidden from catalog / Direct link only tetap tersembunyi dari semua grid shortcode; hanya bisa dibeli lewat link langsung. Cocok untuk penawaran khusus yang dipromosikan dari homepage Anda. Lihat Visibilitas Produk.
• Halaman detail produk — mode Commerce detail tetap tersedia per produk, lengkap dengan galeri dan tombol Tambah ke Keranjang.
• Embed lintas domain — kalau homepage Anda ada di domain lain (bukan situs WP yang sama), gunakan Katalog Embed sebagai gantinya.

Studi Kasus: Toko Penuh dengan Elementor

Beranda, katalog, dan keranjang bisa dibangun sepenuhnya dengan Elementor — bukan sekadar "bisa dipasang", tapi layak jadi wajah toko. Di situs demo, ketiga halaman berikut dibangun dengan arah modern-editorial (serif display, kanvas krem, kartu tanpa border — struktur yang jauh berbeda dari tampilan bawaan) memakai widget native Elementor (Heading, Text Editor, Button, Image, Icon List, Shortcode) — tanpa satu pun widget HTML, sehingga semuanya bisa diedit langsung lewat editor visual. Mockup rancangannya tersedia di opendesign dengan anotasi shortcode per seksi.

Dan karena halamannya Elementor asli, semuanya bisa Anda edit ulang lewat editor visual:

Header Global

Header di ketiga halaman di atas adalah satu template Elementor Pro Theme Builder (kondisi Entire Site) — logo, navigasi, pencarian, dan [sejoli_commerce_cart_button] dengan badge jumlah item. Ubah sekali, berubah di semua halaman toko.

Catatan Integrasi Astra

Dua penyesuaian kecil saat memakai Elementor Pro Theme Builder bersama tema Astra: (1) header mobile bawaan Astra tidak otomatis menyerah pada header Elementor — lepaskan callback Astra_Mobile_Header::mobile_header_markup dari hook astra_header; (2) judul halaman tema disembunyikan di halaman yang dibangun Elementor karena heading-nya sudah ada di layout. Keduanya cukup lewat snippet kecil; halaman checkout tidak perlu ikut — checkout memang sengaja distraction-free dan cukup dikustom warnanya lewat pengaturan brand.