How to Add a HTML Sitemap to Your Shopify Store

By default Shopify generates an XML sitemap for your store but some people want to also add a HTML one. Here’s how to do it.

Before we get started, lets do a quick overview of Shopify sitemaps:

XML Sitemap

Shopify automatically generates an XML sitemap for your store. You can find yours by going to ‘yourstore.com/sitemap.xml’.

This type of site map is purely designed for search engine bots to crawl to allow them to better index your website.

Other than submitting the XML sitemap to the search engines, there is nothing else for you to do with it. Shopify deals with it and automatically keeps it up to date when you add new products, pages, blog posts etc.

Image Sitemap

There is also something called an image sitemap. Shopify does not generate one of these for you.

Shopify does include links to your images in the XML site map but it only lists the first product image, not variant product images. So Shopify only has you partially covered here.

If you wanted all your images to be in a sitemap, then you would need to create a sitemap just for that.

Building an image sitemap is not something I’m going to cover in this article but, as ever with Shopify there is an app called Image Sitemap that will do it for you.

HTML Sitemap

Some Shopify store owners want a HTML version of their sitemap.

This is because it can easily be read by site users and used by them to quickly find what they want on your store.

Some people also argue that there is potentially some SEO (Search Engine Optimization) benefit. But this is doubtful these days.


Anyway, enough waffle, lets get on with how you actually add a HTML sitemap to your Shopify store.

Step 1

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, 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

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.

Adding a page for your Shopify Store HTML sitemap

Then save the page and preview it, you will now see your HTML Sitemap

This is how your Shopify HTML Sitemap will look

Step 3

That’s the actual sitemap done. Now all you need to do is add a link to that page to your website.

Most people are going to want it in their footer, so we’ll put it there.

Adding the HTML sitemap page to the footer menu of your Shopify Store

This is how the link now looks in my footer.

The link to the HTML sitemap in the Shopify theme footer

That’s it we are all done and you should now have a working HTML sitemap for your Shopify store.

Subscribe to my newsletter

Get new articles straight to your Inbox

2 Responses

Leave a Reply

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