How to break Shop Page to Category – Products – Category – Products

[tuanphan]

To break layout of Shop Page to Category Title – Products – Category Title – Products, like this.

#1. First, use this code to Shop Page Header Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var currentUrl = window.location.pathname;
    var jsonUrl = currentUrl + '?format=json-pretty';
    
    $.getJSON(jsonUrl, function(data) {
        try {
            var categories = data.nestedCategories ? data.nestedCategories.categories : [];
            var products = data.items || [];
            
            var $container = $('.product-list-container');
            if ($container.length === 0) return;
            
            var $existingItems = $container.find('.product-list-item').detach();
            
            $container.empty();
            
            var productMap = {};
            $existingItems.each(function() {
                var $item = $(this);
                var href = $item.find('.product-list-item-link').attr('href');
                if (href) {
                    var urlId = href.split('/').pop();
                    productMap[urlId] = $item;
                }
            });
            
            if (categories.length > 0) {
                categories.forEach(function(category) {
                    var categoryProducts = products.filter(function(product) {
                        return product.categoryIds && product.categoryIds.includes(category.id);
                    });
                    
                    if (categoryProducts.length > 0) {
                        createCategorySection(category, categoryProducts, $container, productMap);
                    }
                });
            }
            
            var allCategoryId = data.nestedCategories ? data.nestedCategories.all.id : null;
            var uncategorizedProducts = products.filter(function(product) {
                if (!product.categoryIds || product.categoryIds.length === 0) return true;
                if (allCategoryId && product.categoryIds.length === 1 && product.categoryIds[0] === allCategoryId) return true;
                return false;
            });
            
            if (uncategorizedProducts.length > 0) {
                createCategorySection({displayName: 'All Products'}, uncategorizedProducts, $container, productMap);
            }
            
        } catch (error) {
            console.error('Error processing data:', error);
        }
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error('Error loading JSON:', textStatus, errorThrown);
    });
    
    function createCategorySection(category, products, $container, productMap) {
        var $categorySection = $('<div class="category-section"></div>');
        var categoryName = category.displayName || 'Unknown Category';
        var $categoryTitle = $('<h2 class="category-title"></h2>').text(categoryName);
        var $productsList = $('<div class="products-list"></div>');
        
        products.forEach(function(product) {
            var $existingItem = productMap[product.urlId];
            if ($existingItem) {
                $productsList.append($existingItem);
            }
        });
        
        if ($productsList.children().length > 0) {
            $categorySection.append($categoryTitle);
            $categorySection.append($productsList);
            $container.append($categorySection);
        }
    }
});
</script>

#2. Use this code to Custom CSS

/* break shop page */
.product-list-container {
    display: block !important;
}
.products-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 30px 30px;
}
@media screen and (max-width:767px) {
   .products-list {
       grid-template-columns: repeat(2,1fr) !important;
   }
}

#3. Result