A custom web template has been created which is same as “Item Card Group” web template. The problem is that when I use my custom web template without login page does not show.
My custom web-template out-put screen-shot 
My code
{%- macro product_image_square(website_image, css_class="") %}
<div class="product-image product-image-square h-100 rounded {{ css_class }}"
style="background-image: url('{{ website_image | abs_url }}');">
</div>
{%- endmacro %}
<div class="section-with-cards item-card-group-section">
<div class="item-group-header d-flex justify-content-between align-items-center">
<div class="title-section text-center flex-grow-1">
{%- if title -%}
<h2 class="section-title">{{ title }}</h2>
{%- endif -%}
{%- if subtitle -%}
<p class="section-description">{{ subtitle }}</p>
{%- endif -%}
</div>
<div class="align-self-start">
<a href="/all-products" class="btn btn-primary btn-custom">Shop All Items</a>
</div>
</div>
<div class="row">
{%- for index in range(1, 13) -%}
{%- set item = values['card_' + index|string + '_item'] -%}
{%- if item -%}
{%- set web_item = frappe.get_doc("Website Item", item) -%}
{%- set item_price = frappe.get_list("Item Price", filters={"item_code": web_item.item_code}, fields=["price_list_rate"], limit=1) -%}
{%- set price = item_price[0].price_list_rate if item_price else "N/A" -%}
<div class="col-md-3 mb-4">
<div class="card" style="height: 350px;">
<div class="card-img-container">
<a href="/{{ web_item.route or '#' }}" style="text-decoration: none;">
<img class="card-img" src="{{ web_item.website_image }}" alt="{{ web_item.title }}">
</a>
</div>
<div class="card-body">
<div class="mt-4">
<a href="/{{ web_item.route or '#' }}">
<div class="card-title text-center">
{{ web_item.web_item_name or '' }} <br>
<span class="card-text"> ₹ {{ price }} {{ web_item.stock_uom }}</span>
<a href="/{{ web_item.route or '#' }}" class="btn btn-primary btn-
block btn-custom mt-3">Buy Now</a>
</div>
</a>
</div>
</div>
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
<style>
.btn-custom {
padding: 10px 20px;
font-size: 16px;
}
.title-section {
margin-bottom: 20px;
}
.text-center {
text-align: center;
}
.item-group-header {
margin-bottom: 20px;
}
</style>
I don’t understand why this is happening can anyone help me
Thank You.