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.
Then save the page and preview it, you will now see your HTML Sitemap
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.
This is how the link now looks in my footer.
That’s it we are all done and you should now have a working HTML sitemap for your Shopify store.
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.
answered my own question.
{% for product in collections.all.products %}{% unless product.title contains “Sample” or “sample” or “test” %}
{{ product.title }}
{% endunless %}
{% endfor %}
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 %}
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: “,” %}
Hey, this helped. Now I can see the blogs. Thanks for the help!
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?
Hello
Great article
Any code to show all pages in html sitemap like collections and products ?
Hi James – the code I’ve given on this page does output all your Collections and all your Products, so could you clarify what you are trying to achieve?
Hi Jon, not the same person here but I’m wondering the same question – how can we output pages – i.e domain.com/pages/page-handle ?
Thanks!
This worked for me, check here: https://anemos.in/pages/sitemap
Pages
{% for p in pages %}
{{ p.title }}
{% endfor %}
Hi, It’s quite useful information! And do you have any method to make the HTML sitemap have a greater pattern? 😉
When you say ‘greater pattern’ do you mean a different layout or something else?
Do you have code that allows you to have a section that maps your Shopify blog
Sorry for the extremely delayed response Carolyn but I have now updated the article to show you how to do that.
It was a great tutorial thank you for this.
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
Mohammad, I am doing that – use this code:
Pages
{% paginate pages by 1000 %}
{% for page in pages %}
{{ page.title }}
{% endfor %}
{% endpaginate %}
You have astonishing knowledge listed here.