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:

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>