Description
Display your Shopify products on WordPress with beautiful, responsive carousels. Built as a native Gutenberg block with OAuth authentication for easy setup.
Features
- 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
Use Cases
- Showcase featured products on your blog
- Display seasonal collections on landing pages
- Add product carousels to content-heavy sites
- Bridge content and commerce seamlessly
Requirements
- WordPress 6.0+, PHP 8.1+
- A Shopify store with Admin API access
Links
- GitHub Repository – Source code & developer docs
- Documentation – Full installation guide
External Services
This plugin connects to the Shopify Admin API to fetch your product data.
Service Provider: Shopify Inc.
Data Transmitted: Store URL, OAuth credentials (one-time), and product queries
When: During setup, when searching products in editor, and when displaying products (cached for 1 hour)
Privacy: No visitor data is sent to Shopify. All API calls are server-side. Product data is cached locally.
Shopify Legal:
* Terms of Service
* Privacy Policy
* API Terms
Configuration
Easy OAuth Setup
- Navigate to Shopify Products in WordPress admin
- Enter your Shopify Store URL (e.g.,
your-store.myshopify.com) - Paste your Client ID from Shopify
- Paste your Client Secret from Shopify
- Click “Connect to Shopify”
- You’ll be redirected to Shopify to authorize the connection
- After authorizing, you’re automatically redirected back – done!
The plugin automatically obtains the access token via secure OAuth and detects the latest Shopify API version.
Usage
- Edit any page or post in WordPress
- Click “+” to add a block and search for “Shopify Products”
- Choose Products Mode (select individual products) or Collection Mode (display a collection)
- Use the live search to find and add products
- Customize title, description, and product limit as needed
The block displays as a touch-friendly carousel on mobile and with arrow navigation on desktop. Single products get a special two-column featured layout.
Customization
For custom CSS classes, template overrides, hooks & filters, and developer documentation, see our GitHub README.
Troubleshooting
Products Not Showing
- Check API credentials in Settings Shopify Products
- Verify connection shows green checkmark
- Clear cache using the button in settings
- Ensure products are ACTIVE and in stock in Shopify
Can’t Configure Shopify App
- In Dev Dashboard, click “New version” to edit settings
- Add scopes in the “Access” section
- Click “Release” to activate your configuration
For detailed troubleshooting, see our GitHub documentation.
Credits
- Built with Embla Carousel for smooth, touch-friendly carousels
- Powered by @wordpress/scripts
Support
Privacy Policy
This plugin connects to Shopify’s API to fetch product data. Product information is cached locally. The plugin does NOT collect or transmit any visitor data. See Shopify’s privacy policy for their data handling practices.
Screenshots
Plugin settings page with Shopify API configuration 
Shopify Products block in Gutenberg editor with search interface 
Product carousel display on frontend with navigation 
Single product two-column layout 
Product search autocomplete in block editor 
Color swatches display with hover effects
Blocks
This plugin provides 1 block.
- Products Showcase Display Shopify products or collections in a beautiful carousel.
Installation
Video Tutorial
Watch the complete setup walkthrough on YouTube: How to Connect Shopify to WordPress
Standard Installation
- Upload the plugin files to
/wp-content/plugins/products-showcase/, or install through the WordPress plugins screen - Activate the plugin through the ‘Plugins’ screen in WordPress
- Go to Settings Shopify Products to configure your API credentials
- Add your Shopify store URL and Admin API access token
- Create or edit a page/post and add the “Shopify Products” block
- Search and select products or a collection to display
Development Installation
For active development with hot reloading:
- Clone the repository:
git clone https://github.com/HosseinKarami/products-showcase.git - Navigate to plugin directory:
cd products-showcase - Install dependencies:
npm install - Start development server:
npm start(watches for changes) - Activate the plugin in WordPress
Creating Your Shopify App
Step 1: Create the App
- Go to Shopify Admin Settings Apps and sales channels Develop apps Build apps in Dev Dashboard
- Click the “Create app” button (top right corner)
- In the “Start from Dev Dashboard” section (right side), enter an app name and click “Create”
Step 2: Configure App Version
- In the Versions section, click “New version”
- In the Access section, add
read_productsto the Scopes field - In the Redirect URLs field, paste the Redirect URL from your WordPress plugin settings
- Click “Release”, then confirm by clicking “Release” again in the popup
Step 3: Set Up Distribution
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.
- Click “Distribution” in the Right sidebar
- If prompted, select “Custom distribution” and click “Select”
- Enter your store domain (e.g., your-store.myshopify.com)
- Click “Generate link” and confirm
Step 4: Install the App
- Copy the generated install link and open it
- On the Shopify Admin install page, click “Install”
Step 5: Get Credentials
- Click “Settings” in the left sidebar
- Copy the Client ID and Secret from the Credentials section
FAQ
-
Do I need a Shopify account?
-
Yes, you need an active Shopify store to use this plugin. The plugin fetches product data from your Shopify store via the Admin API.
-
Does this plugin process payments?
-
No, this plugin only displays products. When users click on products, they’re redirected to your Shopify store to complete the purchase.
-
How often does product data update?
-
Product data is cached for 1 hour by default (configurable in settings). You can manually clear the cache from the settings page at any time to force a refresh.
-
Can I customize the appearance?
-
Yes! The plugin includes CSS classes that you can target with custom CSS. Advanced users can also override the template files by copying them to their theme.
-
Does it work with headless WordPress?
-
Yes! If you have WPGraphQL installed, the plugin automatically registers GraphQL types for querying product data in headless/decoupled WordPress setups.
-
Will this slow down my site?
-
No. The plugin uses intelligent caching to minimize API calls and only loads assets on pages where the block is used. Images are lazy-loaded for optimal performance.
-
Can I display products from multiple Shopify stores?
-
Currently, the plugin supports one Shopify store per WordPress installation. If you need multi-store support, please open a feature request on GitHub.
-
What happens if my Shopify API credentials change?
-
Click the “Disconnect” button in Shopify Products settings, then reconnect using the OAuth flow with your new credentials. The plugin will automatically obtain a new access token.
-
Can I filter out certain products?
-
Out-of-stock products are automatically filtered by default. Developers can use the
prodshow_filter_productsfilter hook to implement custom product filtering logic.
Reviews
Contributors & Developers
“Products Showcase – Shopify Integration” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Products Showcase – Shopify Integration” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.2
- 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
1.1.1
- 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
1.1.0
- 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
1.0.0
- 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