How To Make Dynamic HTML Sitemap in Shopify
To make a dynamic HTML sitemap in a Shopify template, you can follow these steps:
- Open the Shopify theme editor and select the template where you want to add the sitemap.
- Create a new page by clicking on the “Add page” button in the Pages section of the Shopify admin.
- Give the page a name like “Sitemap” or “Site Map”.
- In the theme editor, open the “Add section” tab and select the “Rich text” section.
- In the rich text section, add the following HTML code to create a dynamic sitemap:
page.sitemap.liquid
<a name="pagecontent" id="pagecontent"></a>
<div class="sixteen columns page clearfix">
<h1>
{{ page.title }}
</h1>
<h2>Collections</h2>
<ul >
{% for c in collections %}
<li>
<a href="{{ c.url }}">{{ c.title }}</a>
</li>
{% endfor %}
</ul>
<h2>Products</h2>
<ul>
{% for product in collections.all.products %}
<li>
<a href="{{ product.url }}">{{ product.title }}</a>
</li>
{% endfor %}
</ul>
<h2>Pages</h2>
<ul>
{%- paginate pages by 50 -%}
{%- for p in pages -%}
<li><a href="{{ p.url }}">{{ p.title }}</a></li>
{%- endfor -%}
{%- endpaginate -%}
</ul>
</div>
This code uses a for loop to iterate over the links in the “main-menu” link list and generates a list of links with their titles and URLs.
- Save the changes to the section and preview the page to see the dynamic sitemap in action.
Note: If you want to customize the sitemap further, you can modify the HTML code to include additional link lists or styling.