---
title: Shopify Plugin for WordPress
description: >-
  Learn how to integrate Shopify with WordPress using the Shopify plugin for a
  headless commerce solution.  Build custom WordPress sites with Shopify's
  powerful ecommerce backend, including APIs, storefront components, and
  checkout functionality.
source_url:
  html: 'https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress'
  md: >-
    https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md
---

ExpandOn this page

* [How the plugin works](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#how-the-plugin-works)
* [How customization works](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#how-customization-works)
* [Merchant-facing content](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#merchant-facing-content)
* [Developing with the plugin](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#developing-with-the-plugin)
* [Next Steps](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#next-steps)

# Shopify Plugin for WordPress

The Shopify plugin enables integration between Shopify and WordPress by acting as a first-party sales channel app for headless storefronts embedded into WordPress sites. This allows merchants to display products and collections from their Shopify store directly on their WordPress site, while managing their e-commerce business through Shopify.

***

## How the plugin works

The Shopify plugin connects your Shopify store to a WordPress site, allowing product data to be synced and managed from Shopify. It uses [Shopify Storefront Web Components](https://shopify.dev/docs/api/storefront-web-components) to sync product data and render product cards, quick view modals, product detail pages, and collection displays.

***

## How customization works

The Shopify plugin provides four main components that you can customize:

* **Product Card Component**: Displays individual products in listings and category pages
* **Product Quick View Modal Component**: Shows product details in a popup modal
* **Product Detail Page Component**: Full product page display with images, variants, and descriptions
* **Collection Component**: Displays groups of products from collections

You can override the default components included in the Shopify plugin with [Storefront Web Components](https://shopify.dev/docs/api/storefront-web-components) to match your site's design requirements.

See the [Customize theme components](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress/customize-theme) tutorial for details.

***

## Merchant-facing content

To learn how merchants can connect their Shopify store to WordPress, add products, manage checkout traffic, and perform advanced customizations, refer to the [Help Center](https://help.shopify.com/manual/online-sales-channels/wordpress). Understanding how merchants use the WordPress plugin will help you build a great merchant experience when customizing these components.

***

## Developing with the plugin

The plugin is officially supported with default block themes, including [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/), [Twenty Twenty-Four](https://wordpress.org/themes/twentytwentyfour/), and [Twenty Twenty-Five](https://wordpress.org/themes/twentytwentyfive/).

Note

While other themes might work, they may require additional customization.

### Installation

Download the Shopify plugin zip file from <https://wordpress.org/plugins/shopify-plugin>.

For installation instructions, see [WordPress.com](https://wordpress.com/support/plugins/install-a-plugin/#install-a-plugin-with-a-zip-file) to learn how to install the plugin using the zip file.

Using Composer

If you're managing plugins with Composer, run the command below to install the Shopify plugin through WPackagist:

```bash
composer require wpackagist-plugin/shopify-plugin
```

Consult [WPackagist](https://wpackagist.org/) to set up the WordPress-specific custom install paths if you haven't done so already, but it will be something like the below once you've installed the plugin:

## composer.json

```json
{
    "name": "acme/super-shopify-wp-site",
    "description": "My brilliant WordPress + Shopify site",
    "repositories":[
        {
            "type":"composer",
            "url":"https://wpackagist.org"
        }
    ],
    "require": {
        "wpackagist-theme/twentytwentyfive":"*"
        ...
        "wpackagist-plugin/shopify-plugin":"*"
    },
    "extra": {
        "installer-paths": {
            "wp-content/themes/{$name}/": [
                "type:wordpress-theme"
            ],
            "wp-content/plugins/{$name}/": [
                "type:wordpress-plugin"
            ]
        }
    }
}
```

***

## Next Steps

* Follow the [Customize theme components](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress/customize-theme) tutorial to learn how to modify Product and Collection components to match your site's design and functionality requirements.

***

* [How the plugin works](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#how-the-plugin-works)
* [How customization works](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#how-customization-works)
* [Merchant-facing content](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#merchant-facing-content)
* [Developing with the plugin](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#developing-with-the-plugin)
* [Next Steps](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/wordpress.md#next-steps)