VioToko Template Configuration Guide

Complete guide to configure the VioToko template after installing it on your blog.

Prerequisites

Make sure you already understand the basics of Blogger such as creating posts, static pages, and installing widgets. This guide focuses on template configuration, not a Blogger tutorial from scratch.

Settings Overview

Setting	Description
Settings Code	Configure template features
CTA Settings	WhatsApp/Chat button
Product Posts	How to create product posts
Article Posts	How to create article posts
Navigation Menu	Menu in header
Social Icons	Links to social media accounts
Shipping Logos	JNE, J&T, SiCepat, etc.
Payment Logos	BCA, Mandiri, GoPay, etc.

---

Template Settings Code

VioToko template features can be customized using settings code.

How to Create & Install

1. Create settings code at VioToko Generator Tool
2. Copy the generated code
3. Open Layout in Blogger dashboard
4. Find the "Template Settings Code" widget → click Edit
5. Paste the code in the Content section
6. Click Save

---

Call-to-Action Button Settings

CTA buttons (WhatsApp, Chat, etc.) are configured separately from template settings.

How to Create & Install

1. Create CTA code at VioToko CTA Generator Tool
2. Copy the generated code
3. Open Layout
4. Find the "Call-to-Action Settings Code" widget → click Edit
5. Paste the code in the Content section
6. Click Save

---

How to Post Products

Product posts in VioToko are different from regular posts — you must use special HTML code.

Steps to Post Products

1. Prepare product image URL

   • Upload image first
   • See guide: How to Upload Images

2. Create product HTML code at VioToko Posting Tool

3. Create a new post

   • Open Blogger dashboard → New post
   • Click HTML mode in editor (not Compose)
   • Paste the HTML code you created
   • Click Publish

---

How to Post Articles

Posting articles is the same as regular posts (without special HTML code).

Requirements for Article Posts

Add one of the following labels:

Valid Labels
Blog
Artikel
Articles

Note

• Label names must be exactly the same (capital letter at the beginning)
• Article posts will appear on the homepage — set the date older than products if you don't want them to appear
• VioToko template is not optimized for many articles

---

Installing Navigation Menu

1. Create menu code at Menu Generator Tool
2. Copy the generated code
3. Open Layout
4. Find the "Navigation Menu Code" widget → click Edit
5. Paste the code in the Content section
6. Click Save

---

Installing Social Media Icons

1. Open Layout
2. Find the "Social Media Icons" widget → click Edit
3. Paste the following code in the Content section:

<a aria-label="facebook" href="#"><span class="social-icon facebook-icon"><i></i></span></a>

<a aria-label="twitter" href="#"><span class="social-icon twitter-icon"><i></i></span></a>

<a aria-label="youtube" href="#"><span class="social-icon youtube-icon"><i></i></span></a>

<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>

<a aria-label="linkedin" href="#"><span class="social-icon linkedin-icon"><i></i></span></a>

<a aria-label="whatsapp" href="#"><span class="social-icon whatsapp-icon"><i></i></span></a>

<a aria-label="googlemaps" href="#"><span class="social-icon googlemaps-icon"><i></i></span></a>

<a aria-label="telegram" href="#"><span class="social-icon telegram-icon"><i></i></span></a>

<a aria-label="pinterest" href="#"><span class="social-icon pinterest-icon"><i></i></span></a>

4. Replace the # with your social media account URLs
5. Click Save

Available Icons

Platform	aria-label
Facebook	facebook
Twitter/X	twitter
YouTube	youtube
Instagram	instagram
LinkedIn	linkedin
WhatsApp	whatsapp
Google Maps	googlemaps
Telegram	telegram
Pinterest	pinterest

Removing Unused Icons

Delete the code from <a to </a> for icons you don't need.

Example: Removing Instagram icon:

<!-- Delete this line -->
<a aria-label="instagram" href="#"><span class="social-icon instagram-icon"><i></i></span></a>

---

Installing Shipping Service Logo Widget

1. Open Layout
2. Find the "Shipping Service Logo" widget → click Edit
3. Paste the following code in the Content section:

<span class='pengiriman gosend'></span>
<span class='pengiriman grab'></span>
<span class='pengiriman jne'></span>
<span class='pengiriman jdant'></span>
<span class='pengiriman posindonesia'></span>
<span class='pengiriman tiki'></span>
<span class='pengiriman sicepat'></span>
<span class='pengiriman wahana'></span>
<span class='pengiriman indah'></span>
<span class='pengiriman herona'></span>
<span class='pengiriman pandu'></span>
<span class='pengiriman dakota'></span>

4. Click Save

Available Logos

Logo	Class Code
GoSend	gosend
Grab	grab
JNE	jne
J&T	jdant
Pos Indonesia	posindonesia
TIKI	tiki
SiCepat	sicepat
Wahana	wahana
Indah Cargo	indah
Herona	herona
Pandu Logistics	pandu
Dakota	dakota

Removing Unused Logos

Delete the code from <span to </span> for logos you don't need.

Example: Removing Wahana logo:

<!-- Delete this line -->
<span class='pengiriman wahana'></span>

Adding Custom Shipping Logo

If a shipping service is not available, use the following code:

<span class='pengiriman' style='background-image:url(IMAGE-URL);width:95px;'></span>

Replace IMAGE-URL with the logo image URL you want.

---

Installing Payment Logo Widget

1. Open Layout
2. Click Add a gadget above Footer
3. Choose HTML/JavaScript gadget
4. Paste the following code in the Content section:

<span class='pembayaran bca'></span>
<span class='pembayaran bcasyariah'></span>
<span class='pembayaran bni'></span>
<span class='pembayaran bri'></span>
<span class='pembayaran brisyariah'></span>
<span class='pembayaran btpn'></span>
<span class='pembayaran cimb'></span>
<span class='pembayaran cimbsyariah'></span>
<span class='pembayaran dana'></span>
<span class='pembayaran gopay'></span>
<span class='pembayaran mandiri'></span>
<span class='pembayaran mandirisyariah'></span>
<span class='pembayaran ovo'></span>
<span class='pembayaran paypal'></span>
<span class='pembayaran permata'></span>

5. Click Save

Available Payment Logos

Category	Logos
Conventional Banks	BCA, BNI, BRI, BTPN, CIMB, Mandiri, Permata
Islamic Banks	BCA Syariah, BRI Syariah, CIMB Syariah, Mandiri Syariah
E-Wallets	DANA, GoPay, OVO
International	PayPal

Removing Unused Logos

Delete the code from <span to </span> for logos you don't need.

Example: Removing OVO logo:

<!-- Delete this line -->
<span class='pembayaran ovo'></span>