Not able to extend the page properly - html

Question

I am making a shopping website and dynamically displaying data, and I am trying to extend the category subcategory table into another page. Below is the image of the table. Below is 'shoppingpage.html'
above is the image that I am trying to extend into page 'category.html'. The issue is that only the 'Our Products' part gets extended and the remaining part of table with category and its subcategories don't get extended. Below is how it looks
As seen above the categories and its subcategories don't come.
Below are the html codes of shoppingpage.html and category.html respectively
<ul>
<a class="lynessa-menu-item-title" title="Our Products" href="/allproducts">Our
Products</a>
<span class="toggle-submenu"></span>
<div class="submenu megamenu megamenu-shop">
<div class="row">
{% for result in category %}
<div class="col-md-3">
<div class="lynessa-listitem style-01">
<div class="listitem-inner">
<a href="{% url 'polls:category' result.id %}" target="_self">
<h4 class="title">{{result.category_name}}</h4>
</a>
{% for ans in result.subcategories_set.all %}
<ul class="listitem-list">
<li>
{{ans.sub_categories_name}}
</li>
</ul>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</ul>
{% block content %}
{% endblock %}
{% extends 'polls/shoppingpage.html' %}
{% block content %}
<ul class="row products columns-3" id="appendproducts">
{% for product in products %}
<li class="product-item wow fadeInUp product-item rows-space-30 col-bg-4 col-xl-4 col-lg-6 col-md-6 col-sm-6 col-ts-6 style-01 post-24 product type-product status-publish has-post-thumbnail product_cat-chair product_cat-table product_cat-new-arrivals product_tag-light product_tag-hat product_tag-sock first instock featured shipping-taxable purchasable product-type-variable has-default-attributes" data-wow-duration="1s" data-wow-delay="0ms" data-wow="fadeInUp">
<div class="product-inner tooltip-left">
<div class="product-thumb">
<a href="{% url 'polls:productdetails' product.id %}" class="thumb-link">
<img class="img-responsive" src="{{product.image}}" alt="MINI SKIRT" width="400" height="400">
</a>
</div>
<div class="product-info equal-elem">
<h3 class="product-name product_title">
{{product.title}}
</h3>
<span class="price">
<span class="lynessa-Price-amount amount">
<ins>
<span class="lynessa-Price-currencySymbol">₹</span>
<span class="lynessa-Price-amount amount discount-amount InrToUsdDiscountPrice65">
{{product.price}}
</span>
</ins>
</span>
</span>
</div>
</div>
</li>
{% endfor %}
</ul>
{% endblock %}
help is greatly appreciated, thanks!