Adding a HTML Sitemap to a Shopify Store

I have found that themes generally use links to prodct pages that are not the canonicalised url to the product on the store page. So this is to allow the breadcrumb to be dynamic and show based on the route they took to the product page.

This means when you spider the site using screaming from or ahrefs it will report there are no pages except the sitemap.xml that actually point directly to the product pages.

You can create a HTML Sitemap page using the following technique.

Step 1. Add a template

In your Shopify admin go to Online Store > Themes and from the Actions dropdown, select ‘Edit code’.

Scroll down to Templates and select ‘Add a new template’. Create a new template based on a Page and choose liquid format, I have called mine ‘htmlsitemap’.

The code in that template will look similar to this:

<div class="page-width">
    <div class="grid">
        <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
            <div class="section-header text-center">
                <h1>{{ page.title }}</h1>
            </div>
 
            <div class="rte">
                {{ page.content }}
            </div>
        </div>
    </div>
</div>

Replace this section of code {{ page.content }} with the code below:

{%- comment -%} Start of HTML SiteMap code {%- endcomment -%}
<div class="row">
    <div class="col-md-6">
        <h2>Collections</h2>
        <ul>
            {% for c in collections %}
                <li>
                    <a href="{{ c.url }}">{{ c.title }}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="col-md-6">
        <h2>Products</h2>
        <ul>
 
            {% paginate collections.all.products by 1000 %}
                {% for product in collections.all.products %}
                    <li>
                        <a href="{{ product.url }}">{{ product.title }}</a>
                    </li>
                {% endfor %}
            {% endpaginate %}
 
        </ul>
    </div>
</div>
{%- comment -%}
    End of HTML SiteMap code {%- endcomment -%
{%- endcomment -%}

Step 2. Create Page

Next we need to add your HTML Sitemap as a page on your Shopify store.

Go to Online Store>Pages>Add Page and create a new page making sure to select ‘page.htmlsitemap’ as the template.

Step 3. Add to Footer Menu

Go Naigation and choose the footer menu. You will then be able to add to the footer on all pages.