Changelog

All notable changes to the Shopify Variant ID Finder will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[1.0.2] - 2025-01-04

Added

• Toast Notification System - Accessible toast notifications for user feedback
  • Fixed positioning at bottom-center of screen
  • Slide-up animation with smooth transitions (translateY(100px) to translateY(0))
  • 3-second display duration with auto-dismiss
  • Success checkmark icon for visual feedback
  • Dark theme styling matching site design (#1f2937 background, #374151 border)
  • ARIA attributes for accessibility (role=“status”, aria-live=“polite”, aria-atomic=“true”)
  • Replaces inline “Copied!” feedback on copy button

Changed

• Copy Button Feedback - Now triggers toast notification instead of inline feedback
  • Removed green background flash on successful copy
  • Removed “Copied!” text change on button
  • Cleaner, more consistent user experience across the site
• Error Messaging - Enhanced error messages with password protection guidance
  • Added specific message about password-protected stores
  • Clarifies that stores must allow public access to product pages
  • Helps users troubleshoot when the tool cannot fetch data
  • Better user guidance for common failure scenarios

[1.0.1] - 2025-01-04

Added

• Variant Featured Images - Display variant images if they exist
  • Shows 128x128px (w-32 h-32) product image for each variant
  • Rounded corners with gray border matching site theme
  • Only displays if variant has a featured_image property

Changed

• Copy Button Redesign - Updated to match Cart Permalink Generator style
  • White background with black text (was gray)
  • Added copy icon (clipboard SVG) before text
  • Proper aria-label for accessibility
  • Green background flash on successful copy
  • “Copied!” text feedback
  • Better visual hierarchy and consistency
• Price Formatting - Proper currency formatting using Intl.NumberFormat
  • Displays as $X.XX format with proper currency symbols
  • Uses en-US locale and USD currency
  • Applied to both regular price and compare-at price
• Options Layout - Added flex-wrap to options for better mobile display
  • Options now wrap properly on small screens
  • Prevents horizontal overflow

Fixed

• Copy Functionality - Improved error handling
  • Shows “Failed!” message if copy fails
  • Proper error logging to console
  • More robust event handling

1.0.0 - 2025-01-04

Added - Initial Release

Core Functionality

• Complete SPA for finding variant IDs from Shopify product URLs
• Integration with Shopify AJAX API for real-time product data
• URL parsing to extract store domain and product handle
• Automatic fetching of product and variant information
• No authentication or API key required

Product Display Features

• Product Information Panel - Shows:
  • Product title and ID
  • Vendor and product type
  • Overall availability status (Available/Sold Out)
  • Direct link to product page
• Variant Cards - Individual cards for each variant with:
  • Variant ID with one-click copy button
  • SKU (Stock Keeping Unit)
  • Current price and compare-at price (if on sale)
  • Availability status (In Stock/Out of Stock)
  • Option values (size, color, style, etc.)
• Variant Count - Display total number of variants found

User Interface

• Product URL Input - Text field for pasting Shopify product URLs
• Find Variants Button - Triggers product data fetch
• Loading States - Animated spinner while fetching data
• Error States - User-friendly error messages with helpful solutions
• Responsive Layout - Grid layouts for product info and variant cards
• Copy Functionality - One-click copy for variant IDs with visual feedback

Interactive Features

• Collapsible Use Cases Section - Smooth 300ms animation
  • Cart Permalink Generation use case
  • Development & Testing use case
  • Product Data Analysis use case
  • API Integration use case
• Copy to Clipboard - Each variant ID has a copy button
  • Visual feedback (“Copied!” confirmation)
  • 2-second timeout before reverting
  • Green background flash on successful copy

Design & Styling

• Dark Theme - Consistent with site design
  • Border colors: gray-600 (inputs), gray-700 (cards)
  • Hover states: gray-500, gray-400
  • Background colors: gray-800 (code blocks), gray-900 (variant cards)
• Color Coding
  • Green for available/in stock status
  • Red for sold out/out of stock status
  • Blue for links and info (blue-400, blue-300)
• Typography
  • H1: text-5xl sm:text-6xl
  • H2: text-3xl (use cases), text-2xl (results sections)
  • H3: text-xl (use case cards, results subsections)
  • Body: text-xl (intro), text-sm (helper text)
  • Monospace: font-mono for IDs and SKUs

API Integration

• Shopify AJAX API - Uses public AJAX API endpoint
  • Endpoint: /{locale}/products/{product-handle}.js
  • No authentication required
  • Returns up to 250 variants per product
  • Real-time product data
• Error Handling - Catches network errors, invalid URLs, and missing products
• URL Parsing - Supports both myshopify.com and custom domains

Responsive Design

• Mobile-first approach
• Grid layouts adapt to screen size:
  • Mobile: Single column
  • Desktop: 2-3 column grids
• Touch-friendly button sizes (px-6 py-3)
• Responsive typography and spacing

Accessibility

• Semantic HTML structure
• Proper form labels with for attributes
• Required field indicators (*)
• ARIA labels where appropriate
• Keyboard navigation support
• Focus states on interactive elements
• Color contrast meets WCAG standards

SEO Optimization

• Structured data (Schema.org WebApplication)
• Meta title and description
• Keywords targeting Shopify variant ID searches
• Feature list in structured data
• Free pricing indicator ($0)

Project Guidelines Compliance

• ✅ All buttons have cursor-pointer class
• ✅ All collapsibles use smooth animations (max-height + opacity)
• ✅ No simple display:none toggles without transitions
• ✅ Consistent styling with other Shopify tools
• ✅ README.md and CHANGELOG.md included

Technical Details

• Framework: Astro 5.7.5
• Styling: Tailwind CSS 4.1.4
• API: Shopify AJAX API (public, unauthenticated)
• No Backend: All client-side, no server required
• No External Libraries: Vanilla JavaScript only

Notes

• This is the initial release of the Shopify Variant ID Finder
• Built to complement the existing Cart Permalink Generator tool
• Designed for quick variant ID lookup for developers and store owners
• Future versions may include batch processing and export functionality

Future Roadmap

Planned features for upcoming versions:

[1.1.0] - Planned

• Copy all variant IDs button
• Export variants to CSV
• Export variants to JSON
• URL history / recently viewed products

[1.2.0] - Planned

• Batch processing (upload CSV of URLs)
• Filter variants by stock status
• Filter variants by price range
• Search within variants (SKU, title)

[1.3.0] - Planned

• Deep linking with pre-filled URL
• Integration with Cart Permalink Generator
• QR code generation
• Save favorite products