Categories Home Page

To replace your products with categories on your home page, modify your index.liquid to be:

<div>
    <div class="navigation">
        <div class="container">
            <a href="/">{{ shop.name }}</a>
        </div>
        <button type="button" class="menu-toggle">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M491.318 235.318H20.682C9.26 235.318 0 244.577 0 256s9.26 20.682 20.682 20.682h470.636c11.423 0 20.682-9.259 20.682-20.682 0-11.422-9.259-20.682-20.682-20.682zM491.318 78.439H20.682C9.26 78.439 0 87.699 0 99.121c0 11.422 9.26 20.682 20.682 20.682h470.636c11.423 0 20.682-9.26 20.682-20.682 0-11.422-9.259-20.682-20.682-20.682zM491.318 392.197H20.682C9.26 392.197 0 401.456 0 412.879s9.26 20.682 20.682 20.682h470.636c11.423 0 20.682-9.259 20.682-20.682s-9.259-20.682-20.682-20.682z"></path></svg>
        </button>
    </div>
    {% if shop.image %}
      <div class="banner" style="background-image: url({{ shop.image.url }})">
  
      </div>
    {% endif %}
    <div class="menu">
        <div class="container">
            <a href="/" class="menu-item{% if request.path == "/" %} menu-item-active{% endif %}">
                Home
            </a> 
            {% for category in categories limit: 10 %}
                {% assign path = '/category/' | append: category.id %}
                <a href="{{ path }}" class="menu-item{% if request.path == path %} menu-item-active{% endif %}">
                    {{ category.title }}
                </a> 
            {% endfor %}
        </div>
    </div>
    <div class="container products">
        <div class="row">
            {% for category in categories %}
                <div class="col-md-4">
                    <a href="/category/{{ category.id }}" class="product">
                        <div class="product-image" style="background-image: url({{ category.image.url }});">
                        </div>
                        <div class="product-info">
                            <div class="product-title">{{ category.title }}</div>
                            <div class="product-extra">
                                <div>{{ category.product_ids.size }} products</div>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
            
            {% if categories.size == 0 %}
                <div class="no-products">No categories</div>
            {% endif %}
        </div>
    </div>
</div>