How To Make Dynamic HTML Sitemap in Shopify

To make a dynamic HTML sitemap in a Shopify template, you can follow these steps:

  1. Open the Shopify theme editor and select the template where you want to add the sitemap.
  2. Create a new page by clicking on the “Add page” button in the Pages section of the Shopify admin.
  3. Give the page a name like “Sitemap” or “Site Map”.
  4. In the theme editor, open the “Add section” tab and select the “Rich text” section.
  5. In the rich text section, add the following HTML code to create a dynamic sitemap:

<a name="pagecontent" id="pagecontent"></a>

<div class="sixteen columns page clearfix">
    {{ page.title }}
    <ul >
    {% for c in collections %}
    <a href="{{ c.url }}">{{ c.title }}</a>
    {% endfor %}
    {% for product in collections.all.products %}
    <a href="{{ product.url }}">{{ product.title }}</a>
    {% endfor %}
{%- paginate pages by 50 -%}
    {%- for p in pages -%}
        <li><a href="{{ p.url }}">{{ p.title }}</a></li>
    {%- endfor -%}
{%- endpaginate -%}


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.

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *