How to Create HTML and Image Sitemap on Shopify

A sitemap is an essential part of any website’s SEO strategy—helping both users and search engines discover your content. While Shopify automatically generates an XML sitemap, many store owners also want an HTML sitemap (for users) and an image sitemap (for better image indexing). This guide explains what they are, why they matter, and how to create them in Shopify.

What is an HTML Sitemap?

An HTML sitemap is a webpage that lists all—or selected—pages of your website in a structured, clickable format. Unlike XML sitemaps (designed for search engines), HTML sitemaps are designed for humans, allowing visitors to quickly navigate your site’s hierarchy.

Example:
✅ Links to product categories
✅ Links to individual products
✅ Links to key pages (Contact, About, FAQ)

Why HTML Sitemap Matters?

✅ Improves user experience: Visitors can easily find pages that might not be accessible through menus.
✅ Supports SEO: Internal linking from an HTML sitemap helps distribute link equity (PageRank) across your site.
✅ Crawl aid for bots: Although designed for humans, search engines also crawl HTML sitemaps.

In short, it helps both people and search engines understand your site’s structure.

#1. How to Create an HTML Sitemap on Shopify?

Good news: you don’t need to code it from scratch! We’ve already created an HTML sitemap template for Shopify, available on GitHub.

✅ Here’s how to add it to your store:

1. Go to Online Store → Themes → Actions → Edit Code.
2. In the left sidebar, under Templates, click Add a new template → Page → Page Liquid.
3. Name the new template: html-sitemap.

A blank code editor will open.

4. Visit our GitHub repository: https://github.com/mehmetsanli/shopify/blob/main/html-sitemap
   👉 HTML Sitemap Code on GitHub (replace with actual link)
5. Copy the entire code from GitHub.
6. Paste it into the new page.html-sitemap.liquid file.
7. Click Save.

✅ Now, create a new page:

1. Go to Online Store → Pages → Add Page.
2. Name it Sitemap (or any preferred title).
3. Under Theme template, select page.sitemap.
4. Save the page.

👉 Done! You now have a live HTML sitemap on your Shopify store.

What is an Image Sitemap?

An image sitemap is a specialized sitemap that lists the images used across your website so that search engines like Google can better discover, index, and rank them in image search results.

Unlike HTML or XML sitemaps for pages, an image sitemap focuses solely on images, including:

✅ Product photos
✅ Blog post images
✅ Collection banners

Why is Image Sitemap Important?

✅ Boosts visibility in Google Images: Images included in an image sitemap are more likely to be indexed and shown in search results.
✅ Improves SEO for image-heavy stores: Essential for fashion, home decor, art, and other visually-driven stores.
✅ Helps bots find images loaded via lazy-loading or scripts: Without an image sitemap, some images might not be discovered by crawlers.

In short, it’s critical if you want your product and lifestyle images to rank in Google Images.

As you can see, you’ll get a page listing all important page types and URLs:

#2. How to Create an Image Sitemap on Shopify?

Shopify doesn’t create a dedicated image sitemap by default, but you can easily add one using our pre-built code.

✅ Here’s how to install it:

1. Go to Online Store → Themes → Actions → Edit Code.
2. In the left sidebar, under Templates, click Add a new template → Page → Liquid.
3. Name the new template: imagesitemap.

A blank code editor will open.

4. Visit our GitHub repository with the image sitemap code:
   👉 Image Sitemap Code on GitHub (replace with actual link)
5. Copy the entire code from GitHub.
6. Paste it into the new page.imagesitemap.liquid file.
7. Click Save.
   

✅ Now, create a new page:

1. Go to Online Store → Pages → Add Page.
2. Name it Image Sitemap (or another descriptive name).
3. Under Theme template, select page.imagesitemap.
4. Save the page.

👉 Done! You now have a dedicated image sitemap page, listing your key images with URLs.