DEMO

Method of Installing Manual Template Code:

Download files sent via email or WhatsApp
Open it using the Winrar or Zip application
Then select the template folder
Select one file type to be installed, .xml to be uploaded directly and notepad replace all and paste it in the Edit HTML. Recommendations (notepad), how to install notepad can be seen here.
Before installing, it's a good idea to first backup the previous template.

URGENT...!!!

Make sure all articles have a label, don't any without a label,
In the Feed make it Full, and
The size of the label text that will be entered in the recent widget must match the label text on the post, if you enter the label text incorrectly, the recent widget will not appear

LOGO

Recommendation:

Full PNG size 362x120

HEADER CONTENT (HOMEPAGE)

BUTTON

Access your blog Layout - click add Widgets on List of Links widget

<i class="fab fa-apple"></i><span class="inner"> <span class="avail">Available on</span> <span class="store-name">App Store</span></span>

<i class="fab fa-google-play"></i><span class="inner"><span class="avail">Available on</span> <span class="store-name">Google play</span></span>

Changing the FontAwesome icon, check on the website https://fontawesome.com/icons

PROMO CONTENT

Access your blog Layout - click Promo Content and add a widget, then select the image widget

Information:

For Text

Information:

For Widget

COUNT & VIDEO

Information:

SCRIPT COUNT (Add in every HTML widget)

<span class="count">34</span>K<h4>Total Downloads</h4>

What is marked, please replace it

SCRIPT VIDEO (Add in HTML widget)

<a class='popup-youtube' href='https://www.youtube.com/watch?v=k5lsM64uMjk'><span>Open YouTube video</span></a>

What is marked, please replace it with the Youtube video ID

FEATURE APP

Information:

Access your blog Layout - click Feature Image and add a widget, then select the image widget

Information:

Access your blog Layout - click Feature Content List and add a widget, then select the Text List widget

<i class="fa-sharp fa-light fa-umbrella fa-fw"></i><h4>Built-in digital wallet</h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, adipisci.

Changing the FontAwesome icon, check on the website https://fontawesome.com/icons

TABLE PRICING

Access your blog Layout - click Promo Content and add a widget, then select the image widget

Information:

Access your blog Layout - add a widget, then select the Text List widget

Information:

Normal Text

PRICE : <span>$0.00</span>

Button Buy

<a href="#" class="button-link" target="_blank">Buy Now</span></a>

For Link/Url

For Text

SLIDER

Access your blog Layout - add a widget, then select the image widget

Information:

Upload Image with size 285x615

FAQ

Access your blog Layout - add a widget, then select the HTML/JavaScript

Information:

Title

Fill

WIDGET MODEL OR COLOR AS BELOW, SPECIAL TITLE OF EACH WIDGET

SHOPPING CART ARRANGEMENTS

HEADER CONTENT (SHOPPING PAGE)

BUTTON

Access your blog Layout - click add Widgets on List of Links widget

Save

CHECKOUT PAGE

Create a page with the title Checkout without content then publish

CONTENT LABEL (SHOPPING)

Create articles specifically for shopping by labeling (Products) or (Produk) for Indonesia

CONTENT (SHOPPING)

Information:

Image

Price

Description

<img alt="alt" data-original-height="555" data-original-width="555" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEoOi6dBCESwH7GNS9b6-uj6uI5Npn4O_U6ZUv28l9yc6UXu6NLSOfxV9IxJ_68YoO6EYW8znjMa25nwxdYONnf2N4lfK8KSrfUNunVklT91ixmGQP0R3NriEJWq1951qvtkwKC1_eWILceCnHlrW4_vNYK0q_mQpLGFutwDKzAgsgkLQR54gAiz0/s1600/p3.webp"/>

<div class="myprice">
<div class="label_product label_sale">-70%</div>
<div class="price"><s>Rp.970.000</s><span class="item_price">Rp.500.000</span>
</div>
  
<span id="item_description">
<p>Template Toko Online Whatsapp, Tampilan elegan, mudah digunakan, fitur berlimpah. Proses order via whatsapp – Wa Order responsive.</p>
<ul>
<li>Designnya responsive</li>
<li>SEO Friendly</li>
<li>Bisa Multiple Order</li>
<li>Ada Social Proofnya</li>
<li>Notifikasi Whatsapp</li>
<li>PDF invoice</li>
</ul>
</span>
</div>

<div class="descript-wrapper">
Curabitur at lacus ac velit ornare lobortis. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</div>

Information:

Delete if not used

Price

SETTING CHECKOUT

/*CONTACT SETTINGS */
var phone = '6281241105658',
    email = 'goomsite@gmail.com';
/*TEXT SETTINGS 1*/
var textadmin = 'Halo Admin',
	textwaadmin = 'Ini pesanan saya, mohon segera diproses:',
	textorderid = 'ID Pemesanan',
	textname = 'Nama',
	textphone = 'Telepon',
	textemail = 'Email',
	textaddress = 'Alamat',
	textcity = 'Kota',
	textprovince = 'Provinsi',
	textpostal = 'Kode Pos',
	textpayment = 'Metode Pembayaran',
	textproduct = 'Nama Produk',
	textprice = 'Total Harga',
	textlist = 'DAFTAR BELANJA',
	texttotal = 'Total',
	textthanks = 'Terima Kasih',
	textsubject = 'Konfirmasi Pembelian';
/*TEXT SETTINGS 2*/
let text = {             
"textqty": "Jumlah:",
"time": "x",
"textsubtotal":"Sub Total: ",
}; 
/*CURRENCY SETTINGS*/
var currencyOption = "IDR";
/*TRANSFER BANK*/
var bankTransfer=[
  "BRI - 536725281423323 A/n. Goomsite",
  "BCA - 908673454123343 A/n. Goomsite",
  "BNI - 343454354353225 A/n. Goomsite",
  "OVO - 3013418553243 A/n. Goomsite",
  "GoPay - 301341855345454 A/n. Goomsite"
]

Information:

You Can Edit

For var currencyOption ="IDR"; replace your currency with the currency symbol to use

SYMBOL:

IDR = Indonesia Rupiah

USD = US Dollar

AUD = Australian Dollar

BRL = Brazilian Real

CAD = Canadian Dollar

CZK = Czech Koruna

DKK = Danish Krone

EUR = Euro

HKD = Hong Kong Dollar

HUF = Hungarian Forint

ILS = Israeli New Sheqel

JPY = Japanese Yen

MXN = Mexican Peso

NOK = Norwegian Krone

NZD = New Zealand Dollar

PLN = Polish Zloty

GBP = Pound Sterling

SGD = Singapore Dollar

SEK = Swedish Krona

CHF = Swiss Franc

THB = Thai Baht

BTC = Bitcoin

FORM CHATS

Access your blog Layout - click icon Widget Chat WhatsApp

<!-- Info Contact Start -->
<div class='goomwa'>
<div class='goomsite-profil'>
<div class='goomsite-avatar'><img alt='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfgCsxyA7mq_pegt9UX2cmyQwKbEeIa2oIPp8ZczER2uVWJQu01CbD8e_pAlyRKeTcvmQLrxaZb-uluSWUNZgLw5AtYJBu3lwy2aHXmyqBH_rjiAPrgJiJMgeI0IXSZNbtc5U-XJ7g2UuYVcuPT6Y1g4z6ukOre3_Ket4M5g9JFC9wNBqqJJZ58AYP5I/s1600/author1.webp'/></div>
<span class='goomsite-intro'>Customer Service</span>
<span class='goomsite-name'>Nina Lawson</span>
<small class='wa-online'></small>
</div>
<span class='goomsite-numb'>6281234567891</span>
</div>
<!-- Info Contact End -->

<!-- Info Contact Start -->
<div class='goomwa'>
<div class='goomsite-profil'>
<div class='goomsite-avatar'><img alt='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrBe-TCAuWy-IX5X_qqsh_S5TMim91GKXmoV-CQC9V2dHRVR_xnYiPJXW0JYZVS9O5s39VcGu6gZSm7oF2U0m_pNP4pb8ozb34RaK_0y4FaRdhry8KHFG4Z44layhqZrNrAE7H3EZCmOfI-Sp2V9uL2eIJSxF_b9WLVuKRebyJGsnshSAb46TbHtOss4w/s1600/author2.webp'/></div>
<span class='goomsite-intro'>Billing</span>
<span class='goomsite-name'>Albert Henderson</span>
<small class='wa-online'></small>
</div>
<span class='goomsite-numb'>6281977094282</span>
</div>
<!-- Info Contact End -->

<!-- Info Contact Start -->
<div class='goomwa'>
<div class='goomsite-profil'>
<div class='goomsite-avatar'><img alt='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7D9opHJGnckronHYsu3uCprIreiun2fZhmDKwYhcTNxhbah-UTLyd2Wvb0htDNMhqUIskwWpB7rT_nbg_Vf5QbKlMVThxgwzQZrCWyufx4JJUVPf0X6qFohHNGMehB1At1VCAF-Y6ZAdiC556EYiNxhLps1hjyHfyxmaTykSe_QGO_rHVxZ-yNTjLVBE/s1600/author3.webp'/></div>
<span class='goomsite-intro'>Support</span>
<span class='goomsite-name'>Sufiya Elija</span>
<small class='wa-online'></small>
</div>
<span class='goomsite-numb'>6281977094283</span>
</div>
<!-- Info Contact End -->

<!-- Info Contact Start -->
<div class='goomwa of'>
<div class='goomsite-profil'>
<div class='goomsite-avatar'><img alt='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnKrlb3YRiq0C8yG-cNJdM_mrOT37nul-eynqPbIC4zxvsEv6bP6jNAlf2ESF_UoXMbmN3TJv3SjGYkJ8224RYb_MrgyH4rZOkTiNLjd6YaWk_H6al0iN0ENerZnlT2T6qXFO2kq4fhssjl9F37EkeC0lf6jsLf4uV1tar4E2ET8ftxGztxlXB8Ltexo/s1600/author4.web'/></div>
<span class='goomsite-intro'>Support</span>
<span class='goomsite-name'>Pabelo Mukrani</span>
 <small class='wa-offline'></small>
</div>
<span class='goomsite-numb'>6281977094284</span>
</div>
<!-- Info Contact End -->

<!-- Info Contact Start -->
<div class='goomwa of'>
<div class='goomsite-profil'>
<div class='goomsite-avatar'><img alt='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72Fkdrqv9tRjcauhyRizbYTIxX2ofy5x9ySbrArXfXibHW23Bi0xXQVHRtD1e-KxwPb1yUJHAmv9Avp7slpnTa_6Nohcs-NYjrGImN1JJ939QMMEZUY5Zc5Z9pQz7UwyUFhDeGrPmpzX6OBbiRJXBjyHdX8EldsngvIpin9yTjQo4meTI3lp_HUlcgwU/s16000/c4.webp'/></div>
<span class='goomsite-intro'>Sales</span>
<span class='goomsite-name'>Laila Lan</span>
<small class='wa-offline'></small>
</div>
<span class='goomsite-numb'>6281977094285</span>
</div>
<!-- Info Contact End -->

Information:

If you want to add author and add the code below in it and so on

<!-- Info Contact Start -->
<div class='goomwa of'>
<div class='goomsite-profil'>
<div class='goomsite-avatar'><img alt='img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72Fkdrqv9tRjcauhyRizbYTIxX2ofy5x9ySbrArXfXibHW23Bi0xXQVHRtD1e-KxwPb1yUJHAmv9Avp7slpnTa_6Nohcs-NYjrGImN1JJ939QMMEZUY5Zc5Z9pQz7UwyUFhDeGrPmpzX6OBbiRJXBjyHdX8EldsngvIpin9yTjQo4meTI3lp_HUlcgwU/s16000/c4.webp'/></div>
<span class='goomsite-intro'>Sales</span>
<span class='goomsite-name'>Laila Lan</span>
<small class='wa-offline'></small>
</div>
<span class='goomsite-numb'>6281977094285</span>
</div>
<!-- Info Contact End -->

All of which were replaced by the respective auditors

of = delete for online

wa-offline replace wa-online

Sourcecode

TABLE

<div class="table-wrapper">
    <table class="fl-table">
        <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Content 2</td>
            <td>Content 2</td>
            <td>Content 2</td>
            <td>Content 2</td>
            <td>Content 2</td>
        </tr>
        <tr>
            <td>Content 3</td>
            <td>Content 3</td>
            <td>Content 3</td>
            <td>Content 3</td>
            <td>Content 3</td>
        </tr>
        <tr>
            <td>Content 4</td>
            <td>Content 4</td>
            <td>Content 4</td>
            <td>Content 4</td>
            <td>Content 4</td>
        </tr>
        <tr>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 6</td>
            <td>Content 6</td>
            <td>Content 6</td>
            <td>Content 6</td>
            <td>Content 6</td>
        </tr>
        <tr>
            <td>Content 7</td>
            <td>Content 7</td>
            <td>Content 7</td>
            <td>Content 7</td>
            <td>Content 7</td>
        </tr>
        <tr>
            <td>Content 8</td>
            <td>Content 8</td>
            <td>Content 8</td>
            <td>Content 8</td>
            <td>Content 8</td>
        </tr>
        <tr>
            <td>Content 9</td>
            <td>Content 9</td>
            <td>Content 9</td>
            <td>Content 9</td>
            <td>Content 9</td>
        </tr>
        <tr>
            <td>Content 10</td>
            <td>Content 10</td>
            <td>Content 10</td>
            <td>Content 10</td>
            <td>Content 10</td>
        </tr>
        </tbody><tbody>
    </tbody></table>
</div>

TABLE VERTICAL

<div class="tabs_wrapper">
<ul class="tabs">
  <li class="active" rel="tab1">Tab 1</li>
  <li rel="tab2">Tab 2</li>
  <li rel="tab3">Tab 3</li>
  <li rel="tab4">Tab 4</li>
  <li rel="tab5">Tab 5</li>
</ul>
<div class="tab_container">
  <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
  <div id="tab1" class="tab_content">
  <h2>Tab 1 content</h2>
    <p>Bacon ipsum dolor sit amet brisket t-bone salami prosciutto beef biltong kevin tenderloin bresaola sirloin turducken pork leberkas tongue capicola.  T-bone fatback biltong doner capicola.  Boudin turducken t-bone ham hock, ball tip ribeye meatball bresaola kevin turkey drumstick.  Ham hock strip steak chicken jerky bacon sausage tail tri-tip sirloin ham venison rump chuck pork leberkas.  Capicola bacon shoulder leberkas ham bresaola meatloaf beef corned beef venison pastrami t-bone pork chop tail.  Biltong capicola pork fatback, short loin sirloin filet mignon jerky pig ribeye ground round tenderloin hamburger.  Shoulder ham short loin rump, strip steak kielbasa tri-tip shank leberkas.</p>
    <p>Pork filet mignon rump salami, tri-tip ham hock turducken meatball spare ribs tail shoulder pork belly sirloin.  Sirloin fatback bresaola, biltong brisket pancetta tenderloin tri-tip.  Ground round salami shank, chicken pig sausage shankle.  Frankfurter andouille jowl pastrami ribeye.  Leberkas short loin beef turkey pancetta jowl.  T-bone sirloin pork belly jowl, bacon beef ribs ground round tongue.</p>
  </div>
  <!-- #tab1 -->
  <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
  <div id="tab2" class="tab_content">
  <h2>Tab 2 content</h2>
    <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
  </div>
  <!-- #tab2 -->
  <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
  <div id="tab3" class="tab_content">
  <h2>Tab 3 content</h2>
    <p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p>
  </div>
  <!-- #tab3 -->
  <h3 class="tab_drawer_heading" rel="tab4">Tab 4</h3>
  <div id="tab4" class="tab_content">
  <h2>Tab 4 content</h2>
    <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros. </p>
  </div>
  <!-- #tab4 --> 
    <h3 class="tab_drawer_heading" rel="tab5">Tab 5</h3>
  <div id="tab5" class="tab_content">
  <h2>Tab 5 content</h2>
    <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros. </p>
  </div>
</div>
<!-- .tab_container -->
</div>

TAB VIEW

<div class="box-tabs">
  <div class="box-btn"><span class="babutton">Button 1</span><span class="babutton">Button 2</span><span class="babutton">Button 3</span></div>
  <div class="box-tab-content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

BUTTON

<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>white Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>dark-grey Button</a>

LAZYLOAD

Every time to add an image in an article or anywhere you have to insert the Lazyload Image code in it to speed up loading on the blog

Example:

class="lazyload" data-sizes="auto"

Documentation AppLink

Method of Installing Manual Template Code:

URGENT...!!!

LOGO

MENU

HEADER CONTENT (HOMEPAGE)

PROMO CONTENT

COUNT & VIDEO

FEATURE APP

TABLE PRICING

SLIDER

FAQ

SHOPPING CART ARRANGEMENTS

HEADER CONTENT (SHOPPING PAGE)

CHECKOUT PAGE

CONTENT LABEL (SHOPPING)

CONTENT (SHOPPING)

Information:

SETTING CHECKOUT

FORM CHATS

Sourcecode

TABLE

TABLE VERTICAL

TAB VIEW

BUTTON

LAZYLOAD