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 -%}}

Update

If you want to include a list of your blog articles in the HTML Sitemap

I’ve noticed a number of people asking how to include blog posts in their HTML sitemap, so I’ve updated the code below to do just that.

One thing to watch out for with this is that Shopify can have multiple blogs. By default, you have one blog called ‘News’ but you can call it what you want and you can have multiple blogs e.g. ‘News’, ‘Roadmap’, ‘How To’s’ etc. You need to assign all the blogs you want to show/have in this part of the code ‘{% assign blog_handles = “news” | split: “,” %}’ e.g. ‘{% assign blog_handles = “news, roadmap, how to’s” | split: “,” %}’

{%- 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>
  <h2>Blog Posts</h2>
  	<ul>
  		{% assign blog_handles = "news" | split: "," %}

   		{% for handle in blog_handles %}

        	{% for article in blogs[handle].articles %}
				<li>
               <a href="{{ article.url }}">{{ article.title }}</a>
    			</li>
         	{% endfor %}

  		{% endfor %}
  </ul>
  
</div>
{%- comment -%}
    End of HTML SiteMap code
{%- 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.

18 thoughts on “How to Add a HTML Sitemap to Your Shopify Store”

  1. This is great. I would like to exclude some products that are samples so do not need listing. What code needs to be added to exclude products containing “Sample” in title.

    Reply
  2. The Blogs sections seems to not work for me, I’ve added the code but the code isn’t working. All I can see is title “Blogs” and no blog content.

    The code looks like this:
    Blog Posts

    {% assign blog_handles = “news” | split: “,” %}
    {% for handle in blog_handles %}
    {% for article in blogs[handle].articles %}

    {{ article.title }}

    {% endfor %}
    {% endfor %}

    Reply
    • Probably because your blog isn’t called ‘news’ (which is the default). Yours is called ‘blog’. So change this part of the code:

      {% assign blog_handles = “news” | split: “,” %}

      To:

      {% assign blog_handles = “blog” | split: “,” %}

      Reply
      • Hey, I’ve used both the values “news” and “blog” on one of my other websites but it seems it’s something else for blogs. Can you tell me how do I find the variable name in the code files?

        Reply
  3. Hi, It’s quite useful information! And do you have any method to make the HTML sitemap have a greater pattern? 😉

    Reply
    • Sorry for the extremely delayed response Carolyn but I have now updated the article to show you how to do that.

      Reply
  4. Hello
    It was great.
    I used it and it works.
    But can I create a list of all pages in site map.
    for example for page in pages doesnt work.
    Can you help me?
    Thank you

    Reply

Leave a comment