How To Create An HTML Sitemap For Shopify Without Any Apps

If you want your Shopify store to rank higher in search engines and attract more visitors, then creating an HTML sitemap is a must-do task. A sitemap is a list of all the pages on your website that makes it easier for search engines to crawl and index your content. The good news is that you can create an HTML sitemap for your Shopify store without using any plugins. In this article, we will show you how.

What is an HTML Sitemap?

An HTML sitemap is a page on your website that lists all of the pages and content within it. It acts as a map or table of contents for your site, making it easier for users to find the information they’re looking for. This is especially important for larger websites, such as e-commerce stores, where there may be hundreds or even thousands of pages.

But an HTML sitemap isn’t just for users – it’s also beneficial for search engines. By providing a clear and organized structure of your website, search engines like Google can more easily crawl and index your pages, leading to better search engine rankings and more traffic to your site.

Why is an HTML Sitemap Important for Shopify Stores?

There are several reasons why an HTML sitemap is important for Shopify stores:

• Helps search engines crawl and index your site: An HTML sitemap makes it easier for search engines to crawl and index all the pages on your site. This can improve your website’s visibility and ranking in search engine results.
• Improves user experience: A sitemap provides an organized view of all the pages on your site, making it easier for visitors to find what they’re looking for.
• Increases the chance of being found: An HTML sitemap gives search engines a clear picture of the structure and content of your site, increasing the chances of your pages being found and indexed.

How to Create an HTML Sitemap for YOur Shopify Store without using any apps

Step 1: Create a new page template from your theme editor and assign it a name

Step 2: Copy the following code and paste it to the new page template

{% style %}
nav {
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
  margin-top: 20px
}
  nav a{
   color: var(--colorNavText);
    padding: 0 3%;
    font-size: calc(var(--typeHeaderSize)*.65);font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback);
    font-weight: var(--typeHeaderWeight);
    letter-spacing: var(--typeHeaderSpacing);
    line-height: var(--typeHeaderLineHeight)
  }
.pages-container ul,
.collections-container ul,
.products-container ul,
.blog-container ul {
    -webkit-columns: 3;
    -moz-columns: 3;
    columns: 3;
}
.pages-container,
.collections-container,
.products-container,
.blog-container {
    padding: 20px;
}


{% endstyle %}
<nav>
    <a href="#pages" class="">Pages</a>
    <a href="#collections" >Collections</a>
    <a href="#products">Products</a>
    <a href="#blog" >Blog Posts</a>
</nav>
<div class="page-width" style="margin-top: 90px;margin-bottom: 60px">



<div class="wrapper">
    <div class="html_sitemap">
        <div id="pages" class="pages-container">
            <h3>Pages</h3>
            <ul>
                {% for p in pages %}
                    <li>
                        <a href="{{ p.url }}">{{ p.title }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>

        <div id="collections" class="collections-container">
            <h3>Collections</h3>
            <ul>
                {% paginate collections by 1000 %}
                    {% for c in collections %}
                        <li>
                            <a href="{{ c.url }}">{{ c.title }}</a>
                        </li>
                    {% endfor %}
                {% endpaginate %}
            </ul>
        </div>

        <div id="products" class="products-container">
            <h3>Products</h3>
            <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 id="blog" class="blog-container">
            <h3>Blog Posts</h3>
            <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>
    </div>
</div>


</div>

Make sure you add your blog_handles that you have created {% assign blog_handles = “Add your blog_handles” | split: “,” %}

Step 3: Now create a new page and assign it the template you just made

Step 3: Hit save and preview

Your HTML sitemap should look like this

Creating an HTML sitemap for your Shopify store is an easy and effective way to optimize your website for search engines and improve its visibility. By following the step-by-step guide mentioned in this article, you can create an HTML sitemap for your Shopify store without using any plugins. Remember to update your sitemap regularly to ensure that search engines have the most up-to-date information about your site.