HTML Sitemaps for Shopify Guide

In this guide, I will show you how to implement an HTML sitemap in your Shopify store using Liquid code. HTML sitemaps are still useful for site visitors and Search Engines. They are a good way to improve overall site navigation and bolster internal linking signals.

The guide has four steps. You don't need to be a Shopify developer or an expert to follow it. It is one of the easiest Shopify SEO guides that I have published in recent months.

Skill level: Beginner/Intermediate

Steps:​

• Step 1: Identify Your Template
• Step 2: Create a New Template
• Step 3: Insert the HTML Sitemap Code
• Step 4: Create a Page for the Sitemap

​

Step 1: Identify Your Template​

First, determine which template will be used for your sitemap. Typically, this is created as a custom page template in Shopify. Every theme is different, so you'll need to paste in your template markup. That's one for you to figure out as you'll probably want to style the page to your liking, such as using a responsive table if you are using more than a single page type within the sitemap page.

For your HTML sitemaps, you have four page types to choose from: Products, Collections, Pages, and Blog Articles. You can choose one or all four. Again, that's one for you to figure out. I would personally start with a mockup page with all 4 and look at how big the page is and how many URLs there are. Is it a great big mess? If so, settle on a slimmed-down HTML sitemap - stick with collections and products, as they're the pages you likely want to promote the most.

Enough talking from me; let us move on to the next step.

Step 2: Create a New Template​

1. Go to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click on Actions > Edit Code.
4. In the Templates directory, click Add a new template.
5. Select page and name it sitemap.

Step 3: Insert the HTML Sitemap Code​

Open your newly created page.sitemap.liquid file and insert the following liquid code sections as described below. I have broken them down into the individuals of Products, Collections, Pages, Blog Articles.

The liquid code examples below loop through collections and their products, generating product links; list all collections with their links; loop through pages to generate page links; and loop through blogs and articles to generate article links. To learn more about liquid hooks and shortcodes, I find this cheat sheet one of the best resources available - https://www.shopify.com/uk/partners/shopify-cheat-sheet

How the (liquid) code works - Imagine you have several groups of items, each with a list of individual items. This code is like a recipe that goes through each group and lists all the items in each group. So, this code builds a list of links for all products, grouped by their collection. Each link will take you to a product's page and show the product's name. The same goes for collections, pages and blog articles.

Products​

To list all products under their respective collections, use the following code:

 <h2>Products</h2>
  <ul>
    {% for collection in collections %}
      {% for product in collection.products %}
        <li><a href="{{ product.url }}">{{ product.title }}</a></li>
      {% endfor %}
    {% endfor %}
  </ul>

This code loops through each collection and then through each product in the collection to generate a list of product links.

Collections​

To list all collections, use the following code:

  <h2>Collections</h2>
  <ul>
    {% for collection in collections %}
      <li><a href="{{ collection.url }}">{{ collection.title }}</a></li>
    {% endfor %}
  </ul>

This code generates a list of links to each collection available in your store.

Pages​

To list all pages on your site, use the following code:

 <h2>Pages</h2>
  <ul>
    {% for page in pages %}
      <li><a href="{{ page.url }}">{{ page.title }}</a></li>
    {% endfor %}
  </ul>

This code loops through each page and generates a list of page links.

Blog Articles​

To list all blog articles, use the following code:

  <h2>Blog Articles</h2>
  <ul>
    {% for blog in blogs %}
      {% for article in blog.articles %}
        <li><a href="{{ article.url }}">{{ article.title }}</a></li>
      {% endfor %}
    {% endfor %}
  </ul>

This code loops through each blog and then through each article in the blog to generate a list of article links.

Step 4: Create a Page for the Sitemap​

1. Go to Online Store > Pages.
2. Click Add page.
3. Title it “HTML Sitemap”.
4. In the Template suffix dropdown, select sitemap.
5. Save the page.

Remember to include the page in your site navigation. A popular location for an HTML sitemap page is the footer menu.

That's a wrap. This is another useful Shopify SEO guide for HTML sitemaps that may help you increase your SEO for Shopify. I hope you found the advice in this guide useful. If you need Shopify SEO support, reach out to me.