Cara Mengonfigurasi Fitur Product Post Generator
Generator
<div class="gmp_alert alert_info">
<div class="alert_message">
Baca: <a href="#" rel="nofollow noopener" target="_blank">Cara Menggunakan Fitur Product Post Generator</a>
</div>
</div>
<div class="gmp_tpg">
<section class="gmp_ppg_info_product">
<h3>Nama Produk <code>Wajib</code></h3>
<p>Pastikan produkmu tidak melanggar Hak Kekayaan Intelektual agar produkmu tidak dihapuskan atau diturunkan.</p>
<div class="gmp_ppg_detail">
<input class="custom_input" autocomplete="off" placeholder="Contoh: Gila Material Pro (GMP) - Best Premium E-commerce Blogger Template" type="text"/>
</div>
</section>
<section class="gmp_ppg_info_label">
<h3>Label Produk</h3>
<p>Silakan pilih warna label produk yang diinginkan dan masukkan nama label sesuai dengan kebutuhanmu.</p>
<div class="gmp_ppg_detail">
<label>Warna Label</label>
<div class="gmp_ppg_info_list">
<ul>
<li data-color="color_1"><span></span></li>
<li data-color="color_2"><span></span></li>
</ul>
</div>
<label>Nama Label</label>
<input class="custom_input disabled" autocomplete="off" placeholder="Contoh: Produk Terlaris" type="text"/>
</div>
</section>
<section class="gmp_ppg_photo">
<h3>Foto Produk <code>Wajib</code></h3>
<p>Format gambar .jpg .jpeg .png .webp dan ukuran minimum 300 x 300 px (Untuk gambar optimal gunakan ukuran minimum 700 x 700 px).</p>
<div class="gmp_alert alert_info">
<div class="alert_message">
Masukkan maks. 6 foto produk.
</div>
</div>
<div class="gmp_ppg_detail">
<button class="add_image_input gmp_button small fab extended outlined fwm c" type="button">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg>
Tambah foto produk
</button>
</div>
</section>
<section class="gmp_ppg_detail_product">
<h3>Detail Produk</h3>
<p>Tambah informasi detail produkmu.</p>
<div class="gmp_alert alert_info">
<div class="alert_message">
Masukkan maks. 4 detail produk.
</div>
</div>
<div class="gmp_ppg_detail">
<button class="add_detail_pdp_input gmp_button small fab extended outlined fwm c" type="button">
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>
Tambah detail produk
</button>
</div>
</section>
<section class="gmp_ppg_cta_button">
<h3>Call-to-Action Button</h3>
<p>Tambah Call-to-Action button untuk mengarahkan pengguna kepada tujuan konversi.</p>
<div class="gmp_alert alert_info">
<div class="alert_message">
Masukkan maks. 4 Call-to-Action button.
</div>
</div>
<div class="gmp_ppg_detail">
<button class="add_cta_button_input gmp_button small fab extended outlined fwm c" type="button">
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>
Tambah Call-to-Action button
</button>
</div>
</section>
<section class="gmp_ppg_variant">
<h3>Varian Produk</h3>
<p>Tambah varian agar pembeli dapat memilih produk yang sesuai.</p>
<div class="gmp_alert alert_info">
<div class="alert_message">
Masukkan maks. 3 tipe varian.
</div>
</div>
<div class="gmp_ppg_detail">
<button class="add_variant_input gmp_button small fab extended outlined fwm c" type="button">
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg>
Tambah varian produk
</button>
</div>
</section>
<section class="gmp_ppg_price">
<h3>Harga <code>Wajib</code></h3>
<p>Atur jumlah harga.</p>
<div class="gmp_ppg_detail">
<div class="label_p">
<label>Harga Satuan</label>
<span>Rp</span>
<input class="custom_input" autocomplete="off" placeholder="Harga" type="number"/>
</div>
<div class="label_p">
<label>Harga Diskon</label>
<span>Rp</span>
<input class="custom_input" autocomplete="off" placeholder="Harga" type="number"/>
</div>
<div class="label_p">
<label>Diskon</label>
<span>%</span>
<input class="custom_input" autocomplete="off" placeholder="0" disabled="" type="number"/>
</div>
</div>
</section>
<section class="gmp_ppg_description">
<h3>Deskripsi Produk</h3>
<p>Pastikan deskripsi produk memuat penjelasan detail terkait produkmu agar pembeli mudah mengerti dan menemukan produkmu.</p>
<div class="gmp_alert alert_warning">
<div class="alert_message">
Disarankan untuk <b>tidak memasukkan</b> info nomor HP, e-mail, dsb. ke dalam deskripsi produk untuk melindungi data pribadimu.
</div>
</div>
<div class="gmp_ppg_detail">
<div class="gmp_ppg_tab">
<label>Tab 1</label>
<input class="custom_input" autocomplete="off" placeholder="Contoh: Deskripsi" type="text"/>
<textarea class="custom_textarea" placeholder="Konten"></textarea>
</div>
<div class="gmp_ppg_tab">
<label>Tab 2</label>
<input class="custom_input" autocomplete="off" placeholder="Contoh: Fitur Template" type="text"/>
<textarea class="custom_textarea" placeholder="Konten"></textarea>
</div>
<div class="gmp_ppg_tab">
<label>Tab 3</label>
<input class="custom_input" autocomplete="off" placeholder="Contoh: Catatan Perubahan" type="text"/>
<textarea class="custom_textarea" placeholder="Konten"></textarea>
</div>
<div class="gmp_ppg_tab">
<label>Tab 4</label>
<input class="custom_input" autocomplete="off" placeholder="Contoh: Info Penting" type="text"/>
<textarea class="custom_textarea" placeholder="Konten"></textarea>
</div>
</div>
</section>
<section class="gmp_ppg_result">
<h3>Hasil Kode</h3>
<p>Hasil kode generator ini harus ditempelkan pada postingan dalam mode <b>Tampilan HTML</b>.</p>
<div class="gmp_ppg_detail">
<button class="create_button gmp_button small fab extended filled fwm" type="button">
<svg fill="currentColor" viewBox="0 0 24 24"><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"></path></svg>
Buat kode
</button>
<div class="gmp_highlight hidden">
<pre data-lang="</>"><code>Output Generate HTML</code></pre>
</div>
</div>
</section>
</div>
Product Post
-
Product Name : This menu is used to enter the name of the product you are going to sell. The product name should reflect the characteristics or uniqueness of the product.
-
Product Labels : Product labels are additional information that can help identify or categorize products. For example, you can use labels like “Best Seller,” “New,” or “Sale” to grab customers’ attention.
-
Product Photos : You can insert product photos in this menu. Choose high-quality images that clearly display the product so that potential buyers can clearly see the appearance of the product being offered.
-
Product Details : You can display detailed product information.
Adding Product Details
Information:
1
: Added new product details.
Fill in Product Detail Data
Information:
1
: Enter the left product details, for example:Nama produk
.
2
: Enter the right product details, for example:Gila Material Pro (GMP)
.
3
: Delete product details.
4
: Add new product details. -
Product Variants : If your product has multiple variant types, you can populate this menu with relevant variant information. For example, if you are selling a virtual product, a product variant could be a license or an active period. You can add up to three variant types in this Product Generator Tool.
Adding Product Variant Types
Information:
1
: Added new product variant type.
Filling in Product Variant Data
Information:
1
: Enter the variant type title, for example:Lisensi
.
2
: Enter the variant menu title, for example:Standar
,Premium
,Bisnis
. Add a mark,
every time you want to add a new variant menu.
3
: Delete a variant type.
4
: Add a new variant type.
5
: Display the variant type title.
6
: Display the variant menu title.
7
: Enter the regular price, for example:250000
it will be Rp250,000.
8
: Enter the discount price, for example:225000
the price after discount will be Rp225,000 (Optional).
9
: Display the discount percentage.
Example of Results After Filling
-
Unit Price : This menu is used to enter the unit price of the product. Set a price that matches the value of the product and compare it with the market price to ensure the competitiveness of your product.
-
Product Description : Product descriptions are used to provide more detailed information about the product. Describe the product's features, benefits, or ingredients used. Use engaging and clear language so that potential buyers can easily understand the value of the product you are offering.
-
Code Result : After you fill in all the required product information in the previous menu, the Product Generator Tool will generate a code or format that is suitable for use in HTML View mode posts . You can copy and paste this code result into your HTML View mode post so that your products appear with complete and structured information.