US English (US)
BS Bosnian

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
English (US)
US English (US)
BS Bosnian
  • Home
  • Customization
  • Customization Guides
  • Theme Documents

Main Layout

Written by Emil Hajric

Updated at April 27th, 2025, by Jose Souza

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Users Accessibility New to Helpjuice? Start Here Content Management Multiple Languages/Translations & Localization Multilingual Knowledge Bases Analytics Video Tutorials
  • Customization
    Customization Guides
  • API V2
  • API V3 and Webhooks
  • Article Editor
  • Billing / Subscription
  • Authentication
  • Pricing
  • Swifty AI Chatbot
  • Swifty AI Helpbar
  • What's New
+ More

To keep on going with your customization we assume you’re already familiar with HTML5 and CSS3 minimum, and read this introduction article and the article with basic Liquid markup language.


    So let’s continue, as said on the introductory article the Main Layout document is responsible for the structure of the KB, said structure includes header, footer, search bar and search results returned.


    In the picture below you can see what is defined through this document highlighted in yellow:


Exemple with main layout items highlighted


You can modify the structure of your Main Layout to show any kind of static information such as texts and pre-defined links, and also dynamic content.


To access such content Helpjuice uses Shopify/Liquid, and this are the Objects accessible on the Main Layout:

  • on_show_question_page: Variable that returns a true value if the current page is a question;
  • on_index_page: Variable that returns a true value if the current page is the index page;
  • on_contact_us_page: Variable that returns a true value if the current page is the contact-us page;
  • account: Object that returns a list of properties related to the KB account;
  • internal_kb_user: Object that contains the info on the logged in user;
  • current_user:Same as internal_kb_user ;
  • javascript_includes: This Object is specific for the template it returns a string containing the main JS;
  • responsivemenu_js: This Object is specific for the template it returns a string containing the javascript files responsible for the mobile menu;
  • typewatch_js: This Object is specific for the template it returns a string containing the javascript files responsible for the monitoring of the search block;
  • questions_js: This Object is specific for the template it returns a string containing the javascript files responsible for the fetching and displaying of questions after performing a search;
  • content_for_layout: This Object fetches the contents on the current page as a text and paste it over the template code.


Some elements are essenyial to the Main Layout:

    Search Block:

 <form autocomplete="off">
       <input id="search" name="search" size="30" type="text" autocomplete="off" placeholder="Start typing your question..." />
 </form>

    Contact Form:

    <div class="wrap container-fluid hidden" id="no-results">
          <div class="no-results-wrap js_equalise_is_landing">
            <!-- if no results found => show contact form -->

              <div class="row center-xs">
                  <div class="contact_form col-xs-12 col-sm-12 col-md-8 col-lg-8">

                    <h2>Sorry, we didn't find any relevant articles for you.</h2>
                    <p>Please fill out the contact form below and we will reply as soon as possible.</p>

                    <div class="form-container">
                      <div class="form style-2">
                        <form accept-charset='UTF-8' action='/questions' class='active' id='new_question' method='post'>

                          <!-- Don't modify or delete this -->
                          <div class="form-group">
                            {{csrf_token}}
                            <input type='hidden' value='{{account.id}}' name='question[account_id]' id='question_account_id'>
                          </div>

                          <div class="form-group">
                            <input type="text" name='question[email]' id='question_email' required>
                            <label for="question_email">Your email</label>
                            <div class="line"></div>
                          </div>

                          <div class="form-group">
                            <input type="text" placeholder='' name='question[name]' id='question_name' required>
                            <label for="question_name">Your question</label>
                            <div class="line"></div>
                          </div>

                          <div class="form-group" id="expand">
                            <textarea type="message" name='question[description]' id='question_description' required></textarea>
                            <label for="question_description">Description (details)</label>
                            <div class="line"></div>
                          </div>

                          <input class="btn" type="submit" id='question_submit' name='commit' value="Contact Support">

                          <!-- Want to add custom fields to your form (such as: account_id) and have them included when the user contacts support? Max three custom fields -->
                          <!-- <input type="text" name='question[custom_field][favorite_car]' id='question[custom_field][favorite_car]' value='Whats your favorite car?'> -->

                        </form>
                      </div>
                    </div>

                  </div>
                </div>

          </div>
      </div>
    </article>


Head Items:

<head>
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% if question %}{{account.name}} — {{ question.name }}{% else %}{{account.name}} Support{% endif %}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

    <!-- Upload and insert your favicon here -->
    <!--<link rel="shortcut icon" type="image/vnd.microsoft.icon" href=""/>-->

    <link href="/assets/main.css" rel="stylesheet">
    <link href="https://static.helpjuice.com/helpjuice_production/uploads/upload/image/1856/34388/flexboxgrid.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900,100' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

  </head>


central format primary design

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How To Retrieve Categories Through API
  • How To Cancel Your Account
  • Index Page

Copyright © 2025 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 support@helpjuice.com
Expand