Make all links and elements in a specific Shopify menu display horisontally on a (sitemap) page

Store Design
, , ,
1

Dear Shopifyers

Expert advise needed here

I would like to make an XML-like sitemap page for visitors.

Ideally it should contain all three levels from the shopify menu (women) in a horisontal manner, so all level 1 items are vertical, and all level 2 & 3 are then horisontal.

It should look a bit like (my playing around) on this page: https://tinylux.store/pages/sitemap

And the menu I would like to display is the main navigation menu from this page: https://tinylux.store/pages/women

Any advise would be greatly appreciated.

KR, Michael

2

Hi @Beat09 ,

I am from Mageplaza - Shopify solution expert.

Thanks for sharing your client’s request. Here’s how you can help them build a horizontal sitemap page that mimics their current experimentation on https://tinylux.store/pages/sitemap — but cleaner and structured using the “Main menu” (3-level) from the Shopify navigation.

Step-by-Step Guide
1. Create a Custom Page Template
In your Shopify theme (ideally in an unpublished draft or duplicate first), do the following:

  • Go to Online Store > Themes > Edit code.
  • Create a new page template:
    File path: templates/page.sitemap.liquid

Paste this code:

{% comment %}
  Template for visual sitemap using menu "main-menu"
{% endcomment %}

{% layout 'page' %}

  # Sitemap

  {% assign menu_handle = 'main-menu' %} {# Change this if using a different menu #}
  {% assign main_menu = linklists[menu_handle] %}

  {% if main_menu.links.size > 0 %}
    
      {% for item in main_menu.links %}
        - **{{ item.title }}**

            {% if item.links.size > 0 %}
            

                {% for sub_item in item.links %}
                  - {{ sub_item.title }}

                        {% if sub_item.links.size > 0 %}
                    

                            {% for sub_sub_item in sub_item.links %}
                              - {{ sub_sub_item.title }}
                        
                            {% endfor %}
                    
                        {% endif %}
                
                {% endfor %}
            
            {% endif %}
        
      {% endfor %}
    

  {% else %}
    

No menu items found.

  {% endif %}

2. Assign Template to a Page

  • Go to Online Store > Pages
  • Create a new page (e.g., Sitemap) or edit the existing one.
  • Under Template, choose: page.sitemap

3. Optional CSS Cleanup
You can add this to your theme CSS (base.css or theme.css):

.sitemap-container a {
  text-decoration: none;
  color: #333;
}

.sitemap-level-1 > li > a {
  font-size: 1.2rem;
  font-weight: 600;
}

.sitemap-level-2 a,
.sitemap-level-3 a {
  font-size: 0.95rem;
  color: #555;
}

Result

  • Top-level categories (like “Women”) appear vertically.
  • Level 2 & 3 items under them are laid out horizontally.
  • The style is clean, readable, and responsive.

Tips
You can use a different menu handle instead of main-menu. Just replace:

{% assign menu_handle = 'main-menu' %}

with:

{% assign menu_handle = 'women' %}

(Only if you have a menu named “Women” in your Shopify navigation.)

For SEO, this sitemap is useful to improve internal linking and user navigation.

Please let me know if it works as expected

Best regards!