JoonWeb Theme Guide

JoonWeb template documentation

About

Here are the details of about section rule

{
    "settings":[],
    "rules":{
        "title": {
          "label": "Title",
          "type": "quickEditor",
          "show": "yes",
          "default": "Learn Anything You Want Today"
        },
        "subtitle": {
            "label": "Subtitle",
            "type": "quickEditor",
            "show": "yes",
            "default": "ENHANCED YOUR SKILLS"
        },
        "description": {
          "label": "Content Description",
          "type": "simpleEditor",
          "show": "yes",
          "default": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
        },
        "media": {
          "label": "Media",
          "type": "singlefile",
          "show": "yes",
          "varient":["image", "embed"],
          "default_varient": "image",
          "default" : "10.jpg"
        },
        "button":{
              "label": "Action Button",
              "type": "hrefbutton",
              "show": "yes",
              "default": ["Read more"]
          }
      }
}

This appears to be a JSON object containing information about settings and rules for a web page.

The "title" property specifies the title of the web page and its default value.

The "subtitle" property specifies the subtitle of the web page and its default value, and it also includes a "quickEditor" type for editing the subtitle.

The "description" property specifies the content description of the web page and its default value, and it also includes a "simpleEditor" type for editing the description.

The "media" property specifies information about the media content on the web page, including the label, type, and whether it should be shown or not. It also includes a "singlefile" type for uploading a single media file, and a "varient" array that specifies the possible types of media ("embed" or "image"). The "settings" array within "media" specifies additional settings for the media, including the type of media, the grayscale value, and the animation type.

The "button" property specifies information about the button on the web page, including the label, type, and whether it should be shown or not. It also includes an "hrefbutton" type for creating a button that links to another page.

<section class="about section_gap {{ section.colors ? section.colors }}" id="{{section.id}}">

    <div class="container-fluid">
     <div class="row d-flex align-items-center gy-5">

      {% if media %}
      <div class="col-lg-6 col-md-12 col-sm-12 flex-grow-1">
       <div class="about_img {{class.media}}" {{attributes.media}}>
            <a {% if Property.media.hreflink != '' %} href="{{Property.media.hreflink}}" {% endif %}>
                <jw-media>
                    {% if Property.media.varient == 'image' or Property.media.varient is empty %}
                        <img class="aboutImg"
                            src="{{media}}" 
                            alt="{{media.alt}}" 
                            {{attributes.media}} 
                            {{Property.media.effect ?  'data-parallax="scroll" data-speed="0"' : ''}}
                        >
                    {% elseif Property.media.varient == 'embed' %}
                        <iframe type="text/html" 
                            src="{{media}}" 
                            title="{{media.alt}}"
                            frameborder="0"
                            allow="accelerometer; autoplay;" 
                            width="100%">
                        </iframe>
                    {% endif %}
                </jw-media>
            </a>
       </div>
      </div>
      {% endif %}

       
      {% if title or subtitle or description or button %}
      <div class="col-lg-6 col-md-12 col-sm-12 flex-grow-1">
       <div class="about_text">
        {% if subtitle %}<span class="about_subtitle fontStyle8">{{ subtitle }}</span>{% endif %}
        {% if title %}<div class="about_heading fontStyle6">{{ title }}</div>{% endif %}
        {% if description %}<div class="about_subheading fontStyle8">{{ description }}</div>{% endif %}

        {% if button %}
          {% for btn in button %}
            <a href="{{ btn.href }}" target="{{ btn.target }}" class="welcome_btn  fontStyle8">{{ btn.label }}</a>
          {% endfor %}
        {% endif %}
       </div>
      </div>
      {% endif %}


     </div>  
    </div>  
</section>

This apperas to be the JoonWeb(.jw) file containing html and jw tags where html defines the structure and jw tags are used to set data that is represented.

{{ section.id }} : defines the unique id for each section
{{ section.colors }} : used to set background color of section and foreground color to text.
media, title, subtitle, description & button : variables used to set data from the above json file.

Preview of about section:

Header

Here are the details of header rule

{

      "settings":[],
      "navigation":[
        {
            "label": "home",
            "link" :"index",
            "children": []
        },
        {
            "label": "About",
            "link" :"about",
            "children": [
                {
                    "label": "About Company",
                    "link" :"about-company"
                },
                {
                    "label": "About Product",
                    "link" :"about-products"
                }
            ]
        }
    ],
    "rules":{
        "logo": {
          "label": "Logo",
          "type": "singlefile",
          "show": "yes",
          "varient": "image",
          "system_val": "{{site.logo}}"
        },
          "title": {
            "label": "Site Title",
            "type": "text",
            "show": "yes",
            "default": "Logo",
            "system_val": "{{site.title}}"
          },
          "subtitle": {
            "label": "Tagline",
            "type": "text",
            "show": "yes",
            "default": "Lorem ipsum dolor sit amet",
            "system_val": "{{site.subtitle}}"
          },
          "button": {
            "label": "Action Button",
            "type": "hrefbutton",
            "show": "yes",
            "default": "Get In Touch"
          },
          "phone": {
            "label": "Contact Number",
            "type": "number",
            "show": "yes",
            "default": "+11-789-2323",
            "system_val": "{{site.phone}}"
          },
          "email": {
            "label": "Contact Mail",
            "type": "email",
            "show": "yes",
            "default": "contact@domain-name.com",
            "system_val": "{{site.email}}"
          },
          "social":{
            "label": "Social Buttons",
            "type": "socialicon",
            "show": "yes",
            "system_val": "{{site.social}}"
          },
          "address": {
            "label": "Address",
            "type": "text",
            "show": "yes",
            "default": "212th Street Model Town, NY, 123098"
          }

        }
    
}

This JSON object describes the structure of a website's navigation menu and some of its basic settings.

The "settings" array is empty, meaning that there are no additional settings for the website.

The "navigation" array contains two items, "home" and "about". "home" has a label of "home" and a link of "index". It has no children, indicating that it is a top-level navigation item. "about" has a label of "About" and a link of "about". It has two children, "About Company" and "About Product", which are linked respectively to "about-company" and "about-products".

The "rules" object contains several properties that define basic information about the website, such as the logo, title, tagline, action button, phone number, email address, and physical address. The "logo" property is of type "singlefile" and has a variant of "images". The "title" and "subtitle" properties are of type "text", while the "button" property is of type "hrefbutton". The "phone" property is of type "number", while the "email" and "address" properties are of type "email" and "text", respectively. All properties have a default value set, and are set to be shown on the website.

Sample JSON Data of Navigation (Menu):

{
    navigation:[
        {
            "label":"My Menu",
            "icon":"sampleicon.png",
            "link":"/sampleurl",
            "children:[
                {
                        "label":"Lavel2 Menu",
                        "icon":"level2Icon.png",
                        "link":"/sampleurl/level2",
                }
            ]
        }
    ]
}

In Header, You have to set logo size given in Builder:
Define anywhere condition using switch or if and elseif. below example using (if):
logosize be like: xs for Extra Small, s for Small, m for Medium, l for Large, and xl for Extra Large which user choose in builder.

{% if Property.logo.size == "xs" %}
  {% set logo_class = "see-xsm-logo" %}
{% elseif Property.logo.size == "s" %}
  {% set logo_class = "see-sm-logo" %}
{% elseif Property.logo.size == "m" %}
  {% set logo_class = "see-medium-logo" %}
{% elseif Property.logo.size == "l" %}
  {% set logo_class = "see-large-logo" %}
{% elseif Property.logo.size == "xl" %}
  {% set logo_class = "see-extra-large-logo" %}
{% endif %}


<div class="anylogo {{logo_class ? logo_class : 'default-size'}}">
    <img src="{{logo}}" alt="{{site.name}}"/>
</div>

Or By Using Switch

{% switch Property.logo.size %}
  {% case "xs" %}
    {% set logo_class = "see-xsm-logo" %}
  {% case "s" %}
    {% set logo_class = "see-sm-logo" %}
  {% case "m" %}
    {% set logo_class = "see-medium-logo" %}
  {% case "l" %}
    {% set logo_class = "see-large-logo" %}
  {% case "xl" %}
    {% set logo_class = "see-extra-large-logo" %}
{% endswitch %}

<div class="anylogo {{logo_class ? logo_class : 'default-size'}}">
    <img src="{{logo}}" alt="{{site.name}}"/>
</div>

Altermnative way

{% set logo_size_classes = {
  "xs": "see-xsm-logo",
  "s": "see-sm-logo",
  "m": "see-medium-logo",
  "l": "see-large-logo",
  "xl": "see-extra-large-logo"
} %}

{% set logo_class = logo_size_classes[Property.logo.size] ?? '' %}


<div class="anylogo {{logo_class ? logo_class : 'default-size'}}">
    <img src="{{logo}}" alt="{{site.name}}"/>
</div>

{% set logo_class = (Property.logo.size == "xs") ? "see-xsm-logo" :
 (Property.logo.size == "s") ? "see-sm-logo" :
 (Property.logo.size == "m") ? "see-medium-logo" :
 (Property.logo.size == "l") ? "see-large-logo" :
 (Property.logo.size == "xl") ? "see-extra-large-logo" : "" %}

Or Using Prefix:

{% set logo_class = "see-" ~ Property.logo.size ~ "-logo" %}

Sample Css according to example:

.see-xsm-logo img{height: 40px !important;object-fit: contain;}
.see-sm-logo img{height: 50px !important;object-fit: contain ;}
.see-medium-logo img{height: 70px !important;object-fit: contain ;}
.see-large-logo img{height: 85px !important;object-fit: contain;}
.see-extra-large-logo img{height: 100px !important;object-fit: contain ;}

Here is an example of header.jw:

{% set logo_size_classes = {
  "xs": "see-xsm-logo",
  "s": "see-sm-logo",
  "m": "see-medium-logo",
  "l": "see-large-logo",
  "xl": "see-extra-large-logo"
} %}
{% set logo_class = logo_size_classes[Property.logo.size] ?? '' %}

<section class="main_headers" id="{{section.id}}">

  {% if email or phone or social %}
    <div class="top_header {{ section.colors ? section.colors }}">
      <div class="container_fluid">
        <div class="row p-0">
          <div class="col-md-12">
            <div class="top_header_style">
              {% if email or phone %}
              <div class="top_header_media">
                {% if email %}
                  {% for i, item in site.email %}
                    {% if Property.email.value[i] != 'no' %}
                    <div class="top_header_first fontStyle8"><a href="mailto:{{ item.data }}">
                      <i class="fa-solid fa-envelope"></i> {{ item.data }}</a></div>
                    {% endif %}
                  {% endfor %}
                {% endif %}

                {% if phone %}
                {% for i, item in site.phone %}
                {% if Property.phone.value[i] != 'no' %}
                <div class="top_header_first fontStyle8">  <a href="tel:{{ item.data }}">
                  <i class="fa-solid fa-phone"></i> {{ item.data }}</a></div>
                {% endif %}
                {% endfor %}
                {% endif %}
              </div>
              {% endif %}

              {% if social %}
              <div class="top_header_clock">
 
                {% if social %}
                <div class="to_header_icons">
                  {% for item in social %}
                  <div class="top_header_icon"><a href="{{ item.href }}" class="fontStyle8">{{ item.icon }}</a></div>
                  {% endfor %}
                </div>
                {% endif %}
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div> 
    {% endif %}  

    <header class="{{ section.colors2 ? section.colors2: 'background2 ' }}">
      {% if logo or title  %}
      <div class="logo">
        {% if logo %}<a href="{{ root.url }}" class="{{logo_class ? logo_class : 'default-size'}}"><img src="{{ logo }}" alt="{{ logo.alt }}"></a>{% endif %}
        <div class="main_title">
          {% if title %}<div class="title fontStyle2"><a href="{{ root.url }}" class="{{logo_class ? logo_class : 'default-size'}}">{{ title }}</a></div>{% endif %}
        </div>
      </div>
      {% endif %}

      {% if section.navigation %}
      <nav class="nav_style background2">
        <i class="fa fa-times background1" id="close"></i>
       <ul class="nav_list">
        
        {% for navkey, menu in section.navigation %}
        <li class="nav_items {% if menu.children %}dropdown_btn{% endif %}"><a class="fontStyle8" href="{{menu.link}}">{{menu.label}}  {% if menu.children %}<i class="fa-solid fa-chevron-down"></i>{% endif %}</a>
          {% if menu.children %}
          <ul class="dropdown_list">
            {% for subkey,submenu in menu.children %}
            <li class="dropdown_items {% if submenu.children %}dropdown_btn{% endif %}"><a class="fontStyle8" href="{{submenu.link}}">{{submenu.label}}</a>
              {% if submenu.children %}
              <ul class="dropdown_list dropdown_list1">
                {% for subkey2,submenu2 in submenu.children %}
                <li class="dropdown_items"><a href="{{submenu2.link}}" class="fontStyle8">{{submenu2.label}}</a></li>
                {% endfor %}

              </ul>
              {% endif %}
            </li>
            {% endfor %}
            
           </ul>
           {% endif %}
        </li>
      {% endfor %}

        
       </ul>

       {% if social or email or phone %}
       <div class="top_media">
         {% if email %}
         {% for i, item in site.email %}
           {% if Property.email.value[i] != 'no' %}
           <div class="fontStyle8 top_header_first_1"><a href="mailto:{{ item.data }}">
             <i class="fa-solid fa-envelope"></i> {{ item.data }}</a></div>
           {% endif %}
         {% endfor %}
         {% endif %}
         {% if phone %}
         {% for i, item in site.phone %}
           {% if Property.phone.value[i] != 'no' %}
           <div class="fontStyle8 top_header_first_1"><a href="tel:{{ item.data }}">
             <i class="fa-solid fa-phone"></i> {{ item.data }}</a></div>
           {% endif %}
         {% endfor %}
         {% endif %}

        {% if social %}
        <div class="to_header_icons">
          {% for item in social %}
          <div class="top_header_icon"><a href="{{ item.href }}" class="fontStyle8">{{ item.icon }}</a></div>
          {% endfor %}
        </div>
         {% endif %}
        </div>
        {% endif %}
        
      </nav>
      {% endif %}

      {% if button %}
        {% for btn in button %}
          <a href="{{ btn.href }}" target="{{ btn.target }}" class="header_btn  fontStyle8">{{ btn.label }}</a>
        {% endfor %}
      {% endif %}
      <i class="fa fa-bars" id="open"></i>
    </header>
</section>

<style>
.main_title a{word-break: break-word;}
.logo{max-width:320px;}
header .logo img {width:auto;height: 50px;}
.dropdown_items a{display:inline-block;width:100%}
@media(max-width:992px){.nav_style{display:none;}}  

.see-xsm-logo img{height: 30px !important;object-fit: contain;}
.see-sm-logo img{height: 35px !important;object-fit: contain;}
.default-size img{height: 40px !important;object-fit: contain;}
.see-medium-logo img{height: 40px !important;object-fit: contain;}
.see-large-logo img{height: 60px !important;object-fit: contain;}
.see-extra-large-logo img{height: 70px !important;object-fit: contain;}

.see-xsm-logo{font-size: 1.8rem !important;}
.see-sm-logo{font-size: 2rem !important;}
.default-size{font-size: 2.4rem !important;}
.see-medium-logo{font-size: 2.4rem !important;}
.see-large-logo{font-size: 2.6rem !important;}
.see-extra-large-logo{font-size: 3rem !important;}

@media(max-width:512px){
.see-sm-logo{font-size: 1.8rem !important;}
.default-size{font-size: 2rem !important;}
.see-medium-logo{font-size: 2rem !important;}
.see-large-logo{font-size: 2.4rem !important;}
.see-extra-large-logo{font-size: 2.8rem !important;}
}
</style>

<script>
try{
let close = document.getElementById("close");
let open = document.getElementById('open');
let nav_style = document.querySelector("#{{section.id}} .nav_style");

open.addEventListener("click", opening);
close.addEventListener("click", closing);

function opening(){
    nav_style.style.display = "block";
    setTimeout(function(){
        nav_style.classList.add('active');
  }, 200);
}

function closing(){
    nav_style.classList.remove('active');
    setTimeout(function(){
        nav_style.style.display = "none";
  }, 400);
}
}
catch(err) {
  console.log(err.message);
}
</script>

Here is a preview of header:

Footer

Here are the details of footer section rule.

{
    "settings":[],
    "rules":{
        "title": {
          "label": "Site Title",
          "type": "quickEditor",
          "show": "yes",
          "default": "Edurin"
        },
      "logo": {
          "label": "Logo",
          "type": "singlefile",
          "show": "yes",
          "default" : "bank.png"
        },
        "subtitle": {
          "label": "Subtitle",
          "type": "quickEditor",
          "show": "yes",
          "default": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum."
        },
        "phone": {
          "label": "Contact Number",
          "type": "number",
          "show": "yes",
          "default": "+11-789-2323",
          "system_val": "{{site.phone}}"
        },
        "email": {
          "label": "Contact Mail",
          "type": "email",
          "show": "yes",
          "default": "contact@domain-name.com",
          "system_val": "{{site.email}}"
        },
        "address": {
          "label": "Address",
          "type": "text",
          "show": "yes",
          "default": "212th Street Model Town, NY, 123098",
          "system_val": "{{site.address}}"
        },
        "copyright": {
          "label": "Copyright Text",
          "type": "text",
          "show": "yes",
          "default": "Copyright © {{ site.title }} {{ date.year }}. All rights reserved."
        },
      "powered": {
            "label": "Powered By",
            "type": "text",
            "show": "yes",
            "default": "Powered by Joonweb.com"
        },
        "social":{
          "label": "Social",
          "type": "socialicon",
          "show": "yes"
        },
       "button":{
              "label": "Action Button",
              "type": "hrefbutton",
              "show": "yes",
              "default": ["Read more"]
          }
      }
  
  }

This is a JSON object that defines a set of rules for a website. It contains various properties that can be customized according to the website's requirements.

The "settings" array is currently empty and can be used to store settings data.

The "rules" object contains several properties that define the appearance and functionality of various elements of the website, such as the logo, title, subtitle, description, action button, contact information, copyright text, and social media icons.

Each rule has a "label" property that describes the name of the element, a "type" property that defines the input type, and a "default" property that sets the default value. The "show" property determines whether the element should be displayed or not.

For example, the "logo" rule has a label of "Logo", a type of "singlefile", which indicates a single image file, and a variant of "images". The "title" rule has a label of "Site Title", a type of "text", which indicates a text input field, and a default value of "Want to work with me?".

The "social" rule is of type "socialicon", which indicates a set of social media icons. The values of this rule are not set by default, as they will vary based on the specific social media platforms being used.

Here is an example of footer.jw:

{% set logo_size_classes = {
  "xs": "see-xsm-logo",
  "s": "see-sm-logo",
  "m": "see-medium-logo",
  "l": "see-large-logo",
  "xl": "see-extra-large-logo"
} %}

{% set logo_class = logo_size_classes[Property.logo.size] ?? '' %}

<footer id="{{section.id}}" class="{{ section.colors ? section.colors : 'background1' }}">
 
    <div class="container-fluid background1">
     <div class="row d-flex justify-content-between gy-lg-0 gy-md-5 gy-sm-4 gy-4">
      <div class="col-lg-4 col-md-6 col-sm-12">
       <div class="footer_style">
        {% if logo %}<div><a href="{{ root.url }}" class="footer_logo {{logo_class ? logo_class : 'default-size'}} ">
         <img src="{{ logo }}" alt="{{ logo.alt }}"></a></div>
        {% endif %}
        {% if title %}<div class="fontStyle2 mb-2 mt-3 {{logo_class ? logo_class : 'default-size'}}">{{ title }}</div>{% endif %}
        {% if subtitle %}<div class="fontStyle8 mb-3">{{ subtitle }}</div>{% endif %}
        {% if button %}
          {% for btn in button %}
            <button class="footer_btn"><a href="{{ btn.href }}" class="fontStyle8" target="{{ btn.target }}">{{ btn.label }}</a></button>
          {% endfor %}
        {% endif %}
       </div>
      </div> 

      {% if section.columns %}
        {% for items in section.columns %}
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="footer_style footer_new">
        <div class="fontStyle3 mb-4">{{items.heading}}</div>
         <ul>
            {% if items.type == 'menu' and items.links %}
              {% for links in items.links %}
                <li><a href="{{links.url}}" class="fontStyle8"><i class="fa-solid fa-angle-right"></i>{{links.title}}</a></li>
              {% endfor %}
            {% endif %}
         </ul>
         </div>
       </div>
       {% endfor %}
      {% endif %}
       
      {% if address or phone or email %}
       <div class="col-lg-3 col-md-6 col-sm-12">
         <div class="footer_style">
         <div class="fontStyle3 mb-4">Get in Touch</div>
         {% if email %}
          {% for i, item in site.email %}
           {% if Property.email.value[i] != 'no' %}
           		<div class="footer_icon fontStyle8"><a href="mailto:{{ item.data }}">
                  <i class="fa-solid fa-envelope"></i>{{ item.data }}</a></div>
           {% endif %}
          {% endfor %}
          {% endif %}
         {% if phone %}
          {% for i, item in site.phone %}
           {% if Property.phone.value[i] != 'no' %}
             <div class="footer_icon fontStyle8"><a href="tel:{{ item.data }}">
               <i class="fa-solid fa-phone"></i>{{ item.data }}</a></div>
           {% endif %}
          {% endfor %}
         {% endif %}
         {% if address %}
          {% for i, item in site.address %}
           {% if Property.address.value[i] != 'no' %}
           <div class="footer_icon fontStyle8"><a href=":{{ item.data }}">
             <i class="fa-solid fa-location-dot"></i>{{ item.data }}</a></div>
           {% endif %}
          {% endfor %}
         {% endif %}

         {% if social %}
         <div class="footer_socel_icon">
            {% for item in social %}
              <div class="fontStyle8"><a href="{{ item.href }}">{{ item.icon }}</a></div>
            {% endfor %}
         </div>
         {% endif %}
       </div> 

       </div>
       {% endif %}

     </div>  
     
     {% if copyright or powered %}
      <div class="row">
          <div class="col-md-12">
            <div class="footer_copy  d-flex justify-content-between {{ section.colors2 ? section.colors2:'background3' }}">
               {% if copyright %}<div class="fontStyle8 py-4">{{ copyright }}</div>{% endif %}
               {% if powered %}<div class="fontStyle8 py-4">{{ site.powered }}</div>{% endif %}
            </div>
          </div>
       </div> 
     {% endif %}

    </div>
</footer>

<style>
  #{{section.id}} .see-xsm-logo img{height: 30px !important;object-fit: contain;}
  #{{section.id}} .see-sm-logo img{height: 35px !important;object-fit: contain;}
  #{{section.id}} .default-size img{height: 40px !important;object-fit: contain;}
  #{{section.id}} .see-medium-logo img{height: 40px !important;object-fit: contain;}
  #{{section.id}} .see-large-logo img{height: 60px !important;object-fit: contain;}
  #{{section.id}} .see-extra-large-logo img{height: 70px !important;object-fit: contain;}

  #{{section.id}} .see-xsm-logo{font-size: 2rem !important;}
  #{{section.id}} .see-sm-logo{font-size: 2.2rem !important;}
  #{{section.id}} .default-size{font-size: 2.6rem !important;}
  #{{section.id}} .see-medium-logo{font-size: 2.6rem !important;}
  #{{section.id}} .see-large-logo{font-size: 2.8rem !important;}
  #{{section.id}} .see-extra-large-logo{font-size: 3rem !important;}

  @media(max-width:512px){
    #{{section.id}} .see-sm-logo{font-size: 1rem !important;}
    #{{section.id}} .default-size{font-size: 2.2rem !important;}
    #{{section.id}} .see-medium-logo{font-size: 2.2rem !important;}
    #{{section.id}} .see-large-logo{font-size: 2.6rem !important;}
    #{{section.id}} .see-extra-large-logo{font-size: 2.8rem !important;}
  }  
  
  .footer_copy{padding: 0 1rem;}
</style>

Here is a preview of footer:

Gallery

Gallery Section:

Very essential section of any template where user can list their image.

Variable	Details	is Required
title	Title variable is used to define text/heading of section.	No
subtitle	Subtitle variable is secondary heading of section	No
description	Description variable output description for the section.	No
buttons	Buttons is for rendering buttons	No
gallery	gallery is array/subsection which includes sub variables array "photos" and "category"	YES
photos	Below rules includes listitem variables in "gallery.photos" array, first check if array has item then for start loop.	YES
img	It will be listitem Image URL and can be used as {{ item.img}} in for loop. Note: its a thumbnail of image, src is below	Yes
src	It contains the full url of media, work for video..	Yes
type	It will return: images,youtube,vimeo, doesnt require and its optional because src is given, you can use src instead.	No
uniqid	It is unique ID of photo in loop.	No
cat	It is a album/category url	No
alt	Alternative text good for SEO for photos
created	DateTime when the photo is uploaded/captured
category	gallery.category array for showing album/categories of photo
url	Unqiue CategoryURL
label	Category Name/Label

Sample JSON of gallery object:

{
    photos:[
        {
            "uniqid: "jw_gallery_espuniq",
            "img": "sample_image.png",
            "src":"sample_image.png",
            "type":"images",
            "alt": "Sample Image",
            "cat": "animal_album"

        },
        {
            "uniqid: "jw_gallery_espuniq",
            "img": "sample_image.png",
            "src":"https:www.youtube.com/watch?v=w01V5FI03MQ",
            "type":"youtube",
            "alt": "Sample Image",
            "cat": "sport_album"
        },
    ],
    "category":[
        {
            "url": "sport_album",
            "label": "Sports"
        },
        {
            "url": "animal_album",
            "label": "Animal"
        }
    ]
}

You have to run foreach loop onetime if category array is empty, if we have more than one category you have to run another loop for showing categories.
Now, with anyjavascript function filter images using url of photos <> category for connection.

Contact

Here are the details of Contact section rule

{
  "rules": {
    "map": {
      "show": "yes",
      "type": "location",
      "label": "Embedd Map",
      "default": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d224345.8392304288!2d77.06889692223507!3d28.52758200688075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x52c2b7494e204dce!2sNew%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1679046218417!5m2!1sen!2sin"
    },
    "form": {
      "show": "yes",
      "type": "siteform",
      "label": "Form"
    },
    "email": {
      "show": "yes",
      "type": "email",
      "label": "Mail",
      "default": "contact@abcz.com"
    },
    "phone": {
      "show": "yes",
      "type": "text",
      "label": "Phone",
      "default": "+11-1234567890"
    },
    "title": {
      "show": "yes",
      "type": "text",
      "label": "Title",
      "default": "Get In Touch With Us !"
    },
    "button": {
      "show": "no",
      "type": "text",
      "label": "Subtitle",
      "default": "Contact us"
    },
    "social": {
      "show": "yes",
      "type": "socialicon",
      "label": "Social"
    },
    "addresss": {
      "show": "yes",
      "type": "text",
      "label": "Address",
      "default": "Sco 19 Iind Floor, Sector 7 C, Sector 7 C"
    },
    "subtitle": {
      "show": "yes",
      "type": "text",
      "label": "Subtitle",
      "default": "Enter Your Subtitle here.."
    },
    "description": {
      "show": "yes",
      "type": "text",
      "label": "Description",
      "default": "Enter Your Description here.."
    }
  },
  "settings": []
}

You must pass type as "location" in Map.

Here is an example of contact.jw:

<section class="main_contact {{ section.colors ? section.colors }}" id="{{section.id}}">
    <div class="contact">
     <div class="container-fluid">
      <div class="row gy-5 d-flex">
        {% if title or subtitle or address or phone or email or website %}
        <div class="col-lg-4 col-md-12 col-sm-12 mx-lg-5 mx-md-0  mx-ms-0 flex-grow-1 d-flex flex-column justify-content-center">
         <div class="contact_first background1">
            {% if title or subtitle %}
            <div class="apply">
              {% if title %}<div class="apply_headeing fontStyle6">{{ title }}</div>{% endif %}
              {% if subtitle %}<div class="apply_subheading fontStyle8">{{ subtitle }}</div>{% endif %}
            </div>
            {% endif %}

            {% if address or phone or email %}
            <div class="apply_media">
              {% if email %}
                {% for i, item in site.email %}
                  {% if Property.email.value[i] != 'no' %}
                      <div class="appply_first fontStyle3"><i class="fa-solid fa-envelope background2"></i>
                        <span class="apply_h">{{ item.data }}</span></div>
                  {% endif %}
                {% endfor %}
              {% endif %}

              
              {% if phone %}
                {% for i, item in site.phone %}
                  {% if Property.phone.value[i] != 'no' %}
                      <div class="appply_first fontStyle3"><i class="fa-solid fa-phone background2"></i>
                        <span class="apply_h">{{ item.data }}</span></div>
                  {% endif %}
                {% endfor %}
              {% endif %}
              {% if address %}
                {% for i, item in site.address %}
                  {% if Property.address.value[i] != 'no' %}
                      <div class="appply_first fontStyle3"><i class="fa-solid fa-location-dot background2"></i>
                        <span class="apply_h">{{ item.data }}</span></div>
                  {% endif %}
                {% endfor %}
              {% endif %}
            </div>
            {% endif %}
         </div>   
        </div>
        {% endif %}

        {% if form_title or form %}
        <div class="col-lg-7 col-md-12 col-sm-12 flex-grow-1">
          <div class="contact_form">
            {% if form_title %}<div class="contact_headeing fontStyle6">{{ form_title }}</div>{% endif %}
            
            <div class="contact-form">
              {{ form }}
            </div>
          </div>  
        </div>
        {% endif %}

      </div>  
     </div>   
    </div>
    {% if map %}
    <div class="map">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12 p-0">
            <div class="contact_map">
              <iframe
                src="{{ map }}"
                width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

</section>

Here is a preview of contact section:

Application form

Here are the details of Application form section rule

{ 
	"settings":[],
	"rules":{
		"title": {
		  "label": "Title",
		  "type": "text",
		  "show": "yes",
		  "default": "Get in touch with us!"
		},
		"subtitle": {
		  "label": "Subtitle",
		  "type": "text",
		  "show": "yes",
		  "default": "Enter Your Welcome Subtitle"
		},
    "media": {
			"label": "Media",
			"type": "singlefile",
			"show": "no",
			"default": "assets/welcome.jpg"
		},
		"form": {
		  "label": "Form",
		  "type": "siteform",
		  "show": "yes"
		}
	}
}

Welcome

Here are the details of Welcome section rule

{
    "settings":[],
    "rules":{
        "title": {
          "label": "Title",
          "type": " quickEditor",
          "show": "yes",
          "default": "Welcome to Edurin University"
        },
      "background": {
            "label": "Background Media",
            "type": "singlefile",
            "show": "yes",
            "default" : "4.jpg"
        },
        "description": {
          "label": "Content Description",
          "type": "simpleEditor",
          "show": "yes",
          "default": "Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit. Deserunt, Ipsa Inventore, Animi Asperiores Suscipit Mollitia Exercitationem"
        },
        "button":{
            "label": "Action Button",
            "type": "hrefbutton",
            "show": "yes",
            "default": ["Get Started"]
        }
      }
}

Here is an example of welcome.jw:

<section class="welcome {{ section.colors ? section.colors }}" id="{{section.id}}" 
  style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('{% if background %}{{ background }}{% endif %}');">
    <div class="container-fluid">
      {% if title or description or button %}
     <div class="row">
      <div class="col-md-12">
        <div class="welcome_text">
          {% if title %}<div class="welcome_heading fontStyle1">{{ title }}</div>{% endif %}
          {% if description %}<div class="welcome_subheading fontStyle4">{{ description }}</div>{% endif %}
          {% if button %}
            {% for btn in button %}
              <a href="{{ btn.href }}" target="{{ btn.target }}" class="welcome_btn fontStyle8">{{ btn.label }}</a>
            {% endfor %}
          {% endif %}
        </div>
      </div>
     </div>
     {% endif %}
    </div>   
</section>

Here is a preview of welcome section:

Client

Here are the details of client section rule

{
    "settings":[],
    "rules":{
        "title": {
          "label": "Title",
          "type": "quickEditor",
          "show": "yes",
          "default": "Our Teachers"
        },
        "subtitle": {
            "label": "Subtitle",
            "type": "quickEditor",
            "show": "yes",
            "default": "Lorem ipsum dolor sit amet consectetur adipisicing elit"
        },

        "listitem":{
            "fields": {
              "item_media": {
                  "label": "Item Media",
                  "type": "singlefile",
                  "show": "yes"
              }
            },
            "default": [
              {"item_media": "shield.png"},
              {"item_media": "course.png"},
              {"item_media": "shield.png"},
              {"item_media": "course.png"}
              
            ]       
          }
      }
}

Here is an example of clients.jw:

<section class="client {{ section.colors ? section.colors }}" id="{{section.id}}">
      <div class="container-fluid">
        {% if title or subtitle %}
        <div class="row">
          <div class="col-md-12">
            <div class="client_header">
              {% if title %}<div class="fontStyle6 mb-1">{{ title }}</div>{% endif %}
              {% if subtitle %}<div class="fontStyle8">{{ subtitle }}</div>{% endif %}
             </div> 
          </div>
         </div>  
        {% endif %}
        
        {% if listitem %}
        <div class="row gy-5">
          {% for key, item in listitem %}
         <div class="col-lg-3 col-md-6 col-sm-12">
          <div class="client_style">
            <div class="client_img">
              <img src="{{ item.item_media }}" alt="{{ item.item_media.alt }}">
            </div>
          </div>
         </div>
          {% endfor %}

        </div> 
        {% endif %}
      </div>
     </section>

Here is a preview of client section:

Content

Here are the details of content section rule

{
    "settings": [],
    "rules": {
        "title": {
            "label": "Title",
            "type": "quickEditor",
            "show": "yes",
            "default": "Enter heading here"
        },
        "description": {
            "label": "Content Description",
            "type": "simpleEditor",
            "show": "yes",
            "default": "<h2>Introduction<\/h2><p>This Privacy Policy will inform you about the types of personal data we collect, the purposes for which we use the data, the ways in which the data is handled and your rights with regard to your personal data. Furthermore, this Privacy Policy is intended to satisfy the obligation of transparency under the EU General Data Protection Regulation 2016\/679<\/p><p>We may change this Privacy Policy from time to time. If we decide to change this Privacy Policy, we will inform you by posting the revised Privacy Policy on the Site. date shown at the end of this Privacy Policy. By continuing to use the Site or Services, you consent to the revised Privacy Policy. We encourage you to periodically review the Privacy Policy for the latest information on our privacy practices.<\/p><ol><li><h2>Information Collected Through Your Use of Our Services<\/h2><p>The following are situations in which you may provide Your Information to us:<\/p><ol><li><p>When you fill out forms or fields through our Services;<\/p><\/li><li><p>When you register for an account with our Service;<\/p><\/li><\/ol><\/li><\/ol>"
        },
        "media": {
            "label": "Media",
            "type": "singlefile",
            "show": "no",
            "default": "img1.jpg"
        },
        "button": {
            "label": "Action Button",
            "type": "hrefbutton",
            "show": "no",
            "default": [
                "Button"
            ]
        }
    }
}

Here is an example of content.jw:

<section class="section-padding {{ section.colors ? section.colors }}" id="{{section.id}}">
    <div class="container">
      	{% if title or media or description %}
          <div class="content">
            {% if title %}<div class="fontStyle2 mg-1">{{ title }}</div>{% endif %}
              
              {% if media %}
                <div class="about-media mg-1">
                    <img src="{{ media }}" alt="{{ media.alt }}">
                </div>
              {% endif %}
            
            	{% if description %}<div class="content_data">{{ description }}</div>{% endif %}
            
              {% if button %}
                <div class="about-button mg-2">
                  	{% for key, btn in button %}
                    	<a href="{{ btn.href }}" target="{{ btn.target }}" class="fontStyle3 {% if key == 0 %}primary-btn{% else %}secondary-btn {% endif %}">{{ btn.label }}</a>
                  	{% endfor %}
                    
                </div>
              {% endif %}
            
          </div>
        {% endif %}
    </div>
</section>

Counter

Here are the details of counter section rule

{

    "settings":[],
    "rules":{
        "background": {
            "label": "Background Media",
            "type": "singlefile",
            "show": "yes",
            "default" : "4.jpg"
        },

        "listitem":{
          "fields": {
              "number":{
                  "label": "Item Value",
                  "type": "number",
                  "show": "yes"
              },
              "item_media": {
                "label": "Item Media",
                "type": "singlefile",
                "show": "yes",
                "varient": ["images"]
              },
              "item_description":{
                  "label": "Item Description",
                  "type": " quickEditor",
                  "show": "yes"
              }
          },
          "default": [
            {
                "item_media": "4.png",
                "number": "2000",
                "item_description": "ONLINE COURSES"
            },
            {
                "item_media": "3.png",
                "number": "1000",
                "item_description": "STUDENTS ENROLLED"
            },
            {
                "item_media": "2.png",
                "number": "100",
                "item_description": "EXPERTS INSTRUCTORS"
            },
            {
                "item_media": "1.png",
                "number": "900",
                "item_description": "HOURS CONTENT"
            }
          ]       
        }
      }
  
}

Here is an example of counter.jw:

<section class="counter background1 {{ section.colors ? section.colors }}" id="{{section.id}}" style="background-image: linear-gradient(#1b1464ab,#1b1464ab), url('{% if background %}{{ background }}{% endif %}'); background-repeat: no-repeat; background-size: cover; width:100%;   background-attachment: fixed">
    <div class="container-fluid">
      {% if listitem %}
     <div class="row d-flex">
      {% for key, item in listitem %}
       <div class="col-lg-3 col-md-6 col-sm-12 flex-grow-1">
         <div class="counter_style">
          {% if item.item_media %}
           <img src="{{ item.item_media }}" alt="{{ item.item_media.alt }}">
           {% endif %}
           {% if item.number or item.item_description %}
            <div class="counter_number mt-3">
              {% if item.number %}<div class="counter_num count fontStyle1" 
              id="counter_1" data-count="{{ item.number }}">{{ item.number }}+</div>{% endif %}
               {% if item.item_description %}<div class="fontStyle9 mt-4">{{ item.item_description }}</div>{% endif %}
            </div>
           {% endif %}
         </div> 
       </div>
       {% endfor %}

     </div> 
      {% endif %}
    </div>  
</section>
<script>
try {
var counted = 0;
$(window).scroll(function() {

  var oTop = $('#counter_1').offset().top - window.innerHeight;
  if (counted == 0 && $(window).scrollTop() > oTop) {
    $('.count').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },

        {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
            $this.addClass("add-count");
          }

        });
    });
    counted = 1;
  }

});
}
catch(err) {
  console.log(err.message);
}
</script>

Here is a preview of counter section:

FAQ

Here are the details of faq section rule

{
    "settings": [],
    "rules": {
        "title": {
            "show": "yes",
            "type": "quickEditor",
            "label": "Title",
            "default": "FAQ"
        },
        "subtitle": {
            "label": "Subtitle",
            "type": "quickEditor",
            "show": "yes",
            "default": "Have a look into your future"
        },
        "listitem": {
            "fields": {
                "question": {
                    "show": "yes",
                    "type": "quickEditor",
                    "label": "Item Question"
                },
                "answer": {
                    "show": "yes",
                    "type": "simpleEditor",
                    "label": "Item Answer"
                }
            },
            "default": [
                {
                    "question": "Q1. What is {{ site.title }}?",
                    "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum."
                },
                {
                    "question": "Q2. What we do?",
                    "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum."
                },
                {
                    "question": "Q3. Who we are?",
                    "answer": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aut quas asperiores laborum."
                }
            ]
        }
    }
}

Here is an example of faq.jw:

<section class="faq space top_bottom {{ section.colors ? section.colors }}" id="{{section.id}}">
    <div class="container-fluid">
      {% if title or subtitle %}
     <div class="row d-flex justify-content-center">
       <div class="col-lg-10 col-md-12 col-sm-12">
         <div class="main_heading mb-5 text-center">
          {% if title %}<div class="fontStyle6 heading_title mb-1">{{ title }}</div>{% endif %}
          {% if subtitle %}<div class="fontStyle8 heading_sub">{{ subtitle }}</div>{% endif %}
         </div> 
       </div>  
     </div>
     {% endif %}

     {% if listitem %}
       <div class="row d-flex justify-content-center">
        <div class="col-lg-10 col-md-12 col-sm-12">
          <div class="accordion " id="accordionExample">
            {% for key, item in listitem %}
           		<div class="accordion-item">
               <div class="accordion-header background2" id="headingOne">
               <button class="accordion-button  fontStyle7" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne{{key}}" {% if key == 0 %}aria-expanded="true"{% else %}aria-expanded="false"{% endif %}aria-controls="collapseOne">
                 	{{ item.question }}
               </button>
              </div>
             <div id="collapseOne{{key}}" class="accordion-collapse collapse  {% if key == 0 %}show{% endif %}  fontStyle8" aria-labelledby="headingOne{{key}}" data-bs-parent="#accordionExample">
               <div class="accordion-body background5 p-4 ">
                 	{{ item.answer }}
               </div>
             </div>
           </div>
            {% endfor %}
           
         </div>
         {% endif %}
      </div>
      </div>    
  </div>
</section>

Here is a preview of faq section:

Image

Here are the details of image section rule

{
	"settings": [],
	"rules": {
		"title": {
			"label": "Title",
			"type": "text",
			"show": "yes",
			"default": "Enter Your Title"
		},
		"subtitle": {
			"label": "Subtitle",
			"type": "text",
			"show": "yes",
			"default": "Enter Your Subtitle"
		},
		"description": {
			"label": "description",
			"type": "simpleEditor",
			"show": "yes",
			"default": "Enter Your Description"
		},
		"media": {
			"label": "Media",
			"type": "singlefile",
			"show": "yes",
			"default": "assets/image.jpg"
		}
	}
}

Service

Here are the details of service section rule

{

    "settings":[],
    "rules":{
        "title": {
            "label": "Title",
            "type": "quickEditor",
            "show": "yes",
            "default": "What We Offer"
        },
        "description": {
            "label": "Content Description",
            "type": "simpleEditor",
            "show": "yes",
            "default": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
        },
        "media": {
            "label": "Media",
            "type": "singlefile",
            "show": "yes",
            "default" : "6.jpg"
        },
        "button":{
            "label": "Action Button",
            "type": "hrefbutton",
            "show": "yes",
            "default": ["Read more"]
        },
        "listitem":{
          "fields": {
            "item_name": {
                "label": "Item Title",
                "type": " quickEditor ",
                "show": "yes"
            },
            "item_media": {
                "label": "Item Media",
                "type": "singlefile",
                "show": "yes"
            },
            "item_description":{
                "label": "Item Description",
                "type": " quickEditor ",
                "show": "yes"
            }
          },
          "default": [
            {
                "item_name": "Safety First",
                "item_media": "shield.png",
                "item_description": "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic"
            },
            {
                "item_name": "Regular Classes",
                "item_media": "course.png",
                "item_description": "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic"
            },
            {
                "item_name": "Certified Teachers",
                "item_media": "teacher.png",
                "item_description": "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic"
            },
            {
                "item_name": "Sufficient Classrooms",
                "item_media": "training.png",
                "item_description": "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic"
            }
          ]       
        }
      }
  
}

Here is an example of services.jw:

<section class="features {{ section.colors ? section.colors }}" id="{{section.id}}">
    <div class="container-fluid">
     <div class="row d-flex align-items-center gy-5">
      {% if title or description or listitem or button %}
      <div class="col-lg-6 col-md-12 col-sm-12 order-lg-0 order-md-1 order-sm-1 order-1 flex-grow-1">
        {% if title or description %}
        <div class="features_text">
          {% if title %}<div class="fontStyle6 mb-3">{{ title }}</div>{% endif %}
          {% if description %}<div class="fontStyle8">{{ description }}</div>{% endif %}
        </div> 
        {% endif %}

        {% if listitem %}
       <div class="row">

        {% for key, item in listitem %}
         <div class="col-lg-6 col-md-12 col-sm-12">
           <div class="features_icons">
            {% if item.item_media %}<img src="{{ item.item_media }}" alt="{{ item.item_media.alt }}"> {% endif %} 
            {% if item.item_name or item.item_description %}
             <div class="features_text">
                {% if item.item_name %}<div class="fontStyle9 mb-2">{{ item.item_name }}</div>{% endif %}
                {% if item.item_description %}<div class="fontStyle8">{{ item.item_description }}</div>{% endif %}
             </div>
             {% endif %}
           </div>
         </div>
         {% endfor %}
          
       </div>
       {% endif %}

       {% if button %}
        {% for btn in button %}
          <a href="{{ btn.href }}" target="{{ btn.target }}" class="welcome_btn fontStyle8 background2">{{ btn.label }}</a>
        {% endfor %}
       {% endif %}
      </div>
      {% endif %}

      {% if media %}
      <div class="col-lg-6 col-md-12 col-sm-12 order-lg-1 order-md-0 order-sm-0 order-0 flex-grow-1">
       <div class="features_img">
        <img src="{{ media }}" alt="{{ media.alt }}">  
       </div>
      </div>
      {% endif %}
     </div>  
    </div>  
</section>

Here is a preview of services section:

Slider

Here are the details of slider section rule

{
    "settings":[
        {
            "id": "slider",
            "label": "Slider",
            "type": "custom",
            "elements": [
              	{
                    "id": "heading1",
                    "type": "heading",
                	"label": "Desktop",
                  	"info": "Customize Slider Settings for desktop/large devices",
                    "default": ""
                },
                {
                  	"id": "desktopAutoplay",
                    "label": "Autoplay",
                  	"info": "Autoplay your Slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "desktopAutoplaySpeed",
                    "label": "Autoplay Slide Speed",
                  	"info": "Customize your Slides delay",
                    "type": "select",
                    "options": [
                        {"label": "1000ms","value": "1000"},
                      	{"label": "2000ms","value": "2000"},
                      	{"label": "3000ms","value": "3000"},
                      	{"label": "4000ms","value": "4000"},
                      	{"label": "5000ms","value": "5000"}
                    ],
                    "default": "3000"
                },
              	{
                  	"id": "desktopSlidesToShow",
                    "label": "Slides to Show",
                  	"info": "Customize number of Slides to show",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "desktopSlidesToScroll",
                    "label": "Slides to Scroll",
                  	"info": "Customize number of Slides to scroll at once",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "desktopSlideSpeed",
                    "label": "Slides Speed",
                  	"info": "Customize speed of sliding on click",
                    "type": "select",
                    "options": [
                        {"label": "100ms","value": "100"},
                      	{"label": "200ms","value": "200"},
                      	{"label": "300ms","value": "300"},
                      	{"label": "400ms","value": "400"},
                      	{"label": "500ms","value": "500"}
                    ],
                    "default": "300"
                },
              	{
                  	"id": "desktopArrows",
                    "label": "Arrows",
                  	"info": "Turn on/off slider arrows",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "desktopDots",
                    "label": "Dots",
                  	"info": "Turn on/off slider dots",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "desktopInfinite",
                    "label": "Infinite Sliding",
                  	"info": "Turn on/off infinite sliding of slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                    "id": "heading2",
                    "type": "heading",
                	"label": "Tablet",
                  	"info": "Customize Slider Settings for tablet devices",
                    "default": ""
                },
              	{
                  	"id": "tabletAutoplay",
                    "label": "Autoplay",
                  	"info": "Autoplay your Slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "tabletAutoplaySpeed",
                    "label": "Autoplay Slide Speed",
                  	"info": "Customize your Slides delay",
                    "type": "select",
                    "options": [
                        {"label": "1000ms","value": "1000"},
                      	{"label": "2000ms","value": "2000"},
                      	{"label": "3000ms","value": "3000"},
                      	{"label": "4000ms","value": "4000"},
                      	{"label": "5000ms","value": "5000"}
                    ],
                    "default": "3000"
                },
              	{
                  	"id": "tabletSlidesToShow",
                    "label": "Slides to Show",
                  	"info": "Customize number of Slides to show",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "tabletSlidesToScroll",
                    "label": "Slides to Scroll",
                  	"info": "Customize number of Slides to scroll at once",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "tabletSlideSpeed",
                    "label": "Slides Speed",
                  	"info": "Customize speed of sliding on click",
                    "type": "select",
                    "options": [
                        {"label": "100ms","value": "100"},
                      	{"label": "200ms","value": "200"},
                      	{"label": "300ms","value": "300"},
                      	{"label": "400ms","value": "400"},
                      	{"label": "500ms","value": "500"}
                    ],
                    "default": "300"
                },
              	{
                  	"id": "tabletArrows",
                    "label": "Arrows",
                  	"info": "Turn on/off slider arrows",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "tabletDots",
                    "label": "Dots",
                  	"info": "Turn on/off slider dots",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "tabletInfinite",
                    "label": "Infinite Sliding",
                  	"info": "Turn on/off infinite sliding of slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                    "id": "heading3",
                    "type": "heading",
                	"label": "Mobile",
                  	"info": "Customize Slider Settings for mobile devices",
                    "default": ""
                },
              	{
                  	"id": "mobileAutoplay",
                    "label": "Autoplay",
                  	"info": "Autoplay your Slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "mobileAutoplaySpeed",
                    "label": "Autoplay Slide Speed",
                  	"info": "Customize your Slides delay",
                    "type": "select",
                    "options": [
                        {"label": "1000ms","value": "1000"},
                      	{"label": "2000ms","value": "2000"},
                      	{"label": "3000ms","value": "3000"},
                      	{"label": "4000ms","value": "4000"},
                      	{"label": "5000ms","value": "5000"}
                    ],
                    "default": "3000"
                },
              	{
                  	"id": "mobileSlidesToShow",
                    "label": "Slides to Show",
                  	"info": "Customize number of Slides to show",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "mobileSlidesToScroll",
                    "label": "Slides to Scroll",
                  	"info": "Customize number of Slides to scroll at once",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "mobileSlideSpeed",
                    "label": "Slides Speed",
                  	"info": "Customize speed of sliding on click",
                    "type": "select",
                    "options": [
                        {"label": "100ms","value": "100"},
                      	{"label": "200ms","value": "200"},
                      	{"label": "300ms","value": "300"},
                      	{"label": "400ms","value": "400"},
                      	{"label": "500ms","value": "500"}
                    ],
                    "default": "300"
                },
              	{
                  	"id": "mobileArrows",
                    "label": "Arrows",
                  	"info": "Turn on/off slider arrows",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "mobileDots",
                    "label": "Dots",
                  	"info": "Turn on/off slider dots",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "mobileInfinite",
                    "label": "Infinite Sliding",
                  	"info": "Turn on/off infinite sliding of slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                }
            ]
        }
    ],
    "rules":{
          "listitem": {
            "fields": {
                "item_name": {
                    "label": "Title",
                    "type": "quickEditor",
                    "show": "yes"
                },
                "item_description": {
                    "label": "Content Description",
                    "type": "simpleEditor",
                    "show": "yes"
                },
                "item_button":{
                    "label": "Action Button",
                    "type": "hrefbutton",
                    "show": "yes"
                },
                "item_media": {
                  "label": "Item Media",
                  "type": "singlefile",
                  "show": "yes"
              }
            },
            "default" : [
                {
                    "item_name": "Education needs complete solution",
                    "item_description": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.",
                    "item_media": "3.jpg",
                    "item_button": ["Contact Us"]
                },
                {
                    "item_name": "Education needs complete solution",
                    "item_description": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.",
                    "item_media": "14.jpg",
                    "item_button": ["Contact Us"]
                },
                {
                    "item_name": "Education needs complete solution",
                    "item_description": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.",
                    "item_media": "15.jpg",
                    "item_button": ["Contact Us"]
                }
                
            ]
        }
    }
}

Here is an example of slider.jw:

<section class="welcome_slider {{ section.colors ? section.colors }}" id="{{section.id}}">
    <div class="container-fluid">
      {% if listitem %}
     <div class="row">
       <div class="slide_first p-0">
         
        {% for key, item in listitem %}
         <div class="slide_img">
           {% if item.item_media %}<img src="{{ item.item_media }}" alt="{{ item.item_media.alt }}">{% endif %}

           {% if item.item_name or item.item_description or item.item_button %}
            <div class="slider_hading">
             {% if item.item_name %}<div class="welcome_heading fontStyle1">{{ item.item_name }}</div>{% endif %}
              {% if item.item_description %}<div class="welcome_subheading fontStyle9">{{ item.item_description }}</div>{% endif %}
             {% if item.item_button %}
              {% for btn in item.item_button %}
              <a href="{{ btn.href }}" target="{{ btn.target }}" class="welcome_btn  fontStyle8 background2 ">{{ btn.label }}</a>
              {% endfor %}
              {% endif %}
            </div>
            {% endif %}
         </div>
         {% endfor %}

       </div>
     </div>
     {% endif %}
    </div> 
</section>

<style>
  .welcome_slider .slick-dots .slick-active{background-color:var(--primary-color)} .welcome_slider .slick-dots li{background-color:var(--secondery-color);border-radius:50%;height:12px;width:12px;display:inline-block;font-size:0;margin:0 .5rem;cursor:pointer} .welcome_slider .slick-dots{text-align:center;margin-bottom:0rem; padding-left:0; bottom:2%; position:absolute; left:50%; transform: translate(-50%);}
  .slide_img .slider_hading{padding:0; display:flex; justify-content:center; align-items:center; flex-direction:column;}
  @media (max-width: 360px){
  }
</style>

<script>

    try {

$('#{{section.id}} .slide_first').slick({
      centerMode:false,
      autoplay: {{ section.slider.desktopAutoplay?section.slider.desktopAutoplay:'true'}},
      autoplaySpeed: {{ section.slider.desktopAutoplaySpeed?section.slider.desktopAutoplaySpeed:'2000'}},
      slidesToShow: {{ section.slider.desktopSlidesToShow?section.slider.desktopSlidesToShow:'1'}},
      slidesToScroll: {{ section.slider.desktopSlidesToScroll?section.slider.desktopSlidesToScroll:'1'}},
      speed: {{ section.slider.desktopSlideSpeed?section.slider.desktopSlideSpeed:'300'}}, 
      arrows: {{ section.slider.desktopArrows?section.slider.desktopArrows:'true'}},
      dots: {{ section.slider.desktopDots?section.slider.desktopDots:'true'}},
      infinite: {{ section.slider.desktopInfinite?section.slider.desktopInfinite:'true'}},

      responsive: [
       {
        breakpoint: 992,
        settings: {
            autoplay: {{ section.slider.tabletAutoplay?section.slider.tabletAutoplay:'true'}},
            autoplaySpeed: {{ section.slider.tabletAutoplaySpeed?section.slider.tabletAutoplaySpeed:'2000'}},
            slidesToShow: {{ section.slider.tabletSlidesToShow?section.slider.tabletSlidesToShow:'1'}},
            slidesToScroll: {{ section.slider.tabletSlidesToScroll?section.slider.tabletSlidesToScroll:'1'}},
            speed: {{ section.slider.tabletSlideSpeed?section.slider.tabletSlideSpeed:'300'}}, 
            arrows: {{ section.slider.tabletArrows?section.slider.tabletArrows:'true'}},
            dots: {{ section.slider.tabletDots?section.slider.tabletDots:'true'}},
            infinite: {{ section.slider.tabletInfinite?section.slider.tabletInfinite:'true'}},
        }
     },
      {
        breakpoint: 700,
        settings: {
          	autoplay: {{ section.slider.mobileAutoplay?section.slider.mobileAutoplay:'true'}},
            autoplaySpeed: {{ section.slider.mobileAutoplaySpeed?section.slider.mobileAutoplaySpeed:'2000'}},
            slidesToShow: {{ section.slider.mobileSlidesToShow?section.slider.mobileSlidesToShow:'1'}},
            slidesToScroll: {{ section.slider.mobileSlidesToScroll?section.slider.mobileSlidesToScroll:'1'}},
            speed: {{ section.slider.mobileSlideSpeed?section.slider.mobileSlideSpeed:'300'}}, 
            arrows: {{ section.slider.mobileArrows?section.slider.mobileArrows:'true'}},
            dots: {{ section.slider.mobileDots?section.slider.mobileDots:'true'}},
            infinite: {{ section.slider.mobileInfinite?section.slider.mobileInfinite:'true'}},
        }
      }

      ]
    });

}
catch(err) {
  console.log(err.message);
}

</script>

Here is a preview of slider section:

Team

Here are the details of team section rule

{
    "settings":[],
    "rules":{
        "title": {
          "label": "Title",
          "type": "quickEditor",
          "show": "yes",
          "default": "Meet the Team"
        },
        "subtitle": {
            "label": "Subtitle",
            "type": "quickEditor",
            "show": "yes",
            "default": "Lorem ipsum dolor sit amet consectetur adipisicing elit"
        },
        "listitem":{
            "fields": {
              "item_name": {
                  "label": "Item Title",
                  "type": "quickEditor",
                  "show": "yes"
              },
              "item_media": {
                  "label": "Item Media",
                  "type": "singlefile",
                  "show": "yes"
              },
              "item_description":{
                  "label": "Item Description",
                  "type": "quickEditor",
                  "show": "yes"
              },
              "item_social":{
                "label": "Social",
                "type": "socialicon",
                "show": "yes"
              }
            },
            "default": [
              {
                  "item_name": "John Doe",
                  "item_media": "34.jpg",
                  "item_description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia iure corporis cupiditate?"
              },
              {
                  "item_name": "Martha",
                  "item_media": "32.jpg",
                  "item_description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia iure corporis cupiditate?"
              },
              {
                  "item_name": "Samantha",
                  "item_media": "35.jpg",
                  "item_description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia iure corporis cupiditate?"
              },
              {
                  "item_name": "Smith",
                  "item_media": "32.jpg",
                  "item_description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia iure corporis cupiditate?"
              }
            ]       
          }
      }
}

Here is an example of team.jw:

<section class="team {{ section.colors ? section.colors }}" id="{{section.id}}">
        <div class="container-fluid">
          {% if title or subtitle %}
          <div class="row">
            <div class="col-md-12">
              <div class="team_header">
                {% if title %}<div class="fontStyle6 mb-1">{{ title }}</div>{% endif %}
                {% if subtitle %}<div class="fontStyle8">{{ subtitle }}</div>{% endif %}
               </div> 
            </div>
           </div>   
          {% endif %}
          
          {% if listitem %}
         <div class="row gy-5">
           {% for key, item in listitem %}
          <div class="col-lg-3 col-md-6 col-sm-12">
           <div class="team_style">
             <div class="team_img">
              {% if item.item_media %}<img src="{{ item.item_media }}" alt="{{ item.item_media.alt }}">{% endif %}
               
               {% if item.item_social %}
              <div class="team_icons">
                {% for social in item.item_social %}
               	 	<a href="{{ social.href }}">{{ social.icon }}</a>
                {% endfor %}
                
              </div>
               {% endif %}
               
             </div>
             
             {% if item.item_name or item.item_description %}
             <div class="team_text">
              {% if item.item_name %}<div class="fontStyle2 team_title">{{ item.item_name }}</div>{% endif %}
              {% if item.item_description %}<div class="fontStyle8 team_subtitle">{{ item.item_description }}</div>{% endif %}
             </div>
             {% endif %}
           </div> 
          </div>
          {% endfor %}
         </div> 
          {% endif %}
          
   </div> 
</section>

Here is a preview of team section:

Testimonial

Here are the details of testimonial section rule

{
    "settings":[
    {
            "id": "slider",
            "label": "Slider",
            "type": "custom",
            "elements": [
              	{
                    "id": "heading1",
                    "type": "heading",
                	"label": "Desktop",
                  	"info": "Customize Slider Settings for desktop/large devices",
                    "default": ""
                },
                {
                  	"id": "desktopAutoplay",
                    "label": "Autoplay",
                  	"info": "Autoplay your Slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "desktopAutoplaySpeed",
                    "label": "Autoplay Slide Speed",
                  	"info": "Customize your Slides delay",
                    "type": "select",
                    "options": [
                        {"label": "1000ms","value": "1000"},
                      	{"label": "2000ms","value": "2000"},
                      	{"label": "3000ms","value": "3000"},
                      	{"label": "4000ms","value": "4000"},
                      	{"label": "5000ms","value": "5000"}
                    ],
                    "default": "3000"
                },
              	{
                  	"id": "desktopSlidesToShow",
                    "label": "Slides to Show",
                  	"info": "Customize number of Slides to show",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "3"
                },
              	{
                  	"id": "desktopSlidesToScroll",
                    "label": "Slides to Scroll",
                  	"info": "Customize number of Slides to scroll at once",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "2"
                },
              	{
                  	"id": "desktopSlideSpeed",
                    "label": "Slides Speed",
                  	"info": "Customize speed of sliding on click",
                    "type": "select",
                    "options": [
                        {"label": "100ms","value": "100"},
                      	{"label": "200ms","value": "200"},
                      	{"label": "300ms","value": "300"},
                      	{"label": "400ms","value": "400"},
                      	{"label": "500ms","value": "500"}
                    ],
                    "default": "300"
                },
              	{
                  	"id": "desktopArrows",
                    "label": "Arrows",
                  	"info": "Turn on/off slider arrows",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "desktopDots",
                    "label": "Dots",
                  	"info": "Turn on/off slider dots",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "desktopInfinite",
                    "label": "Infinite Sliding",
                  	"info": "Turn on/off infinite sliding of slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                    "id": "heading2",
                    "type": "heading",
                	"label": "Tablet",
                  	"info": "Customize Slider Settings for tablet devices",
                    "default": ""
                },
              	{
                  	"id": "tabletAutoplay",
                    "label": "Autoplay",
                  	"info": "Autoplay your Slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "tabletAutoplaySpeed",
                    "label": "Autoplay Slide Speed",
                  	"info": "Customize your Slides delay",
                    "type": "select",
                    "options": [
                        {"label": "1000ms","value": "1000"},
                      	{"label": "2000ms","value": "2000"},
                      	{"label": "3000ms","value": "3000"},
                      	{"label": "4000ms","value": "4000"},
                      	{"label": "5000ms","value": "5000"}
                    ],
                    "default": "3000"
                },
              	{
                  	"id": "tabletSlidesToShow",
                    "label": "Slides to Show",
                  	"info": "Customize number of Slides to show",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "2"
                },
              	{
                  	"id": "tabletSlidesToScroll",
                    "label": "Slides to Scroll",
                  	"info": "Customize number of Slides to scroll at once",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "2"
                },
              	{
                  	"id": "tabletSlideSpeed",
                    "label": "Slides Speed",
                  	"info": "Customize speed of sliding on click",
                    "type": "select",
                    "options": [
                        {"label": "100ms","value": "100"},
                      	{"label": "200ms","value": "200"},
                      	{"label": "300ms","value": "300"},
                      	{"label": "400ms","value": "400"},
                      	{"label": "500ms","value": "500"}
                    ],
                    "default": "300"
                },
              	{
                  	"id": "tabletArrows",
                    "label": "Arrows",
                  	"info": "Turn on/off slider arrows",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "tabletDots",
                    "label": "Dots",
                  	"info": "Turn on/off slider dots",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "tabletInfinite",
                    "label": "Infinite Sliding",
                  	"info": "Turn on/off infinite sliding of slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                    "id": "heading3",
                    "type": "heading",
                	"label": "Mobile",
                  	"info": "Customize Slider Settings for mobile devices",
                    "default": ""
                },
              	{
                  	"id": "mobileAutoplay",
                    "label": "Autoplay",
                  	"info": "Autoplay your Slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "mobileAutoplaySpeed",
                    "label": "Autoplay Slide Speed",
                  	"info": "Customize your Slides delay",
                    "type": "select",
                    "options": [
                        {"label": "1000ms","value": "1000"},
                      	{"label": "2000ms","value": "2000"},
                      	{"label": "3000ms","value": "3000"},
                      	{"label": "4000ms","value": "4000"},
                      	{"label": "5000ms","value": "5000"}
                    ],
                    "default": "3000"
                },
              	{
                  	"id": "mobileSlidesToShow",
                    "label": "Slides to Show",
                  	"info": "Customize number of Slides to show",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "mobileSlidesToScroll",
                    "label": "Slides to Scroll",
                  	"info": "Customize number of Slides to scroll at once",
                    "type": "select",
                    "options": [
                        {"label": "1","value": "1"},
                      	{"label": "2","value": "2"},
                      	{"label": "3","value": "3"},
                      	{"label": "4","value": "4"},
                      	{"label": "5","value": "5"}
                    ],
                    "default": "1"
                },
              	{
                  	"id": "mobileSlideSpeed",
                    "label": "Slides Speed",
                  	"info": "Customize speed of sliding on click",
                    "type": "select",
                    "options": [
                        {"label": "100ms","value": "100"},
                      	{"label": "200ms","value": "200"},
                      	{"label": "300ms","value": "300"},
                      	{"label": "400ms","value": "400"},
                      	{"label": "500ms","value": "500"}
                    ],
                    "default": "300"
                },
              	{
                  	"id": "mobileArrows",
                    "label": "Arrows",
                  	"info": "Turn on/off slider arrows",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "mobileDots",
                    "label": "Dots",
                  	"info": "Turn on/off slider dots",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                },
              	{
                  	"id": "mobileInfinite",
                    "label": "Infinite Sliding",
                  	"info": "Turn on/off infinite sliding of slides",
                    "type": "select",
                    "options": [
                        {"label": "True","value": "true"},
                        {"label": "False","value": "false"}
                    ],
                    "default": "true"
                }
            ]
        }
    ],
    "rules":{
        "title": {
              "label": "Title",
              "type": "quickEditor",
              "show": "yes",
              "default": "Testimonials."
          },
        "subtitle": {
              "label": "Subtitle",
              "type": "quickEditor",
              "show": "yes",
              "default": "Education gives you superhuman strength"
          },
        
        "listitem": {
              "fields": {
                "item_name": {
                    "label": "Item Title",
                    "type": "quickEditor",
                    "show": "yes"
                },
                "item_subtitle":{
                    "label": "Item Subtitle",
                    "type": "quickEditor",
                    "show": "yes"
                },
                "item_media": {
                    "label": "Item Media",
                    "type": "singlefile",
                    "show": "yes"
                },
                "item_description": {
                    "label": "Item Description",
                    "type": "simpleEditor",
                    "show": "yes"
                },
                "stars":{
                    "label": "Item Stars",
                    "type": "number",
                    "show": "yes"
                }
              },
              "default" : [
                  {
                    "item_media": "31.jpg", 
                    "item_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo possimus reprehenderit aspernatur amet odio quos, in sed iusto dolor, voluptas labore. Quam assumenda nesciunt unde id eveniet possimus vero?",
                    "item_name": "Emilia",
                    "item_subtitle": "Designer",
                    "stars": "4"
                  },
                  {
                    "item_media": "35.jpg", 
                    "item_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo possimus reprehenderit aspernatur amet odio quos, in sed iusto dolor, voluptas labore. Quam assumenda nesciunt unde id eveniet possimus vero?",
                    "item_name": "John Doe",
                    "item_subtitle": "Designer",
                    "stars": "4"
                  },
                  {
                    "item_media": "32.jpg", 
                    "item_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo possimus reprehenderit aspernatur amet odio quos, in sed iusto dolor, voluptas labore. Quam assumenda nesciunt unde id eveniet possimus vero?",
                    "item_name": "Maisie",
                    "item_subtitle": "Designer",
                    "stars": "4"
                  },
                  {
                    "item_media": "35.jpg", 
                    "item_description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem explicabo possimus reprehenderit aspernatur amet odio quos, in sed iusto dolor, voluptas labore. Quam assumenda nesciunt unde id eveniet possimus vero?",
                    "item_name": "Kevin Smith",
                    "item_subtitle": "Designer",
                    "stars": "4"
                  }
              ]
          }
      }
  
}

Here is an example of testimonials.jw:

<section class="testimonials {{ section.colors ? section.colors }}" id="{{section.id}}">
    <div class="container-fluid">
      {% if title or subtitle %}
     <div class="row">
       <div class="col-md-12">
         <div class="testimonials_headng">
          {% if title %}<div class="fontStyle6 heading_title">{{ title }}</div>{% endif %}
          {% if subtitle %}<div class="fontStyle8">{{ subtitle }}</div>{% endif %}
         </div>
       </div>
       </div>
       {% endif %}

       {% if listitem %}
       <div class="hellows">
      
        {% for key, item in listitem %}
          <div class="testimonials_style">
            {% if item.stars %}
            <div class="testimonials_icons">
              {% for i in 0..5 %}
              {% if i < item.stars and i < 5 %}
                <i class="fa-solid fa-star"></i>
                {% endif %}
                {% endfor %}

            </div>
            {% endif %}

            {% if item.item_description %}<div class="testimonials_t fontStyle8">{{ item.item_description }}</div>{% endif %}

            {% if item.item_name or item.item_media or item.item_subtitle %}
            <div class="testimonials_img">
              {% if item.item_media %}<img src="{{ item.item_media }}" alt="{{ item.item_media.alt }}">{% endif %}

              {% if item.item_name or item.item_subtitle %}
              <div class="testimonials_text">
                {% if item.item_name %}<div class="fontStyle3">{{ item.item_name }}</div>{% endif %}
                {% if item.item_subtitle %}<span class="fontStyle8">{{ item.item_subtitle }}</span>{% endif %}
              </div> 
              {% endif %}
            </div>
            {% endif %}

          </div>  
          {% endfor %}
       
       </div>
      {% endif %}
    </div>
</section>
 
 
  try {

$('#{{section.id}} .hellows').slick({
      centerMode:false,
      autoplay: {{ section.slider.desktopAutoplay?section.slider.desktopAutoplay:'true'}},
      autoplaySpeed: {{ section.slider.desktopAutoplaySpeed?section.slider.desktopAutoplaySpeed:'2000'}},
      slidesToShow: {{ section.slider.desktopSlidesToShow?section.slider.desktopSlidesToShow:'3'}},
      slidesToScroll: {{ section.slider.desktopSlidesToScroll?section.slider.desktopSlidesToScroll:'2'}},
      speed: {{ section.slider.desktopSlideSpeed?section.slider.desktopSlideSpeed:'300'}}, 
      arrows: {{ section.slider.desktopArrows?section.slider.desktopArrows:'true'}},
      dots: {{ section.slider.desktopDots?section.slider.desktopDots:'true'}},
      infinite: {{ section.slider.desktopInfinite?section.slider.desktopInfinite:'true'}},

      responsive: [
       {
        breakpoint: 992,
        settings: {
            autoplay: {{ section.slider.tabletAutoplay?section.slider.tabletAutoplay:'true'}},
            autoplaySpeed: {{ section.slider.tabletAutoplaySpeed?section.slider.tabletAutoplaySpeed:'2000'}},
            slidesToShow: {{ section.slider.tabletSlidesToShow?section.slider.tabletSlidesToShow:'2'}},
            slidesToScroll: {{ section.slider.tabletSlidesToScroll?section.slider.tabletSlidesToScroll:'2'}},
            speed: {{ section.slider.tabletSlideSpeed?section.slider.tabletSlideSpeed:'300'}}, 
            arrows: {{ section.slider.tabletArrows?section.slider.tabletArrows:'true'}},
            dots: {{ section.slider.tabletDots?section.slider.tabletDots:'true'}},
            infinite: {{ section.slider.tabletInfinite?section.slider.tabletInfinite:'true'}},
        }
     },
      {
        breakpoint: 700,
        settings: {
          	autoplay: {{ section.slider.mobileAutoplay?section.slider.mobileAutoplay:'true'}},
            autoplaySpeed: {{ section.slider.mobileAutoplaySpeed?section.slider.mobileAutoplaySpeed:'2000'}},
            slidesToShow: {{ section.slider.mobileSlidesToShow?section.slider.mobileSlidesToShow:'1'}},
            slidesToScroll: {{ section.slider.mobileSlidesToScroll?section.slider.mobileSlidesToScroll:'1'}},
            speed: {{ section.slider.mobileSlideSpeed?section.slider.mobileSlideSpeed:'300'}}, 
            arrows: {{ section.slider.mobileArrows?section.slider.mobileArrows:'true'}},
            dots: {{ section.slider.mobileDots?section.slider.mobileDots:'true'}},
            infinite: {{ section.slider.mobileInfinite?section.slider.mobileInfinite:'true'}},
        }
      }

      ]
    });

}
catch(err) {
  console.log(err.message);
}

</script>

Here is a preview of testimonials section:

Product Feed

By using below variable you can create product feed section, You need to pass "ProductFeed" in type to make it as Product Widget/Feed.

Sample Rule:

{
   "type":"ProductFeed",
    "settings":[
        {
            "label":"Slider",
            "id": "slider",
            "type": "custom",
            "elements":[
                {
                    "label": "Enable Slider",
                    "id": "enable",
                    "type": "select",
                    "options":[
                        {"label": "Yes", "value": "yes"},
                        {"label":"No","value":"no"}
                    ],
                    "default": "no"
                },
                {
                    "label": "Autoplay",
                    "id": "enable",
                    "type": "select",
                    "options":[
                        {"label": "Yes", "value": "yes"},
                        {"label":"No","value":"no"}
                    ],
                    "default": "no"
                }
            ]
        }
    ],
    "rules": {
       
    }
}

"products" Array:

Variable	Detail
title	Name of the product
description	Description of Product
url	Full Link/URL of product
cover	Featured/Cover Image or First Image, cover.alt can be used for alternative text
media	Product Media If there is one more image, it will show here
sale_price	Selling Price of Product [Discounted Price]
price	Price/MRP of the product, is mainly in ~~599~~
discount	If there is any dicount, it will return eg. 20% off
error_image	if there is no image, you can pass it in onerror function like <img onerror="{{error_image"}} />
ribbon	Special Ribbon Text like "Sale", "New", "Trending" etc.
cartnav	Add to Cart Button
popnav	Show Popup of Cart, if Available or using cartnav instead

Sample JW File:

<section id="{{section.id}}" class="{{section.class}} {{section.colors ? section.colors : ''}} products product-feed padding-2">
    <div class="container manual-container">
      <div class="mobile-menu-style">
        <div class="filter-data d-flex">
          <div class="jw-prod-feed">
            <div class="container manual-container">
              <div class="prod-feed-main">
                {% if products | length > 0 %}
                    <ul class="prod-feed-ul d-flex flex-wrap row">
                        {% for product in products %}
                        <li class="prod-feed-list col-lg-3 col-md-4 col-sm-6 col-xs-6 mb-4">
                            <div class="prod-feed-media position-relative border rounded">
                                <a href="{{product.url}}" class="d-block">
                                    <figure class="prod-figure">
                                      {% if product.media %}
                                        <img src="{{product.featured}}">
                                       	<img src="{{product.media}}">
                                       {% endif %}
                                    </figure>
                                 
                                </a>
                                <div class="prod-feed-cont px-3 my-3">
                                <a href="{{product.url}}">
                                    <div class="font-list-subheading coll-title py-2">{{product.title}}</div>
                                </a>
                                <div class="prod-price-main d-flex font-para">
                                    <div class="prod-price">{{site.currency}} {{product.sale_price}}</div>
                                    {% if product.price > product.sale_price %}
                                  	<div class="prod-mrp-price">{{site.currency}} {{product.price}}</div>
                                  {% endif %}
                                </div>
                                </div>
                                <div class="jw-badge position-absolute d-flex flex-column font-list-para">
                                <span class="sale">Sale</span>
                                {% if product.ribbon %}<span class="new">{{product.ribbon}}</span>{% endif %}
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                {% else %}
                        No Product
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Product Page

Detail Page of Products, name should be "store-product.jw", it will show the Product detail of given handle/url, in rules, type should be "product".

{
  "type":"product",
  "settings":[ ],
  "rules":{}
}

It contains "product" array example:

Variable	Detail	DataType
hash	Product Unique Hash	string
title	Product Name	string
description	Product Description	html
url	Hanlde/URL of product	string
cover	Default Image URL	string
cover.alt	Alternative Text for Cover	string
media	Array of Media Contains [src & alt ], render using loop. `[{ src:"sample_image.png", alt:"alternative text" }]`	array
price	MRP/Regular Price	float
sale_price	Final Price, Discounted Price	float
discount	Discount, if available	float
ribbon	Special/Text Offer of product	string
varients	Options/Varients of Product	html
sku	Quantity Package	string
in_stock	Stock Availability , true and false	boolean
stock	Show Number of Stock	integar
cartnav	Add to Cart Button	string
buynav	Buy Now Button	string
error_image	when there is is an error loading image, you can use like <img src="" onerror="{{error_image}}" />	string

features	Array of features contains below. can be fetch via for loop.	array
icon	Optional
title	feature title	string
desc	feature description	html

# IMPORTANT CLASSES AND DATA ATTRIBUTES FOR PRODUCTS PAGE:

Attributes/Class	Usage
jw_product_section	It Should in starting of the product detail section.
data-option="sale"	`<div class="sale-price"> {{site.currency}} <span data-option="sale">{{product.sale_price}}</span></div>`
data-option="price"	`<div class="price"> {{site.currency}} <span data-option="price">{{product.price}}</span></div>`
data-option="discount"	`<span data-option="discount">{{product.discount}}</span>`
data-option="checkoutButtons"	`<div class="product-btn-group" data-option="checkoutButtons"> <div class="button add-cart">{{ product.cartnav }}</div> {% if product.in_stock %}<div class="button buy-now">{{ product.buynav }}</div>{% endif %} </div>`
product__slider-main	This class should be in parent of main media
product__slider-thmb	This class should be in parent of thumbnails

Important: We need to cover all the dynamic things like rating, buttons, instock/outofstock text, hurryup text etc in data-options attribute

product array also contain apps data like rating if available.

Sample store-product.jw file:

<div id="{{section.id}}" class="jw-product padding-2 jw_product_section">
    <div class="container manual-container">
      <div class="row d-flex">
        <div class="col-lg-6 col-sm-6 col-xsm-12 pr-3">
          <div class="product-image">
            <div class="product-image-main">
              <img src="assets/basmati-rice.webp" alt="" id="product-main-image">
            </div>
            <div class="product-image-slider">
              {% for media in product.media %}
                <img src="{{media.src}}" alt="{{media.alt}}"  class="image-list" onerror="{{product.error_image}}">
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xsm-12">
          <div class="product">
            {% if product.name != '' %}
            <div class="product-title font-heading">
              <h2>{{product.title}}</h2>
            </div>
            {% endif %}
            {% if product.rating_count %}
            <div class="product-rating" data-option="ratings">
              {{product.rating_count}}
              <span><i class="bx bxs-star"></i></span>
              <span class="review">{% if product.rating_detail %} {{ product.rating_detail}} {% endif %}</span>
            </div>
            {% endif %}

            <div class="product-price" data-option="priceData">
              <span class="offer-price font-subheading">{{site.currency}} {{product.price}}</span>
              <span class="sale-price">{{site.currency}} {{product.sale_price}}</span>
              {% if product.discount %}
              <span class="prod-discount">{{product.discount}}</span>
              {% endif %}
            </div>
            <div class="product-details">
              <h3>Description</h3>
              <p class="font-para">{{product.description}}</p>
            </div>
<varients>
{{product.varients}}
</varients>
        
            <span class="divider"></span>
            <div class="add-cart-detail d-flex flex-wrap align-items-center">
              <div class="number-input d-flex align-items-center">
                <span class=""><strong>Qty :</strong></span>
                <div class="add-cart d-flex align-items-center">
                  <span class="minus">-</span>
                  <input id="product_quantity" type="text" class="input-box" min="1" max="99" steps="1" value="1" required="" readonly="">
                  <span class="plus">+</span>
                </div>
              </div>
              <div class="product-btn-group" data-option="checkoutButtons">
                {# <div class="button buy-now"><i class='bx bxs-zap' ></i> Buy Now</div> #}
                <div class="button add-cart">
                  {{ product.cartnav}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Plans

Documentation for adding a pricing & plans/subscription section, In which you need to pass type "plans" in rules to access pricing array.

Sample Rules:

{
  "type":"plans", 
  "settings":[],
  "rules":{
    "title": {
      "label": "Title",
      "type": "text",
      "show": "yes",
      "default": "Our Plans"
    },
    "subtitle": {
      "label": "Subtitle",
      "type": "quickEditor",
      "show": "yes",
      "default": "Choose best plans suitable for you"
    },
    "button":{
      "label": "Action Button",
      "type": "hrefbutton",
      "show": "yes",
      "default": ["Contact Us"]
    },
  }
}

By Adding type as pricing, An array "plans" will be assign to the JW section by which you can render the pricing module using forloop.

plans Array:

Variable	Detail
title	Render title in loop
tagline	Render the tagline
icon	Render icon if any used
price	Price of the plan
features	Array of features, you can use forloop for retriving it, array contain "value" key where feature is feeded. {{feature.title}}
ribbon	If any ribbon assigned
highlight	Is recommended?
buynow	Renders Button

plan.features array
title -> Render main feature
starred -> is Heading, returns true false
info -> Info icon on hovering some time needs, optional.

Example JW:

<section 
         id="{{section.id}}" 
         class="section-pd see-171 price-section about-us {{section.class}} {{section.colors ? section.colors : ''}} {{section.align ? 'see-text-' ~ section.align }}" 
         {{section.attributes}}>
  <div class="floating-icons icon-plane1"><i class="fa-solid fa-person-walking-luggage"></i></div>
  <div class="container">
    {% if title or subtitle %}
    <div class="site-heading">
      {% if title %}<h2>{{ title }}</h2>{% endif %}
      {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
         {% if plans %}
            <div class="price-wrapper">
              {% for plan in plans %}
              <div class="price-card see-list-item see-second-color {{plan.highlight}}">
                <div class="price-ribbon see-padding-4 see-padding-left-right-4 see-third-color">
                  {{plan.ribbon}}
                </div>
                {% if plan.icon %}
                <div class="price-card-media">
                  <img src="{{plan.icon}}" alt="{{plan.icon.alt}}" onerror="{{plan.errimg}}">
                </div>
                {% endif %}
                <div class="price-card-text">
                  <div class="price-card-top-text">
                    <div class="price-list-title">{{plan.tagline}}</div>
                    <div class="price-list-subtitle"><span class="currency">{{site.currency}}</span>{{plan.price}}</div>
                    <div class="price-list-tagline"><span class="currency"></span>{{plan.title}}</div>
                  </div>
                  <div class="price-border"></div>
                  <div class="price-card-bottom-text">
                    <ul class="price-card-desp desp">
                      {% for feature in plan.features %}
                      <li class="list {{ feature.starred ? 'bolder-item' }}" >
{{ feature.title }}
{% if feature.info %}
<i class="info-icon">
{{ feature.info}}
</i>
{% endif %}

</li>
                      {% endfor %}
                    </ul>
                  </div>
                  <div class="price-card-link">
                    {{plan.buynow}}
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
            {% endif %}
    </div>
    {% endif %}

    <div class="about-content">
      <div class="row">
        <div class="col-lg-6 d-flex flex-column justify-content-center">
          <div class="about-text">
            {% if button %}
            <div class="about-button">
              {% for key, btn in button %}
              <a href="{{ btn.href }}" target="{{ btn.target}}" class="{{ key == 0?'primary-btn':'primary2-btn'}} about-btn d-inline-block">{{ btn.label }}</a>
              {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features

{
  "rules": {
    "media": {
      "show": "yes",
      "type": "singlefile",
      "label": "Media",
      "default": "assets\/features.jpg"
    },
    "title": {
      "show": "yes",
      "type": "text",
      "label": "Title",
      "default": "Enter Your Title"
    },
    "button": {
      "show": "no",
      "type": "hrefbutton",
      "label": "Button",
      "default": "Quick Enquiry"
    },
    "listitem": {
      "fields": {
        "item_media": {
          "show": "yes",
          "type": "singlefile",
          "label": "Item Media",
          "varient": [
            "images"
          ]
        },
        "item_buttons": {
          "show": "no",
          "type": "hrefbutton",
          "label": "Action Button",
          "default": "Read More"
        },
        "item_subtitle": {
          "show": "no",
          "type": "text",
          "label": "Item Subtitle"
        },
        "item_name": {
          "show": "yes",
          "type": "text",
          "label": "Item Title"
        },
        "item_description": {
          "show": "yes",
          "type": "quickEditor",
          "label": "Item Description"
        }
      },
      "default": [
        {
          "item_media": "assets\/item1.png",
          "item_name": "Enter Your listitem title",
          "item_subtitle": "Enter Your listitem subtitle.",
          "item_description": "Enter Your listitem description."
        },
        {
          "item_media": "assets\/item2.png",
          "item_name": "Enter Your listitem title",
          "item_subtitle": "Enter Your listitem subtitle",
          "item_description": "Enter Your listitem description."
        },
        {
          "item_media": "assets\/item3.png",
          "item_name": "Enter Your listitem title",
          "item_subtitle": "Enter Your listitem subtitle",
          "item_description": "Enter Your listitem description."
        },
        {
          "item_media": "assets/item4.png",
          "item_name": "Enter Your listitem title",
          "item_subtitle": "Enter Your listitem subtitle",
          "item_description": "Enter Your listitem description."
        }
      ]
    },
    "subtitle": {
      "show": "yes",
      "type": "quickEditor",
      "label": "Subtitle",
      "default": "Enter Your Subtitle"
    },
    "description": {
      "show": "no",
      "type": "quickEditor",
      "label": "Description",
      "default": "Enter Your Description"
    },
    "footer_buttons": {
      "show": "no",
      "type": "hrefbutton",
      "label": "footer Button",
      "default": "Read More"
    },
    "footer_description": {
      "show": "no",
      "type": "quickEditor",
      "label": "footer description",
      "default": "Enter Your footer description"
    }
  },
  "settings": []
}

Blog

Documentation for adding a blog and article/post section, In which you need to pass type "blog" in rules to access blog array.Sample Rules:
Constructing Feed or Blog Front:- "blog.jw"

{
  "type":"blog", 
  "settings":[],
  "rules":{
    "title": {
      "label": "Title",
      "type": "text",
      "show": "yes",
      "default": "Our Plans"
    },
    "subtitle": {
      "label": "Subtitle",
      "type": "quickEditor",
      "show": "yes",
      "default": "Choose best plans suitable for you"
    },
    "button":{
      "label": "Action Button",
      "type": "hrefbutton",
      "show": "yes",
      "default": ["Contact Us"]
    },
  }
}

By Adding type as pricing, An array "blog.items" will be assign to the JW section by which you can render the blog articles/posts module using forloop.

"blog.items" Variable Detail

Variable	Details
title	Render Blog Item/Post Title
description	Render description of blog item
url	Render Link to post
img	Render Image of Blog
created	Renders Time ago
author	If any author name, will print here
views	Any views in numbers
is_featured	returns true/false

Blog Article/Details :- "blog-post.jw"

It contains "blog" array in section, which you can renders it data like {{blog.title}}.

Variable	Details
title	Render Post Title
summary	Short Description of Post
article	Render Full Article/Post, it must be render between article tag is a good practice.
created	Renders Time ago
author	If any author name, will print here
readtime	Show minutes read time
views	show views
media	Render Media Src
share	Renders sharing buttons
tags	Tags array contain "title" and "url" can be render using forloop

Managing Blog Tags & Category:

Tags Example:

{% if blog.tags %}
    <ul>
        {% for tag in blog.tags %}
            <li> <a href="{{tag.url}}"> {{tag.title}} </a><li>
        {% endfor %}
    </ul>
{% endif %}

Categories Example:

{% if blog.category %}
    <ul>
        {% for cat in blog.category %}
            <li> <a href="{{cat.url}}"> {{cat.title}} </a><li>
        {% endfor %}
    </ul>
{% endif %}

Global Blog Tags - can be fetched in any section:

site.blog array contain global date
===========================
tags:[{label:'sample tag', url: 'sample_tags'}, {label:'Sample Tag 2', url: 'sample_tags2'}]
categories: [{label:'Sample Cat', url: 'sample_category'}, {label:'Sample Cat2', url: 'sample_category2'}]

Both can be achieved through for loop.

Cart

To Implement cart page, need to use below variable, Page name should be cart.jw:
Cart Page is splitted into two part, 1st items, and 2nd overall.

Basic Cart Variables:

Variables	Details
subtotal	Render subtotal (Orignal Price) of all
discount	Displays overall dicounts in numbers
tax	Render Tax if Available
cod	Render total shiiiping charges
total	Render Payble, Total amount
checkout	it need to imlement in checkout button or link, it will render attribute, eg: <a href="javascript:void(0);" {{checkout}}> Checkout </a>
items	cart.items, It is array defined below to render cart items with the help of loop

cart.items Array

Variables	Details
index	Return lineItem and is mandatory
hash	Return Item Unique ID
product_id	Return Product ID
product_url	Returns Full Product URL
title	Returns Product Name
qty	Ordered Qty
price	Render Price / MRP
sale_price	Render Selling Price
discount	Render discount percentage.
total	Total Amount, (Qty * Sale Price)
cover	Render Default Image of Product
addons
varients	Returns Variaent Label
remove	Return classname, put this on anchor of remove example: <a class="remove-button {{item.remove}}" href="">Remove</a>

cart.jw

<section id="{{section.id}}" class="add-cart padding-2  jw_cart_section {{section.class}} " {{section.attributes}}>
    <div class="pb-5">
      <div class="container manual-container">
        {% if cart.items %}
        <div class="row">
          <div class="col-lg-12 p-2 bg-white rounded shadow-sm mb-2">
            <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col" class="border-0 bg-light">
                      <div class="p-2 px-3 text-uppercase">Product</div>
                    </th>
                    <th scope="col" class="border-0 bg-light">
                      <div class="py-2 text-uppercase">Price</div>
                    </th>
                    <th scope="col" class="border-0 bg-light">
                      <div class="py-2 text-uppercase">Quantity</div>
                    </th>
                    <th scope="col" class="border-0 bg-light">
                      <div class="py-2 text-uppercase">Remove</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {% for item in cart.items %}
                  <tr data-item="{{item.index}}">
                    <th scope="row" class="border-0">
                      <div class="p-2 d-flex flex-wrap gap-3 align-items-center cart-media">
                        <img src="{{item.cover}}" alt="" width="70" height="70" class="img-fluid rounded shadow-sm">
                        <div class="ml-3 d-inline-block align-middle">
                          <h6 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">{{item.title}}</a></h6><span class="text-muted font-weight-normal font-italic d-block font-para">Qty:{{item.qty}}</span>
                        </div>
                      </div>
                    </th>
                    <td class="border-0 align-middle cart-items"><strong>{{site.currency}}{{item.price}}</strong></td>
                    <td class="border-0 align-middle cart-items">
                      <div class="d-flex flex-row gap-2">

 <span data-var="negative" onclick="JWCart.update('redirect','{{item.hash}}',-1, 'negative', '{{item.product_id}}')">-</span>
                      <input type="number" class="input-box" min="1" max="5" steps="1" value="{{item.qty}}" required="" readonly>
                      <span data-var="positive" onclick="JWCart.update('redirect','{{item.hash}}',1, 'positive', '{{item.product_id}}')">+</span>

                        <a class="btn btn-link px-2" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                          <i class="fas fa-minus" aria-hidden="true"></i>
                        </a>
                        <input id="form1" min="0" name="quantity" value="2" type="number" class="form-control form-control-sm" style="width: 50px;">
                        <a class="btn btn-link px-2" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                          <i class="fas fa-plus" aria-hidden="true"></i>
                        </a>



                      </div>
                    </td>
                    <td class="border-0 align-middle cart-items"><a href="#" class="text-dark remove-product {{item.remove}}"><i class="fa fa-trash" ></i></a></td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="row py-3 p-3 px-sm-0 bg-white rounded shadow-sm">
          <div class="col-lg-6 col-sm-12 col-xsm-12 ">
            <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Coupon code</div>
            <div class="p-4">
              <p class="font-italic mb-4">If you have a coupon code, please enter it in the box below</p>
              <div class="input-group mb-4 border rounded-pill p-2">
                <input type="text" placeholder="Apply coupon" aria-describedby="button-addon3" class="form-control border-0">
                <div class="input-group-append border-0">
                  <button id="button-addon3" type="button" class="btn btn-link font-para"><i class="fa fa-gift mr-2"></i>Apply coupon</button>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-sm-12 col-xsm-12 ">
            <div class="bg-light rounded-pill px-4 py-3 text-uppercase font-weight-bold">Order summary </div>
            <div class="p-4">
              <p class="font-italic mb-4">Shipping and additional costs are calculated based on values you have entered.</p>
              <ul class="list-unstyled mb-4">
                <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Order Subtotal </strong><strong>{{site.currency}} {{cart.total}}</strong></li>
                <li class="cart-desc">Shipping & taxes calculated at checkout</li>
    
              </ul><a href="javascript:void(0);" id="jwCheckout__nav" {{cart.checkout}} class="jwCheckout__nav jw-btn see-prime-color font-para py-2 btn-block">Procceed to checkout</a>
            </div>
          </div>
        </div>
        {% else %}
          <div class="cart-empty-main"> 
            <div class="cart-svg">
              <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewbox="0 0 60.013 60.013" style="enable-background:new 0 0 60.013 60.013;" xml:space="preserve">
                <g>
                    <path d="M11.68,13.006l-0.832-5h-2.99c-0.447-1.72-1.999-3-3.858-3c-2.206,0-4,1.794-4,4s1.794,4,4,4c1.859,0,3.411-1.28,3.858-3
                        h1.294l0.5,3H9.615l5.17,26.016c-2.465,0.188-4.518,2.086-4.76,4.474c-0.142,1.405,0.32,2.812,1.268,3.858
                        c0.949,1.05,2.301,1.652,3.707,1.652h2c0,3.309,2.691,6,6,6s6-2.691,6-6h11c0,3.309,2.691,6,6,6s6-2.691,6-6h4c0.553,0,1-0.447,1-1
                        s-0.447-1-1-1h-4.35c-0.826-2.327-3.043-4-5.65-4s-4.824,1.673-5.65,4h-11.7c-0.826-2.327-3.043-4-5.65-4s-4.824,1.673-5.65,4H15
                        c-0.842,0-1.652-0.362-2.224-0.993c-0.577-0.639-0.848-1.461-0.761-2.316c0.152-1.509,1.546-2.69,3.173-2.69h0.781
                        c0.02,0,0.04,0,0.06,0l38.995-0.013c2.751,0,4.988-2.237,4.988-4.987V12.994L11.68,13.006z M4,11.006c-1.103,0-2-0.897-2-2
                        s0.897-2,2-2s2,0.897,2,2S5.103,11.006,4,11.006z M46,45.006c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4
                        S43.794,45.006,46,45.006z M23,45.006c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S20.794,45.006,23,45.006z M58.013,36.006
                        c0,1.647-1.341,2.987-2.988,2.987L16.82,39.005l-4.77-23.999l45.962-0.013V36.006z"/>
                    <path d="M20.013,22.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                        s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S19.46,22.006,20.013,22.006z"/>
                    <path d="M20.013,34.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                        s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S19.46,34.006,20.013,34.006z"/>
                    <path d="M33.013,22.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                        s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S32.46,22.006,33.013,22.006z"/>
                    <path d="M33.013,34.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                        s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S32.46,34.006,33.013,34.006z"/>
                    <path d="M46.013,22.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                        s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S45.46,22.006,46.013,22.006z"/>
                    <path d="M46.013,34.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                        s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S45.46,34.006,46.013,34.006z"/>
                </g>
							</svg>
            </div>
            <div class="cart-empty">Oops! Your Cart is empty!</div>
            <div class="empty-cart-des">looks like you haven't added anything to your cart yet</div>
            {% if buttons %}
            <div class="see-button-prime empty-cart-btn">
              {{buttons}}
            </div>
            {% endif %}
          </div>	
          {% endif %}
      </div>
    </div>
  </section>

Login

Render login page for members app, File name should be "login"
=========================================================
login.json Data

{
    "settings": [],
    "rules":{
        "title":{
            "label":"Title",
            "type": "quickEditor",
            "show":"yes",
            "default": "Login"
        },
        "subtitle":{
            "label":"Subtitle",
            "type": "quickEditor",
            "show":"yes",
            "default": "Login to your account"
        },
        "media":{
            "label":"Media",
            "type": "singlefile",
            "show":"no",
            "default": "loginIcon.png"
        },
        "buttons":{
            "label":"Buttons",
            "type": "hrefbutton",
            "show":"yes",
            "default": ["Don't have account"]
        },
        "form":{
            "label": "Form",
            "type": "siteform",
            "show": "yes",
            "default": "login"
        },
        "footer_description":{
            "label":"Footer Description",
            "type": "simpleEditor",
            "show":"no",
            "default": "By Signin, you will automatically accept all the terms and condition"
        }
    }
}

in Above login.json file, Form is must, also default login is must, don't change anything with login., You can also use form and login as default in any section to make user login, either in welcome or any other section.

Signup

Render Signup page for members app, File name should be "signup.jw"
=========================================================
signup.json Data

{
    "settings": [],
    "rules":{
        "title":{
            "label":"Title",
            "type": "quickEditor",
            "show":"yes",
            "default": "Signup"
        },
        "subtitle":{
            "label":"Subtitle",
            "type": "quickEditor",
            "show":"yes",
            "default": "Create an Account"
        },
        "media":{
            "label":"Media",
            "type": "singlefile",
            "show":"no",
            "default": "SignupIcon.png"
        },
        "buttons":{
            "label":"Buttons",
            "type": "hrefbutton",
            "show":"yes",
            "default": ["Already have an account?"]
        },
        "form":{
            "label": "Form",
            "type": "siteform",
            "show": "yes",
            "default": "signup"
        },
        "footer_description":{
            "label":"Footer Description",
            "type": "simpleEditor",
            "show":"no",
            "default": "By Signup, you will automatically accept all the terms and condition"
        }
    }
}

in Above signup.json file, Form is must, also default "signup" is must, don't change anything with signup., You can also use form and "signup" as default in any section to make user register to your site, either in welcome or any other section.

Store Collection

Rendering Products Category/Collection in your store, Section & rule should be "store-collection.jw" and "store-collection.json" respectively.
and in rules, type should be "collection".
you will be provided by an array called "collection" which contains "item" below array:

store-collection.json rule file:

{
    "type": "collection",
    "settings": [],
    "rules":{}
}

collection.items Array

Variable	Details
title	Render Collection/Category Title, item.title
description	Render Description of collection, item.description
url	Render Link to Collection Products., item.url
cover	Render Cover/Default Image of collection

Collection Products

To Render Products listing in collection, Rules and section files should be "store-collection-products.json" for rule and "store-collection-products.jw" for html.
By making this file, an array name "collection" , "products", "sort" and "filter" if enabled .

"collection" Array: - single array

Variables	Details
title	Render Collection Title
description	Render Description of Collection using {{collection.description}}

"products" Array: - contains multiple product. (forloop)

Variables	Details
title	Render Product title
default_varient	Render default varient Id for add to cart purpose
description	Render Description of Collection using {{collection.description}}
url	render product link
media	render default media
price	Price/MRP of product
sale_price	Sale Price of product
discount	Discount of product
ribbon
cover
cartnav
buynav

"sort" Array -> Multiple sorting option, will be used in select on collection-product page.
select name should be "jw_sort_callback".

Variables	Details
a_to_z
z_to_a
low_to_high
hight_to_low
old_to_new
new_to_old

Sort Example:

{% if sort %}
    <select name="jw_sort_callback">
            <option value="a_to_z">Alphabetically, A to Z</option>
            <option value="z_to_a">Alphabetically, Z to A</option>
            <option value="low_to_high">Price, Low to High</option>
            <option value="hight_to_low">Price, High to Low</option>
            <option value="old_to_new">Date, Old to New</option>
            <option value="new_to_old">Date, New To Old</option>
    </select>
{% endif %}

"filters" Example

{% if filters %}
<div class="filter-left">
   	    <i class="fa fa-times" aria-hidden="true"></i>
    <div class="filter-left-data see-full">
       <div class="pos-sticky">
        {% if filters.stock %}
        <div class="filter-top-click">
            <span class="mob-click">Availability </span>
            <div class="mob-click-show">
            <div class="instock">
                <input type="checkbox" id="instock_check" name="filter_stock" class="jw_filter_changer" value="instock"> 
                <label for="instock_check">in stock ({{filters.stock.in}})</label>
            </div>
            <div class="instock">
                <input type="checkbox" id="outstock_check" name="filter_stock" class="jw_filter_changer" value="outofstock"> 
                <label for="outstock_check">out of stock({{filters.stock.out}})</label>
            </div>
            </div>
        </div>
        {% endif %}
        {% if filters.price %}
        <div class="wrapper">
            <fieldset class="filter-price">
                <span class="price-title mob-click">{{ filters.label }}</span>
            <div class="mob-click-show">
            <div class="price-field">
                <input type="range" class="jw_filter_changer"  min="{{filters.price.min}}" max="{{filters.price.max}}" value="{{filters.price.min}}" id="lower">
                <input type="range" class="jw_filter_changer" min="{{filters.price.min}}" max="{{filters.price.max}}" value="{{filters.price.max}}" id="upper">
            </div>
            <div class="price-wrap">
                <div class="price-wrap-1">
                <label for="jw_filter_one">{{site.currency}}</label>
                <input id="jw_filter_one">
                </div>
                <div class="price-wrap_line">-</div>
                <div class="price-wrap-2 price-wrap-1">
                <label for="jw_filter_two">{{site.currency}}</label>
                <input id="jw_filter_two">
                </div>
            </div>
            </div>
            </fieldset> 
        </div>
        {% endif %}
        </div>
    </div>
</div>
{% endif %}

{% if filters.options %}
        {% for optionName, option in filters.options %}
        <div class="dropdown"  data-attribute="{{optionName}}">
          <a type="button" class="js-link fontStyle8">{{optionName}} <i class="fa fa-chevron-down drop_left"></i></a>
          <ul class="js-dropdown-list drop_size">
            {% for optvalue in option %}
              <li class="drop_size_item fontStyle9" data-value="{{optvalue}}">
                <input type="checkbox" class="jw_filter_changer" value="{{optvalue}}" name="{{optionName}}" /> {{optvalue}} </li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}
      {% endif %}

   {% if filters.vendors %}
        <div class="dropdown">
          <a type="button" class="js-link fontStyle8">Brands </a>
          <ul class="filter-list js-dropdown-list active_list" data-filter="vendor">
            {% for vendor in filters.vendors %}
              <li class="drop_size_item fontStyle9">
                <input type="checkbox" class="jw_filter_changer" data-vendor="{{vendor.handle}}" value="{{vendor.handle}}" name="vendor" /> 
                <span class="checkbox_change">{{ vendor.title }}</span>
            </li>
            {% endfor %}
          </ul>
        </div>
  {% endif %}

all underscores classes and names are mandatory to use.

"Search" section.

Same variables as of collection-products, include following for the search
File name and rule name should be "store-search.jw" and "store-search.json" respectively.
Extra Variable: search.query

{% if search.query != "" %}
 <div class="see-title pro-title">Showing Result of "{{search.query}}"</div>
{% endif %}

Member Area

ExaCreating Member area/ Profile Page for Template, you need to put type as "profile.jw" and "profile.json"
it automatically contain "users" and "members" array as follows.

"members" Array:

Variables	Details
menu	Array contains members navigation
content	Contains content of the select members page.

"users" Array

Variables	Details
id	User ID, for checking if user is logged in or not
username	returns username of member
email	returns email
mobile	returns mobile number
avatar	returns avatar of member if available, checking is must
status	Render status of member
created	Joining Date of Member

Example:

<section class="see-section dashboard-edit see-181">
 {% if user.id !="" %}
    <div class="container">
      <div class="top-cont">
        <div class="see-title title">Profile Details</div>
        <div class="see-subtitle subtitle">View and update your account details, profile and more.</div>
      </div>
      <div class="dashboard-edit-main">
        <div class="sticky-div">
          <div class="dashboard-left">
            <ul>
              <li>
                <i class="fa fa-user" aria-hidden="true"></i>
                <span>Hi, {{user.username}}</span>
              </li>
            </ul>
            {{member.menu}}
          </div>
        </div>
        <div class="dashboard-right">
          {{member.content}}
        </div>
      </div>
    </div>
  {% endif %}
  </section>

Popup

In Every template, there should be a popup which can be help as a welcome or quick enquiry form.
So for creating it, we should have to create a file with any file name, for example. mypopup.jw and mypopup.json.

It will be like anyother basic section, but here we have to add "data-popup" attribute and pass page_id "data-popup={{section.page_id}}" in attribute also by default, popup section should be hidden through css or inline style.
Also it should contain close button which has ability to close.
Sample "mypopup.jw":


<div class="banner2-popup {{ section.colors ? section.colors }}"  id="{{section.id}}" data-popup="{{section.page_id}}">
    
    <div class="banner2-popup-content {% if not media or not form %}banner2-popup-content2{% endif %}">
        <div class="close-popup">
            <a href="#" class="popup-close" id="popup-close"><i class="fa-solid fa-x"></i></a>
        </div>
        <div class="row">

          {% if form or title or subtitle %}
            <div class="col-sm-6 d-flex flex-column justify-content-center flex-grow-1">
              {% if title or subtitle %}
            <div class="p-4">
                {% if title %}<div class="fontStyle2 mg-0">{{ title }}</div>{% endif %}
                {% if subtitle %}<div class="fontStyle8">{{ subtitle }}</div>{% endif %}
            </div>
          {% endif %}
              
              {% if form %}
                <div class="banner2-form p-4">
                  {{ form }}
                </div>
              {% endif %}
            </div>
          {% endif %}
          
          {% if media %}
            <div class="col-sm-6 banner2-media  flex-grow-1">
                <img src="{{ media }}" alt="{{ media.alt }}">
            </div>
          {% endif %}
            
           
        </div>
    </div>
</div>

<script>
  
  try{
$('#{{section.id}} .popup-close').click(function(event){
        event.preventDefault();
        $('#{{section.id}}').fadeOut();
    });
  }
  catch(err) {
  console.log(err.message);
}
</script>

Rule Should be same , Sample "mypopup.json":

{
    "settings": [],
    "rules": {
        "title": {
          "label": "Title",
          "type": "quickEditor",
          "show": "yes",
          "default": "Get in Touch"
        },
        "subtitle": {
            "label": "Subtitle",
            "type": "quickEditor",
            "show": "yes",
            "default": "Lorem, ipsum dolor sit amet"
        },
      "form": {
          "label": "Contact Form",
          "type": "siteform",
          "show": "yes"
        },
      "media": {
          "label": "Media",
          "type": "singlefile",
          "show": "yes",
          "default" : "13.jpg"
        }
    }
}

Now the final step is to maintain on "theme_structure.json" >> pages >> presets.

{"presets":[
      {
            "label": "Popups",
        	"type": "popup",
            "options": [
                    {
                        "label": "Basic",
                      	"type":"popup",
                        "sections": ["mypopup"]
                    },
                    {
                        "label": "Contact Popup",
                        "type":"popup",
                        "sections": ["mypopup"]
                    }
                ]
          },
]
}

you can also add it in default. just need to pass type as "popup"

Here is a preview of popup section:

Product Catalogue

Product Catalogue section mostly used for resturant website templates or grocery websites. Also for shop owners who want to show all collections along with products can integrate product catelogue using the below rules:

Special Type: catalogue

In Rule file yourcatsection.json, type should be passed as "catalogue".

On Adding catalouge in yourcatsection.json, yourcatsection.jw include the below rules by default,

Main variable to access rule is "catalogoue",

"catalogoue" array contains:

Rule	Description	Data Type
collections	It contains collections array, you can use forloop to access, below you can find documentation of catalogoue.collections	array

"collections" array contains:

Rule	Description	Data Type
label	Collection Name	string
cover	Collection Media (Optional)	string
url	Full Collection URL, By which user can see all products on page, (Optional for catalogue).	url
handle	slug/url use for id for js, eg, my-collection	string
count	Products Count for the collection	integer
products	Contains list of prodcuts for the collection in array, can be fetch using for loop	array

"products" array contains:

Rule	Description	Data Type
hash	Product Unique Hash	string
default_varient	Return Default Varient ID used for Add to Cart	string
cover	Product Media	url
title	Product Name	string
desc	Product Description	string
url	Full Product URL	url
ribbon	Product Ribbon, like best selling etc.	string
price	Product Price/ Cut Price	float
sale_price	Product Price / Sale Price	float
discount	Product Discount if Any	string
cartnav	Add To Cart Button	button
bagnav
type	Veg/Nonveg Only For Resturant	string
varients	If there is any option like Full Plate, Half Plate, it contains an array with same, Below documentation of it.	array

"varients" array contains:

Rule	Description	Data Type
hash	Varient Hash	string
label	Varient Label like Full Plate	string
price	Sale Price of Varient	float

<section class="catalogue see-full see-section see-light-color see-224">
  <div class="see-width">
    <div class="catalogue-main">
      <div class="clog-list-left">
        <div class="clog-top ">
          {% for link in catalogue.collections %}
          <div class="clog-heading see-full">
            <a class="clog-link-title collection_label" href="#{{link.handle}}">{{link.label}}</a>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="clog-main">
        {% for col in catalogue.collections %}
        <div class="clog-list" id="{{col.handle}}">
          <div class="clog-top ">
            <div class="clog-heading">{{col.label}}<span>{{col.count}}</span></div>
          </div>
          <div class="clog-bottom">
            {% for item in col.products %}
            <items hash="{{item.hash}}">
              <div class="clog-cont">
                <div class="clog-media">
                  <img src="{{item.cover}}" alt="{{item.cover.alt}}">
                  <div class="offer">{{item.discount}}</div>
                </div>
                <div class="clog-inner-cont">
                  <div class="list-title clog-list-title">
                    <span data-type="{{item.type}}">
                    <div></div></span>
                    {{item.title}}
                  </div> 
                 <p> {{item.desc}}</p>
                  <div class="price-main">
                    <div class="price">   {{site.currency}} {{item.price}}
                      <span>{{site.currency}} {{item.cutprice}}</span> </div>
                  </div>

                  <add-cart class="see-dp-none" data-hash="{{item.hash}}">
                    <div class="add-cart">
                      <span data-var="negative" data-qty="-1">-</span>
                      <input type="number" class="input-box" data-var="qty" min="1" max="20" steps="1" value="0" readonly>
                      <span data-var="positive" data-qty="1">+</span>
                    </div>
                  </add-cart>
                  <button class="click-pop">{{item.cartnav}}</button>
                  {% if item.varients %} 
                  <div class="jw-popup-main">
                    <div class="jw-popup-inner">        
                      <form action="_self" name="cataloge_addons[]">
                        <div class="pop-top">
                          <div class="pop-select">select option</div>
                          <div class="close-btn">×</div>
                        </div>
                        <div class="variant">
                          <div class="variant-title">Variant <span>*</span></div>
                          {% for varient in item.varients %}
                          <div class="variant-cont">
                            <div class="variant-left">
                              <input id="{{varient.hash}}" type="radio" name="mini_varient" class="mini_varient" value="{{varient.hash}}" data-varient="{{varient.hash}}">
                              <label for="{{varient.hash}}">{{varient.label}}</label>
                            </div>
                            <div class="variant-right">
                              <div class="var-price" data-price="{{varient.price}} ">{{site.currency}} {{varient.price}} </div>
                            </div>
                          </div>
                          {% endfor %}
                        </div>
                        <div class="variant see-dp-none" style="display:none;">
                          <div class="variant-title">Add-ons <span>*</span></div>
                          <div class="variant-cont">
                            <div class="variant-left">
                              <input type="checkbox" name="" id="a-name">
                              <label for="a-name">Veggie Maggie</label>
                            </div>
                            <div class="variant-right">
                              <div class="var-price">?300 <span>?400</span></div>
                            </div>
                          </div>
                        </div>
                        <div class="catalog-btn">
                          <a onclick="evaluate_baggage(this);">+ Add</a>
                        </div>
                      </form>
                    </div>  
                    <div class="bg-overlay"></div>
                  </div> 
                  {% endif %}
                </div>
              </div>
            </items>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
      
      {% if cart %}
      <div class="clog-list-right">
        <div class="clog-top right see-second-color">
          <div class="clog-top-in">
            <div class="clog-heading">Bag <span data-var="cart_count">{{Cart.itemCount}}</span></div>
           <a href="JavaScript:void(0)" class="clear-bag">Clear bag</a>
          </div>
          <minicart>
            {% if cart.items %}
            <div class="cart-has-items">
              <div class="clog-cart">
                {% for item in cart.items %}
                <div class="clog-card-top">
                   <div class="cart-title">{{item.title}}</div>
                   <div class="cart-desc">{{item.varients}}</div> 
                  <div class="cart-main">
                    <div class="cart-price">{{site.currency}} {{item.sale_price}}</div>
                    <div class="add-cart">
                      <span data-var="negative" onclick="JWCart.update('instant','{{cart.items.hash}}',-1, 'negative', '{{cart.items.prohash}}')">-</span>
                      <input type="number" class="input-box" min="1" max="5" steps="1" value="{{cart.items.qty}}" required="" readonly>
                      <span data-var="positive" onclick="JWCart.update('instant','{{cart.items.hash}}',1, 'positive', '{{cart.items.prohash}}')">+</span>
                    </div>
                  </div>
                </div>
                {% endfor %}
                <div class="card-btm-sticky">
                  <div class="subtotal">
                  <div class="sub-total">sub total</div>
                  <div class="price">{{site.currency}} {{cart.subtotal}}</div>
                  </div>
                  <div class="input-submit">
                    <input type="button" onclick="location.href='{{root.url}}/cart'" value="Proceed to Checkout">
                  </div>
                </div>
              </div>
            </div>
            
            {% else %}
            <div class="cart-empty">
                <!--<figure> 
                <img src="https://static.joonsite.com/media/JW_2209011033115911.svg" alt="">
              </figure>-->
              <div class="svg-cart">
                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
               viewbox="0 0 60.013 60.013" style="enable-background:new 0 0 60.013 60.013;" xml:space="preserve">
          <g>
              <path d="M11.68,13.006l-0.832-5h-2.99c-0.447-1.72-1.999-3-3.858-3c-2.206,0-4,1.794-4,4s1.794,4,4,4c1.859,0,3.411-1.28,3.858-3
                  h1.294l0.5,3H9.615l5.17,26.016c-2.465,0.188-4.518,2.086-4.76,4.474c-0.142,1.405,0.32,2.812,1.268,3.858
                  c0.949,1.05,2.301,1.652,3.707,1.652h2c0,3.309,2.691,6,6,6s6-2.691,6-6h11c0,3.309,2.691,6,6,6s6-2.691,6-6h4c0.553,0,1-0.447,1-1
                  s-0.447-1-1-1h-4.35c-0.826-2.327-3.043-4-5.65-4s-4.824,1.673-5.65,4h-11.7c-0.826-2.327-3.043-4-5.65-4s-4.824,1.673-5.65,4H15
                  c-0.842,0-1.652-0.362-2.224-0.993c-0.577-0.639-0.848-1.461-0.761-2.316c0.152-1.509,1.546-2.69,3.173-2.69h0.781
                  c0.02,0,0.04,0,0.06,0l38.995-0.013c2.751,0,4.988-2.237,4.988-4.987V12.994L11.68,13.006z M4,11.006c-1.103,0-2-0.897-2-2
                  s0.897-2,2-2s2,0.897,2,2S5.103,11.006,4,11.006z M46,45.006c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4
                  S43.794,45.006,46,45.006z M23,45.006c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S20.794,45.006,23,45.006z M58.013,36.006
                  c0,1.647-1.341,2.987-2.988,2.987L16.82,39.005l-4.77-23.999l45.962-0.013V36.006z"/>
              <path d="M20.013,22.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                  s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S19.46,22.006,20.013,22.006z"/>
              <path d="M20.013,34.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                  s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S19.46,34.006,20.013,34.006z"/>
              <path d="M33.013,22.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                  s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S32.46,22.006,33.013,22.006z"/>
              <path d="M33.013,34.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                  s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S32.46,34.006,33.013,34.006z"/>
              <path d="M46.013,22.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                  s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S45.46,22.006,46.013,22.006z"/>
              <path d="M46.013,34.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2c0-0.553-0.447-1-1-1
                  s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S45.46,34.006,46.013,34.006z"/>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          <g>
          </g>
          </svg>
              </div>
              <div class="card-empty-title">Your bag is empty</div>
              <p>Looks like you haven't made your choice yet.</p>
            </div>
            {% endif %}
          </minicart>

          <script>
            function evaluate_instant_bag(ev, e,proHash=''){
              let total_hashes = [];
              let dataHTML = ``;
              if(ev.items.length > 0){
                let data_items = ``;
                let sub_total = 0;
                let cut_mrp = 0;
                
                $.each(ev.items, function(xi, item){
                  total_hashes.push(item.productHash);
                  sub_total+= item.price_data.sale_price * item.qty;
                  var data_addtocart = `<div class="add-cart">
                    <span  data-var="negative" onclick="JWCart.update('instant',${item._},-1, 'negative', '${item.productHash}')">-</span>
                    <input type="number" class="input-box"  data-var="qty" min="1" max="5" steps="1" value="${item.qty}" required="" readonly>
                    <span data-var="positive" onclick="JWCart.update('instant',${item._},1, 'positive', '${item.productHash}')">+</span>
            </div>`; 
                  $(`add-cart[data-hash="${item.productHash}"]`).html(data_addtocart);
                  data_items += `
              			<items hash="${item._}">
              <div class="clog-card-top">
                <div class="cart-title" data-var="title">${item.label}</div>
                <div class="cart-desc"  data-var="desc">${item.varientLabel}</div>
                <div class="cart-main">
                  <div class="cart-price"  data-var="price">${item.price_data.sale_price}</div>
                  ${data_addtocart}
            </div>
            </div>
            </items>   `;
                });
                dataHTML = `
            		<div class="cart-has-items">
            <div class="clog-cart">
             ${data_items}
            </div>
            </div>
             			<div class="card-btm-sticky">
               <div class="subtotal">
                <div class="sub-total">sub total</div>
                <div class="price">${sub_total}</div>
            </div>
                 <div class="input-submit">
                <input type="button" onclick="location.href='cart'" value="Proceed to Checkout">
            </div>
            </div> `;

                // has item
                $('[data-cart-sticky]').attr('data-cart-sticky','show');
                $('[data-var="cart_count"], .cart-value').html(ev.totalItem);
                $('[data-var="cart_cutprice"]').html(sub_total);
                
              }
              else{
                // no item
                dataHTML = `	
            <div class="cart-empty">
            <figure> 
              <img src="img/empty-cart-png.png" alt="">
            </figure>
            <div class="card-empty-title">Your bag is empty</div>
            <p>Looks like you haven't made your choice yet.</p>
            </div>`;
                $('[data-cart-sticky]').attr('data-cart-sticky','hide');
                $('[data-var="cart_count"], .cart-value').html(0);
                $('[data-var="cart_cutprice"]').html(0);
                
              }
              $('minicart').html(dataHTML);
               if(proHash != ''){
                found = Object.keys(ev.items).find(function(layerKey) {
                  return ev.items[layerKey].productHash == proHash;   });
 console.log(found);
                if(found){
                  $(`add-cart[data-hash="${proHash}"]`).show();
                  $(`add-cart[data-hash="${proHash}"]`).next('button').hide();
                }else{
                  $(`add-cart[data-hash="${proHash}"]`).hide();
                  $(`add-cart[data-hash="${proHash}"]`).next('button').show();
                }
              }
            }
            function evaluate_baggage(ev){
              let extraBaggage = $(ev).closest('form');
              let varient_x = extraBaggage.find('input[name="mini_varient"]:checked').attr('data-varient');
              if(varient_x == '' || varient_x == "undefined" || !varient_x){
                varient_x = extraBaggage.find('input[name="mini_varient"]:first').attr('data-varient');
              }
              JWCart.add('instant',varient_x,1);
               $(ev).closest('items').find(`add-cart[data-hash]`).show();
               $(ev).closest('items').find(`add-cart[data-hash]`).next('button').hide();
            }
          </script>
        </div>


      </div>
      {% endif %}
    </div>
  </div>
</section>

<script>
window.addEventListener('scroll', onScroll);

function onScroll(event) {
  var scrollPos = $(document).scrollTop();
  $('.collection_label').each(function() {var currLink = $(this); var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('.collection_label').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

  



$(".click-pop").on('click', function() {
    if($(this).next('.jw-popup-main').length > 0){
      $(this).next(".jw-popup-main").addClass('jw-popup-open');
    }
    }); 
    $(".close-btn, .bg-overlay, .catalog-btn a").click(function(){
      $(".jw-popup-main").removeClass('jw-popup-open');
  });


var mini_carttemp = {};

</script>
<style>
.catalogue{padding: 2rem 0;}
.catalogue .svg-cart svg{fill:var(--see_prime_color);width: 120px;height:120px;}
.catalogue .catalogue-main{display: flex;justify-content: space-between;}
.catalogue .clog-list-left, .catalogue .clog-list-right{flex: 1 1 25%;max-height: 100vh;overflow: auto;scrollbar-width: thin;}
/*.catalogue .clog-list-left, .catalogue .clog-list-right, .catalogue .clog-list{border-right: 1px solid #d7d7d7;}*/
.clog-list-left {position: sticky;  top: 0;}
.clog-card-top{padding-top: 10px;}
.catalogue .clog-main{flex: 1 1 50%;margin: 0 10px 0 20px;border-right: 1px solid #f0f0f0;}
.catalogue .clog-list-right{border-right: none;padding-left: 10px;margin:0;position: sticky;top: 0;}
.catalogue .clog-top{/*padding: 10px 10px 10px 0;*/padding: 10px; position: relative;display: flex;justify-content: space-between;flex-wrap: wrap;position: sticky;top: 0;z-index: 999;border-bottom:1px solid #f2f2f2;background:var(--see_light_color);}
.catalogue .clog-top.right{max-height: 100vh;overflow: auto;padding: 0 10px 10px 0;scrollbar-width: thin;}
.catalogue .clog-top.right minicart{width:100%;padding: 0 10px;}
.catalogue .clog-top .clog-top-in{margin:0;position: sticky;top: 0;z-index: 9999;background: var(--see_light_color);/*padding: 10px 10px 10px 0;*/width: 100%;padding:10px;}
.catalogue .clog-heading{font-size: 1.2rem; font-weight: 500;text-transform: capitalize;margin:0;font-family:var(--font-prime)}
.catalogue .clog-heading .clog-link-title{  display: block;font-size: 16px;opacity: 0.7;padding-bottom: 10px;}
.catalogue .clog-heading .clog-link-title.active{color: var(--see_prime_color);opacity: 1;border-right:3px solid var(--see_prime_color)}
.catalogue .clog-heading span{background: var(--see_prime_color);color: var(--see_light_color);padding: 0 10px;border-radius: 4px;}
.catalogue .clog-media{height: 100px;width: 100px;position: relative;border: 1px solid #eaeaea;border-radius: 5px;}
.catalogue .clog-cont{display: flex;margin: 20px 0 30px;;}
.catalogue .clog-media img{width: 100%;height: 100%;object-fit: cover;border-radius: 10px;/*padding: 5px;*/}
.catalogue .clog-media .offer{top:0;position: absolute;text-align: center;display: table;padding: 3px 10px;background: var(--see_prime_color);color: var(--see_light_color);border-radius: 5px;font-size: 12px;}
.catalogue .clog-inner-cont{padding: 0 10px 0 20px;flex: 1;}
.catalogue .clog-inner-cont p{font-size: 16px;opacity: 0.9;padding: 5px 0;}
.catalogue .clog-list-title{display: flex;align-items: center;font-weight: 500;font-size:18px;opacity:0.8;}

.catalogue .clog-list-title span{padding: 3px;display: inline-block;margin-right: 5px;margin:0 5px 0 0;}
.catalogue .clog-list-title span div{padding: 4px;border-radius: 24px;}
.catalogue .clog-list-title span[data-type="veg"]{border: 1px solid green;}
.catalogue .clog-list-title span[data-type="veg"] div{background-color: green;}

.catalogue .clog-list-title span[data-type="nonveg"]{border: 1px solid red;}
.catalogue .clog-list-title span[data-type="nonveg"] div{background-color: red;}

.catalogue .clog-list-title span[data-type="eggs"]{border: 1px solid yellow;}
.catalogue .clog-list-title span[data-type="eggs"] div{background-color: yellow;}

.catalogue .clog-inner-cont .price{font-size: 18px;font-weight: 500;margin:0;}
.catalogue .clog-inner-cont .price span{opacity: .5;text-decoration: line-through;padding-left: 10px;}
.catalogue .clog-inner-cont .click-pop{/*padding: 3px 20px;*/border:1px solid var(--see_prime_color);background: transparent;border-radius: 5px;text-transform: capitalize;cursor: pointer;color: var(--see_prime_color);}
.catalogue .clog-inner-cont .click-pop a,  .catalogue .clog-inner-cont .click-pop button{display: block;padding: 3px 20px;}
.catalogue .clog-inner-cont .click-pop a{font-size:18px;}
.catalogue .clear-bag{text-decoration: underline;opacity: 0.9;margin:0;}
.catalogue .cart-title, .catalogue .cart-desc{font-size: 14px;padding: 5px 0;}
.catalogue .cart-title{font-weight: 600;}
.catalogue .cart-desc{opacity: .9;}
.catalogue .cart-main{font-weight: 500;display: flex;justify-content: space-between;align-items: center;}
.catalogue .cart-main .cart-price{margin:0;}
.price-main{display: flex;align-items: center;justify-content: space-between;padding:10px 0}
.catalogue .cart-price span{opacity: 0.5;text-decoration: line-through;font-weight: 400;}
.catalogue .add-cart{display: inline-flex;align-items: center;border: 1px solid var(--see_prime_color);border-radius: 5px;color: var(--see_prime_color);margin:0;}
.catalogue .add-cart input{width: 60px;outline: none;border: none;padding: 0 10px;text-align: center;-moz-appearance: textfield;background:unset;}
.catalogue .add-cart input::-webkit-outer-spin-button, .catalogue .add-cart input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.catalogue .add-cart span{text-align: center;font-size: 18px;padding: 3px;cursor: pointer;}
.catalogue .subtotal{display: flex;justify-content: space-between;margin-top: 20px;font-weight: 600;text-transform: capitalize;}
.catalogue .subtotal .sub-total , .catalogue .subtotal .price {margin:0;}
.catalogue .input-submit{margin-top: 20px;}
.catalogue .input-submit input{width: 100%;border: 1px solid var(--see_prime_color);border-radius: 5px;background:var(--see_prime_color);color: var(--see_light_color);padding: 10px;transition: 0.4s ease-in-out;}
.catalogue .input-submit input:hover{background: var(--see_light_color);color: var(--see_prime_color);border: 1px solid var(--see_prime_color);}
.catalogue .cart-empty{text-align: center;margin-top: 20px;}
.catalogue .cart-empty figure{height: 80px;margin-bottom: 20px;}
.catalogue .cart-empty figure img{height: 80px;}
.catalogue .card-empty-title{padding-bottom: 5px;font-weight: 500;}
.catalogue .cart-empty p{opacity: 0.7;}

/*.catalogue .card-btm-sticky{position: sticky;bottom: 0;}*/
.card-btm-sticky {position: sticky; bottom: -10px;  z-index: 9999;  background: var(--see_light_color);}

/****popup*********/
.jw-popup-main {text-align: center;position: fixed;top: 0;right: 0;left: 0;outline: 0;opacity: 0;z-index: -1;display: none;bottom: 0;visibility: 0;}
.jw-popup-open {z-index: 9999999;opacity: 1;overflow: auto;display: flex;justify-content: center;align-items: center;visibility: 1;}
.jw-popup-inner {display: inline-block;vertical-align: middle;width: 500px;margin: 25px auto;max-width: 97%;background: var(--see_light_color);color: var(--see_dark_color);border-radius: 5px;padding: 15px;text-align: left;}

.jw-popup-open .jw-popup-inner {position: relative;z-index: 999;}
.jw-popup-open .bg-overlay {background: #0006;z-index: 99;height: 100vh;width: 100%;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 0;-webkit-transition: background 0.15s linear;-o-transition: background 0. linear;transition: background 0.15s linear;}
.pop-top{display: flex;justify-content: space-between;border-bottom: 1px solid #cecece;align-items: center;margin-bottom: 30px;}
.pop-select, .close-btn, .variant-left, .variant-right{margin: 0;}
.pop-select{font-size: 18px;font-weight: 500;opacity: 0.9;}
.variant{margin-bottom: 10px;}
.variant-title{font-size: 1.2rem;}
.variant-title span{color: red;opacity: 0.9;}
.variant-cont{display: flex;justify-content: space-between;margin: 10px 0;}
.variant-cont .variant-left label{padding-left: 5px;}
.variant-cont .variant-right .var-price{font-weight: 600;}
.variant-cont .variant-right .var-price span{font-weight: 400;text-decoration: line-through;}

.close-btn {cursor: pointer;z-index: 99;font-size: 30px;}
.close-btn:hover{color:var(--see_prime_color)}
.catalog-btn {display: flex;justify-content: space-between;padding: 15px 0 0;border-top: 1px solid #cecece;}
.catalog-btn a{padding: 10px 25px;border: 1px solid var(--see_prime_color);border-radius: 5px;width: 100%;text-align: center;display: block;transition: 0.4s ease;cursor:pointer;}
.catalog-btn a:hover{background: var(--see_prime_color);color: var(--see_light_color);}
.catalog-btn a:first-child{background: var(--see_prime_color);color: var(--see_light_color);}
.catalog-btn a:first-child:hover{background:var(--see_light_color);color: var(--see_prime_color);}
/**********popup end************/
@media(max-width:768px){
  
  .catalogue .clog-media img{object-fit:contain;}
  .catalogue .clog-top{padding:13px 0;}
  .catalogue .clog-list-left, .catalogue .clog-bottom, .catalogue .clog-cart, .catalogue .clog-main{max-height:100%;margin: 0;overflow: unset;width: 100%;}
  .catalogue .clog-list-right{padding-left: 0px;}
  .catalogue .clog-list-title{align-items: start;}
  .catalogue .clog-inner-cont .price, .catalogue .clog-inner-cont p, .catalogue .clog-inner-cont .click-pop{font-size: 18px;}
  .catalogue .clog-cont{border-bottom: 1px solid #e6e6e6;padding: 10px 0;flex-direction: row-reverse;}
  .catalogue .clog-inner-cont{padding: 0 20px 0 0;}
  .catalogue .clog-list-left{display: none;}
  .catalogue .clog-media{width: 100px;height: 100px;}
  .clog-bottom{max-height: 100%!important;}
  .catalogue .catalogue-main{flex-wrap: wrap;flex-direction:column;}
  .catalogue .clog-list{flex: 1 1 100%;margin: 0 0 15px;border-right: none;}
}
</style>

Fixed Catelogue, You can add it in footer for quick fixed bar:

<div class="catalogue-fixed" data-cart-sticky="hide">
  <div class="catalogue-fixed-left">
    <div class="cat-fixed-title">
      <span data-var="cart_count">{{session.cart.total_items}}</span> items
    </div>
    <div class="cata-fixed-cont">
      <span class="cata-price">{{site.currency}} <span data-var="cart_cutprice">{{session.cart.total}}</span>
      </span>
    </div>
  </div>
  <div class="catalogue-fixed-left">
    <div class="cat-view-cart">
      <a href="{{root.url}}/cart">View cart <i class="fa fa-caret-right" aria-hidden="true"></i>
      </a>
    </div>
  </div>
</div>
<style>
   .catalogue-fixed {  display: none; }
  @media (max-width: 768px){
    .catalogue-fixed {
      position: fixed;
      bottom: 10px;
      width: 96%;
      display: flex !important;
      justify-content: space-between;
      right: 0;
      background: var(--color1);
      color: var(--color5);
      margin: auto;
      left: 0;
      z-index: 9999;
      border-radius: 5px;
      padding: 10px;
      align-items: center;
      box-shadow: rgba(17,17,26,.05) 0 1px 0,rgba(17,17,26,.1) 0 0 8px;
    }
  }
  @media (max-width: 768px){
    .catalogue-fixed {
      display: flex;
    }
  }
.catalogue-fixed[data-cart-sticky="hide"]{display:none !important;}
</style>