eps

eleventy-plugin-shopify

Demo: https://eleventy-plugin-shopify-demo.netlify.app/

Showing:

Popularity

Downloads/wk

21

GitHub Stars

11

Maintenance

Last Commit

25d ago

Contributors

1

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

eleventy-plugin-shopify

npm version

Import your Shopify products, pages, and collections into Eleventy as global data.

Note: This plugin currently uses a development version of Eleventy which includes addGlobalData(), tread carefully

View the demo site

Installation

  1. Install plugin using npm:

    npm install eleventy-plugin-shopify
    
  2. Add plugin to your .eleventy.js config, ensuring to add your Shopify url and a Storefront API key. Check out the Shopify docs for how to create a Storefront API key:

    You may also pass through your own graphql queries for products, collections, pages, and articles. Check out the graphiql storefront explorer to test queries. You may have to adjust the queries based on cost and size of the store.

    const pluginShopify = require("eleventy-plugin-shopify");
    
    require("dotenv").config();
    
    const { SHOPIFY_STORE_URL, SHOPIFY_ACCESS_TOKEN, SHOPIFY_API_VERSION } = process.env;
    
    module.exports = (eleventyConfig) => {
      eleventyConfig.addPlugin(pluginShopify, {
        url: SHOPIFY_STORE_URL,
        key: SHOPIFY_ACCESS_TOKEN,
        version: SHOPIFY_API_VERSION,
        // optional: shopQuery, productsQuery, collectionsQuery, pagesQuery, articlesQuery
      });
    };
    

    The example above is using dotenv with a .env file to ensure credentials are not stored in the source code. Here's an example of the .env file:

    SHOPIFY_STORE_URL=*.myshopify.com
    SHOPIFY_ACCESS_TOKEN=
    SHOPIFY_API_VERSION=2021-10
    

Usage

API

  • shopify.shop: A tool for accessing the shop name and URL
  • shopify.products: An array of all products in Shopify
  • shopify.articles: An array of all articles in Shopify
  • shopify.pages: An array of all pages in Shopify
  • shopify.collections: An array of all collections in Shopify

Development

  1. Create a .env file inside of demo with the following credentials:

     SHOPIFY_STORE_URL=*.myshopify.com
     SHOPIFY_ACCESS_TOKEN=
     SHOPIFY_API_VERSION=2021-07
    
  2. Amend the .eleventy.js file within demo so it points to the source code in the parent directory:

    // const pluginShopify = require("../");
    const pluginShopify = require("eleventy-plugin-shopify");
    
  3. Install the demo dependencies:

    cd demo
    npm install
    
  4. Run the demo locally:

    npm run dev
    

Gotchas

Beware of the page keyword when adding a layout for your shopify pages. In the demo we've called this spage

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100