Changelog

All notable changes to the Shopify Cart Permalink Generator will be documented in this file.

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

[1.0.1] - 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”)
  • Provides clear feedback when permalink is copied to clipboard

Changed

• Copy Button Feedback - Now triggers toast notification on successful copy
  • Consistent user experience with Variant ID Finder tool
  • More visible feedback that doesn’t require looking at the button

[1.0.0] - 2025-12-28

Added - Initial Release

Core Functionality

• Complete form-based SPA for generating Shopify cart permalinks
• Support for all Shopify cart permalink parameters from official documentation
• Real-time permalink generation with instant URL updates
• Copy to clipboard functionality with visual feedback
• Store URL as the first field (required)
• Product variant IDs with dynamic add/remove capability
• Quantity input for each variant

User-Friendly Features

• Line Item Properties - Key-value pair system instead of raw JSON

  • Maximum 25 properties enforced
  • Automatic JSON building and Base64 URL encoding
  • Dynamic add/remove property rows
  • User-friendly input fields (no technical knowledge required)

• Checkout Information Section - Collapsible with smooth animations

  • Email pre-fill
  • First and last name
  • Complete shipping address (Address1, Address2, City, Province, Country, Zip)
  • Animated chevron indicator

• Additional Options

  • Storefront access token for sales channel attribution
  • Discount codes (comma-separated)
  • Locale for localized checkout
  • Order note for tracking
  • Referral code for conversion tracking
  • Redirect to cart checkbox
  • Shop Pay checkbox

UI/UX Enhancements

• Natural Language Summary Panel

  • Desktop: Sticky panel on right side with 26px margin-top
  • Mobile: Bottom panel below copy button
  • Comprehensive description including:
    • Number of products and store URL
    • Custom properties with actual key-value pairs
    • Pre-filled checkout information (email, name, full address)
    • Discount codes
    • Tracking information
    • Destination (checkout, cart, or Shop Pay)

• Use Cases Section - Collapsible accordion

  • Marketing Campaigns (green card)
  • Personalized Shopping (blue card)
  • Product Bundles (purple card)
  • Sales Channel Attribution (orange card)
  • Smooth max-height/opacity animations (300ms)
  • Rotating chevron indicator

• Documentation Reference Banner

  • Full-width info banner with blue theme
  • Link to official Shopify documentation
  • Info icon and clear description

• Tooltip System

  • Question mark icons next to non-obvious fields
  • Shows on hover, focus, and click
  • Positioned above field with arrow indicator
  • Helpful context for:
    • Line item properties
    • Storefront access token
    • Locale
    • Order note
    • Referral code
    • Cart redirect
    • Shop Pay

Responsive Design

• Desktop (lg+)

  • 3-column grid layout (2 cols form, 1 col summary)
  • Sticky summary panel

• Mobile (< lg)

  • Single column layout
  • Summary panel at bottom
  • Flex-column for info banner

• Small Screens (< 320px)

  • Variant fields shrink with min-w-0
  • Quantity input: w-20 instead of w-24
  • Reduced padding: px-2 instead of px-4
  • Property inputs with flex-wrap
  • Remove button moves below inputs with mt-3

Accessibility & Forms

• All fields have unique id and name attributes
• Dynamic fields use indexed naming: variant-id-${index}, property-key-${index}
• Required field indicators (*)
• Proper label associations
• Semantic HTML structure
• Keyboard accessible

Animations & Interactions

• All buttons have cursor-pointer class
• Exception: disabled buttons use disabled:cursor-not-allowed
• Collapsible sections use smooth CSS transitions
• Max-height and opacity animations (300ms duration)
• No simple hidden class toggles without transitions
• Accordion chevrons rotate 180deg on expand

SEO & Metadata

• Page Title: “Shopify Cart Permalink Generator - Free Tool | Stacking Context”
• Meta Description: Comprehensive description with keywords
• Keywords: Targeted SEO terms
• Open Graph Tags: Proper social sharing
• Twitter Cards: summary_large_image
• JSON-LD Structured Data: WebApplication schema
  • Application details
  • Free price offer
  • Feature list
  • Creator organization
  • Operating system info

Content & Copy

• Page title with increased margins (mt-12, mb-16)
• Clear description explaining tool purpose
• No em dashes in copy (user preference)
• Professional, concise language

Changed

[2025-12-28] - Navbar Order

• Updated navigation order from “Tools, Articles, Contact” to “Articles, Tools, Contact”
• File: /src/components/Navbar.astro

[2025-12-28] - Line Item Properties

• Changed from JSON textarea to user-friendly key-value pairs
• Automatic JSON building in background
• Base64 URL encoding handled automatically
• Maximum 25 properties with validation

[2025-12-28] - Form Label Colors

• Removed text-gray-700 classes for better contrast
• Labels now use default white text on dark background
• Consistent with contact form styling

[2025-12-28] - Product Variants Label

• Changed from “Product Variants” to “Product Variant IDs”
• More accurate description for users

[2025-12-28] - Title Spacing

• Increased top margin to mt-12
• Increased bottom margin to mb-16
• Better visual hierarchy

[2025-12-28] - Documentation Reference Position

• Moved from top to below page description
• Now appears as info banner before form
• Full-width banner for better visibility

[2025-12-28] - Natural Language Summary Position

• Desktop: Changed from top-8 to 26px margin-top
• Better alignment with content flow

Fixed

[2025-12-28] - Mobile Layout Issues

• Line Item Properties Overflow

  • Added flex-wrap to property row container
  • Added min-w-0 to input fields
  • Made remove button full-width below inputs
  • Fixed overflow on mobile screens

• Footer Navigation

  • Changed from horizontal to column on mobile
  • Added flex-col sm:flex-row to nav container

• Info Banner Layout

  • Added flex-col sm:flex-row for mobile
  • Better stacking on small screens

• Product Variant IDs Overflow (< 320px)

  • Added min-w-0 to variant ID input
  • Changed quantity from w-24 to w-20 min-w-0
  • Reduced padding from px-4 to px-2
  • Fields now shrink on very small screens

[2025-12-28] - Form Field Attributes

• Added unique id and name to all static fields
• Added unique id and name to dynamically generated fields
• Proper form handling and accessibility

[2025-12-28] - Em Dash Removal

• Removed em dash from marketing campaigns copy
• Changed “browsing—send” to “browsing and send”

Technical Details

File Structure

1
Initial: /src/pages/shopify-tools/cart-permalink.astro
2
Current: /src/pages/shopify-tools/cart-permalink/
3
         ├── index.astro
4
         ├── README.md
5
         └── CHANGELOG.md

Route

• URL path remains: /shopify-tools/cart-permalink
• No breaking changes to public URL

Dependencies

• Astro 5.7.5
• Tailwind CSS 4.1.4
• No external JavaScript libraries

Browser Features Used

• Clipboard API
• CSS Grid & Flexbox
• CSS Transitions
• ES6+ JavaScript
• URLSearchParams API
• Base64 encoding (btoa)

Related Changes

Site-wide Updates Made Simultaneously

• Created /shopify-tools/ route and landing page
• Updated Navbar to show “Tools” link
• Updated Footer to include “Tools” link first
• Installed @astrojs/sitemap for SEO
• Created robots.txt for search engines
• Enhanced Layout component with SEO props
• Added dynamic OG image generation
• Added Article schema to articles
• Added Organization schema to homepage

[Unreleased]

Potential Future Enhancements

• Variant ID validation against Shopify API
• Store URL validation
• Save/load preset configurations
• QR code generation for links
• URL shortening integration
• Link analytics tracking
• Preview mode showing cart contents
• Bulk link generation from CSV
• Template system for common configurations
• Product name fetching from API

Known Issues

• No validation that variant IDs exist
• No validation that store URL is accessible
• Generated links fail silently if products don’t exist
• No error handling for invalid inputs

Version History Summary

• 1.0.0 (2025-12-28) - Initial release with full functionality
  • Complete cart permalink generation
  • User-friendly interface for non-technical users
  • Comprehensive SEO optimization
  • Mobile responsive design
  • Natural language summaries
  • Collapsible sections
  • Full accessibility support

Maintenance Note: When making changes to this tool, always update both this CHANGELOG and the README.md file to maintain accurate documentation.

Format: This changelog follows the Keep a Changelog format with Added, Changed, Fixed, and Removed sections.

Versioning: Version numbers follow Semantic Versioning: MAJOR.MINOR.PATCH