Products Showcase – Shopify Integration

• Native Gutenberg Block - Built with React, zero external dependencies
• Beautiful Carousels - Touch-friendly product carousels powered by Embla Carousel
• Smart Product Display - Show individual products or entire collections
• Color Swatches - Visual product color options with hover effects
• Fully Responsive - Optimized for all screen sizes and devices
• Performance Optimized - Smart caching and lazy loading
• Live Search - Real-time product/collection search in block editor
• Stock Filtering - Automatically hides out-of-stock items
• OAuth Authentication - Secure one-click connection to Shopify

• Showcase featured products on your blog
• Display seasonal collections on landing pages
• Add product carousels to content-heavy sites
• Bridge content and commerce seamlessly

• WordPress 6.0+, PHP 8.1+
• A Shopify store with Admin API access

• GitHub Repository - Source code & developer docs
• Documentation - Full installation guide

1. Upload the plugin files to /wp-content/plugins/products-showcase/, or install through the WordPress plugins screen
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Go to Settings → Shopify Products to configure your API credentials
4. Add your Shopify store URL and Admin API access token
5. Create or edit a page/post and add the "Shopify Products" block
6. Search and select products or a collection to display

1. Clone the repository: git clone https://github.com/HosseinKarami/products-showcase.git
2. Navigate to plugin directory: cd products-showcase
3. Install dependencies: npm install
4. Start development server: npm start (watches for changes)
5. Activate the plugin in WordPress

1. Go to Shopify Admin → Settings → Apps and sales channels → Develop apps → Build apps in Dev Dashboard
2. Click the "Create app" button (top right corner)
3. In the "Start from Dev Dashboard" section (right side), enter an app name and click "Create"

1. In the Versions section, click "New version"
2. In the Access section, add read_products to the Scopes field
3. In the Redirect URLs field, paste the Redirect URL from your WordPress plugin settings
4. Click "Release", then confirm by clicking "Release" again in the popup

Note: If you created your app from a merchant store (via Shopify Admin → Settings → Apps → Develop apps), your app automatically uses "Custom distribution" and you won't see other distribution options. This is expected — custom distribution is the correct method for connecting your own store to WordPress. Only apps created from a Shopify Partner account would have multiple distribution options.

1. Click "Distribution" in the Right sidebar
2. If prompted, select "Custom distribution" and click "Select"
3. Enter your store domain (e.g., your-store.myshopify.com)
4. Click "Generate link" and confirm

1. Copy the generated install link and open it
2. On the Shopify Admin install page, click "Install"

1. Click "Settings" in the left sidebar
2. Copy the Client ID and Secret from the Credentials section

• Clarified app distribution documentation for merchant store vs Partner account apps
• Apps created from a merchant store use "Custom distribution" by default — this is now documented
• Updated Distribution location to right sidebar in setup instructions
• Improved Quick Start guide in WordPress admin with clearer distribution notes

• Updated setup instructions for Shopify Dev Dashboard (new app creation flow)
• Improved documentation with step-by-step guidance for Versions, Distribution, and Credentials
• Updated admin Quick Start guide to reflect current Shopify interface

• NEW: OAuth 2.0 Authentication - Easy one-click connection to Shopify using secure OAuth flow
• NEW: Auto API Version Detection - Automatically detects and uses the latest Shopify API version
• NEW: Simplified Setup - No more manual access token copying - just enter Client ID & Secret and click Connect
• NEW: Disconnect/Reconnect - Easy way to change Shopify credentials
• NEW: Refresh API Version - Button to manually refresh the detected API version
• Improved admin UI with better connection status display
• Enhanced security with OAuth state validation

• Initial release
• Native Gutenberg block integration
• Product carousel display with Embla Carousel
• Collection support with product limits
• Color swatches with visual options
• Live search autocomplete in editor
• Intelligent caching system (1 hour default)
• Responsive design for all devices
• Stock filtering (hides out-of-stock items)
• REST API endpoints for product/collection search
• WPGraphQL integration for headless WordPress
• Template override support
• Hooks and filters for developers