Shopify Catalog Explorer

Overview

An interactive tool for browsing and exploring products from any Shopify store using Shopify’s Storefront Web Components. Built as an interactive SPA within an Astro page.

Live URL: https://stackingcontext.com/shopify-tools/catalog-explorer

Purpose

This tool allows users (both technical and non-technical) to explore products from any public Shopify store without needing an API key or writing code. Perfect for:

• Product Research - Browse competitor stores to understand their product offerings
• Store Discovery - Explore new Shopify stores and their catalogs
• Price Comparison - View real-time pricing across different stores
• Demo & Testing - Test Shopify Storefront Web Components in action

Technical Implementation

Framework & Architecture

• Astro 5.7.5 - Static site with interactive islands
• Shopify Storefront Web Components - Official Shopify web components for product display
• Client-side JavaScript - Real-time store loading and product rendering
• Tailwind CSS 4.1.4 - Styling and responsive design
• No backend required - All data fetched directly from Shopify’s Storefront API

Key Features

1. Store Configuration

• Store Domain Input - Enter any Shopify store domain (myshopify.com or custom domain)
• Auto-normalization - Automatically adds https:// and removes trailing slashes
• Demo Store - Pre-loaded with demostore.mock.shop for immediate testing
• Real-time Loading - Click “Load Catalog” to fetch and display products

2. Product Display

• Grid Layout - Responsive grid showing 1-4 columns based on screen size
• Product Cards - Each card displays:
  • Featured product image with hover zoom effect
  • Product title (truncated to 2 lines)
  • Price formatted with currency
• 24 Products - Initially loads 24 products, sorted alphabetically by title
• Loading States - Animated spinner while fetching products
• Error Handling - User-friendly error messages for invalid stores

3. Interactive Elements

• Hover Effects - Cards scale and change border color on hover
• Image Zoom - Product images scale on hover for better preview
• Collapsible Use Cases - Smooth 300ms animation using max-height transition
• Responsive Design - Adapts to mobile, tablet, and desktop screens

4. Shopify Web Components Integration

• <shopify-store> - Container that connects to the Shopify store
• <shopify-list-context> - Queries and displays multiple products
• <shopify-media> - Renders product images with proper srcset
• <shopify-data> - Displays text data like product titles
• <shopify-money> - Formats prices with currency

Component Structure

1
<shopify-store store-domain="https://your-store.myshopify.com">
2
</shopify-store>
3

4
<shopify-list-context type="product" query="products" first="24" sort-key="TITLE">
5
  <template>
6
    <!-- This template repeats for each product -->
7
    <div class="product-card">
8
      <shopify-media query="product.featuredImage"></shopify-media>
9
      <shopify-data query="product.title"></shopify-data>
10
      <shopify-money query="product.priceRange.minVariantPrice"></shopify-money>
11
    </div>
12
  </template>
13
</shopify-list-context>

Design Philosophy

User Experience

• No Authentication Required - Works with any public Shopify store
• Instant Feedback - Loading states and error messages keep users informed
• Familiar Patterns - Consistent with other Shopify tools on the site
• Progressive Disclosure - Use cases hidden by default to reduce initial overwhelm

Visual Design

• Dark Theme - Consistent with site design (gray-700 borders, gray-800 backgrounds)
• Color Coding - Green for prices, blue for links, red for errors
• Smooth Animations - 300ms transitions on collapsibles and hover effects
• Responsive Images - Aspect-square containers prevent layout shift

Project Guidelines Compliance

Cursor Pointers

• ✅ cursor-pointer on “Load Catalog” button
• ✅ cursor-pointer on collapsible use cases toggle

Animated Collapsibles

• ✅ Use cases section uses max-height + opacity transitions (300ms ease)
• ✅ Chevron icon rotates 180deg with matching animation
• ✅ No display:none toggles - smooth animation with scrollHeight

Consistent Styling

• ✅ Matches cart-permalink tool styling
• ✅ Same border colors (gray-600, gray-700)
• ✅ Same hover states (border-gray-500)
• ✅ Same info banner design (blue-500/10 background)
• ✅ Same input field styling

SEO & Metadata

Structured Data

• Schema.org WebApplication markup
• Feature list highlighting key capabilities
• Price: $0 (free tool)
• Application category: Business Application

Meta Tags

• Optimized title and description
• Relevant keywords for discovery
• Targets: Shopify developers, store owners, product researchers

Browser Compatibility

• Modern Browsers - Chrome, Firefox, Safari, Edge (latest 2 versions)
• Mobile Browsers - iOS Safari, Chrome Mobile, Samsung Internet
• Web Components Support - Uses native Custom Elements and Shadow DOM
• No IE11 Support - Shopify Web Components don’t support IE11

Dependencies

Runtime Dependencies

• Shopify Storefront Web Components CDN: https://cdn.shopify.com/storefront/web-components.js
• No npm packages required for runtime

Build Dependencies

• Astro 5.7.5
• Tailwind CSS 4.1.4
• TypeScript (for type checking in script tags)

Future Enhancements

Potential features for future versions:

1. Pagination - Add “Load More” or “Previous/Next” buttons
2. Filtering - Filter products by price, availability, or type
3. Search - Search products by title or description
4. Collection Browsing - Browse products by collection
5. Product Details Modal - Click to view full product details
6. Sorting Options - Sort by price, date added, popularity
7. Export Functionality - Export product list to CSV or JSON
8. Access Token Support - Optional token for inventory counts

Known Limitations

• Public Data Only - Can only access public Shopify storefronts
• 24 Product Limit - Currently shows first 24 products (pagination needed for more)
• No Cart Functionality - This is a read-only catalog viewer
• Store Validation - No upfront validation of store domain (errors shown after load)
• Loading Time - Initial load depends on store’s product count and API response time

Development Notes

Testing Stores

• Demo Store: demostore.mock.shop - Shopify’s official demo store
• Your Store: Any .myshopify.com store or custom domain
• Test Cases: Empty stores, stores with many products, stores with custom domains

Error Scenarios

• Invalid store domain
• Non-existent store
• Store with no products
• Network errors
• CORS issues (shouldn’t happen with public storefronts)

Resources

• Shopify Storefront Web Components Docs
• Shopify Storefront API
• Web Components Playground
• Shopify Cart Permalink Generator - Related tool

Changelog

See CHANGELOG.md for version history and updates.