Category Icons Widget¶

Description¶

The Category Icons Widget displays products by category with icons/tabs for switching. Uses GraphQL API for real-time product fetching.

Page Builder Name: Category Icons | PapaThemes

Version: 1.0.2

Features¶

• ✅ Real-time product fetching via GraphQL
• ✅ Switch between categories
• ✅ Display price, rating, buy button
• ✅ Tax settings support
• ✅ Quick view and Compare
• ✅ View All button
• ✅ Loading states

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Category Icons | PapaThemes widget to the page
3. Configure categories

2. Configuration¶

Category Items¶

Product Display¶

Button Settings¶

Quickview Settings¶

GraphQL Queries¶

Fetch Category ID by Path¶

query getCategoryByPath($path: String!) {
    site {
        route(path: $path, redirectBehavior: FOLLOW) {
            node {
                ... on Category {
                    entityId
                    name
                    path
                }
            }
        }
    }
}

Fetch Products by Category¶

query {
    site {
        category(entityId: $categoryId) {
            products(first: $limit, sortBy: $sortBy) {
                edges {
                    node {
                        name
                        entityId
                        path
                        sku
                        prices {...}
                        reviewSummary {...}
                        defaultImage {...}
                        productOptions {...}
                    }
                }
            }
        }
    }
}

Sort Options¶

Tax Display¶

Widget automatically handles tax settings:

Category Switching¶

Behavior¶

1. Click on category tab
2. Active tab is highlighted
3. Loading state displays
4. Fetch new products
5. Render product grid
6. View All button updates

Loading State¶

.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

Product Card Structure¶

<li class="product">
    <article class="card" data-entity-id="123">
        <figure class="card-figure">
            <!-- Image -->
            <!-- Sale badge -->
            <!-- Out of stock badge -->
            <!-- Buttons (below_image) -->
        </figure>
        <div class="card-body">
            <!-- Name -->
            <!-- SKU -->
            <!-- Brand -->
            <!-- Rating -->
            <!-- Price -->
        </div>
        <div class="card-footer">
            <!-- Buttons (below_card) -->
        </div>
    </article>
</li>

Empty State¶

When no products found:

<div class="message_empty">
    There are no products listed under this category
</div>

Usage Examples¶

Shop by Category¶

Tab 1: Men's Clothing - /mens/
Tab 2: Women's Clothing - /womens/
Tab 3: Accessories - /accessories/
Tab 4: Sale - /sale/

Featured Products¶

Tab 1: New Arrivals - sortBy: NEWEST
Tab 2: Best Sellers - sortBy: BEST_SELLING
Tab 3: On Sale - sortBy: LOWEST_PRICE

Performance¶

Optimizations¶

• Lazy load images
• Debounce category clicks
• Cache responses
• Progressive rendering

Image Sizes¶

Widget requests multiple image sizes: - 80w, 160w, 320w, 640w, 960w, 1280w, 1920w - Uses srcset for responsive images

Notes¶

1. Category Path: Must be valid path in store
2. GraphQL Token: Required for data fetching
3. Product Count: Keep under 20 for performance
4. Tax Settings: Automatically follows store settings
5. Stock Status: Shows out of stock message from settings