Juragan Template Settings

A complete guide to setting up the Juragan template after it has been installed on your blog.

Prerequisites

Ensure you understand Blogger fundamentals like creating posts, static pages, and installing widgets. This guide focuses on Juragan template settings.

Template installation

The guide to installing the template (Edit HTML for first install, or Restore for updates) is available on the general Template Installation page.

List of Settings

Setting	Description
Settings Code	Feature & WhatsApp configuration via generator tool
Homepage Banner	Banner/hero image at the top of the homepage
Product Categories	Row of category icons with label links
Featured Products	Grid of featured product cards from a URL list
Customer Reviews (Testimonial)	Grid of customer testimonials
Frequently Asked Questions (FAQ)	FAQ accordion
Shop Info	Address, opening hours, WhatsApp/Google Maps links
Navigation Menu & Social Media Icons	Footer widgets
How to Post Products	How to create product posts + variants
How to Post Articles	How to create article/blog posts
How to Create Static Pages	About Us, Policy, Contact pages
Order History	Automatic order recording to Google Sheet (required for online payments)
Midtrans Online Payments	Accept QRIS / Virtual Account / E-Wallet payments

General settings: Menu · Social Icons · Logo, Footer, Favicon

---

Template Settings Code

The theme's main configuration is managed from the Template Settings Code widget (in the Layout menu). Here you configure your WhatsApp number, payment methods, shipping costs, cart, and more.

How to Create & Install

1. Open Layout in your Blogger dashboard.
2. Find the Template Settings Code widget, click the pencil icon.
3. Fill in the configuration as a themeSetting object (see example), then Save.

<script>
var themeSetting = {
  nomorWa: "6281234567890",
  enablePayInstructions: true,
  payUniqueCode: true,
  ongkirMode: "perkg",
  ongkirPerKg: 15000
};
</script>

Widget content must be wrapped in <script> tags

Without the <script> wrapper, the code will appear as plain text and will not function.

The easiest way to compose the complete code without manual writing: use the official Juragan Settings Code generator at https://tools.sugeng.id/juragan-setting/. This tool generates the code according to your needs, which you can then simply copy to the widget.

Advanced features (orders & online payments)

The "Advanced features" group in the generator contains the Webhook URL (Google Script), Online Payment (Midtrans) toggle, and Cloudflare Worker URL. Their usage is explained in Order History and Midtrans Online Payments. Online payments can only be activated after the order history webhook is filled.

Homepage Banner

The Homepage Banner widget displays a banner/hero image at the top of the homepage with a title and short text.

1. Open Layout, find the Homepage Banner widget, click the pencil icon.
2. Create a banner with the Juragan Homepage Banner Generator at https://tools.sugeng.id/juragan-banner/.
3. Copy the generated code (image, title, text, button) into the widget, then Save.

Empty = not displayed

If this widget is left empty, the entire Banner section will be automatically hidden.

Product Categories

The Product Categories widget displays a row of category icons with labels and links to product label pages.

1. Open the Product Categories widget in Layout.
2. Use the Juragan Categories Generator at https://tools.sugeng.id/juragan-kategori/ (the tool fetches the list of labels from your blog).
3. Copy the result into the widget, then Save.

Featured Products

The Featured Products widget displays a grid of featured product cards. Simply list product URLs, one per line.

1. Open the Featured Products widget in Layout.
2. Use the Juragan Featured Products Generator at https://tools.sugeng.id/juragan-featured/ to compile the URL list.
3. Paste it into the widget, then Save.

The theme automatically loads each product's data (image, name, price, cart button). Reduce/change the URL list to control which products are displayed.

Customer Reviews (testimonial)

The Customer Reviews widget displays a grid of reviews/testimonials on the homepage.

1. Open the Customer Reviews widget in Layout.
2. Use the Juragan Reviews Generator at https://tools.sugeng.id/juragan-testimonial/ (supports text or WhatsApp screenshots).
3. Copy the generated code into the widget, then Save.

Frequently Asked Questions (FAQ)

The Frequently Asked Questions widget displays an FAQ accordion on the homepage.

1. Open the Frequently Asked Questions widget in Layout.
2. Use the Juragan FAQ Generator at https://tools.sugeng.id/juragan-faq/ to compile questions & answers.
3. Copy the result into the widget, then Save.

Shop Info

The Shop Info widget displays shop information (address, opening hours, WhatsApp link, optional Google Maps link), typically at the bottom of the homepage before the footer.

1. Open the Shop Info widget in Layout.
2. Use the Juragan Shop Info Generator at https://tools.sugeng.id/juragan-info-toko/ (maps field is optional: if filled, the address becomes a Google Maps link).
3. Copy the result into the widget, then Save.

Navigation Menu & Social Media Icons

Navigation Menu (Navigation Menu Code)

1. Open the Navigation Menu Code widget in the footer.
2. Paste the menu code in the format menu-url menu-name (one menu per line), then Save.

Social Media Icon (Social Media Icon Code)

1. Open the Social Media Icon Code widget in the footer.
2. Use the Social Icon Generator in the tools (inline SVG output) to arrange icons.
3. Paste the result, then Save.

The very bottom row of the footer (copyright + year) is automatically generated by the theme.

Cart, Wishlist & WhatsApp Checkout

The theme provides a cart (localStorage), wishlist, and checkout that sends orders to your WhatsApp.

Buyer's flow

1. The buyer selects the quantity & (if any) variants, then clicks Add to Cart or Buy Now.
2. From the cart icon, the buyer opens the Cart, checks items, then Proceed.
3. The theme displays an order data form (name, WhatsApp, address, payment method, etc.).
4. The theme compiles order details (items, qty, variants, subtotal, shipping, unique code, total transfer) and directs it to your WhatsApp.

Unique payment code

If payUniqueCode is active (default), the theme adds a random unique code (1-999) to the total. Total transfer = order total + unique code.

Shipping costs

The theme supports shipping modes: disabled, per kilogram, and free. Mode & product weight are determined per post (in the Product Post Generator); the per-kg rate (ongkirPerKg) is set via the Template Settings Code. Weight is calculated in 1 kg increments.

Online payments (optional)

In addition to WhatsApp, the theme can accept online payments (QRIS, Virtual Account, E-Wallet) via Midtrans. Mandatory requirement: automatic order history (webhook) must be installed first. Full guide: Midtrans Online Payments.

How to Post Products

The easiest and most accurate way to create product posts is with the Juragan Product Post HTML Code Generator at https://tools.sugeng.id/juragan-posting/.

1. Open the Juragan Product Post generator.
2. Fill in product data: images (1-5), price + promo, short & long description, status, marketplace link, maximum qty, weight (for per-kg shipping), and buy button settings.
3. (Optional) Activate Size & Color variants and fill in options for each group.
4. Click Generate Code, then copy the product content HTML code.
5. Open the Compose page in Blogger, paste the code, and publish.

Size & color variants

• Buyers must select each variant group before the product can be added to the cart/checkout.
• Variant selections are also recorded in the order (example: 1x Woven Bag (Size: M, Color: Brown)).
• On listing cards, products with variants open a quick selection box when the cart button is clicked.

Product status labels

The Out of Stock and Pre-Order statuses are determined by post labels in the Blogger editor (not from the content). Apply the Stok Habis/Out of Stock or Pre-Order label for the theme to display the appropriate badge.

How to Post Articles

Articles are used for non-product content (tips, news, guides). The key: apply an article label.

1. Create a regular post in Blogger.
2. Apply one of the labels: Artikel, Articles, or Blog.
3. Publish.

With an Article label, posts will not appear in the homepage product grid, but will still appear on their label pages with an article layout, and only article-labeled posts will display the comments section.

How to Create Static Pages

Static pages are used for content that rarely changes (About Us, Privacy Policy, Contact).

1. In your Blogger dashboard, open the Pages menu → New Page.
2. Choose blank or HTML type as needed. Fill in the title & content, then Publish.
3. To display it in the blog menu, copy the page's URL and add it to the Navigation Menu Code (format menu-url menu-name).

Troubleshooting

Symptom	Possible cause	Solution
Cart/wishlist buttons not appearing	Feature disabled in settings	Set enableCart / enableWishlist to true
Configuration not applied	Code missing <script> tags or syntax error	Use <script>var themeSetting={...};</script>
Checkout not redirecting to WhatsApp	WhatsApp number empty/incorrect format	Set nomorWa with 62xx format
Shipping cost not appearing	Mode off or weight empty	Set mode & fill weight in the post
Logo not changing in dark mode	Dark logo field empty	Fill logoDarkModeUrl in theme settings (display group)
Products appearing double / double pagination	Browser feed cache	Clear cache / open incognito mode