eleventy-plugin-shopify

    0.0.3 • Public • Published

    eleventy-shopify

    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

    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-07
      

    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

    Install

    npm i eleventy-plugin-shopify

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    107 MB

    Total Files

    18762

    Last publish

    Collaborators

    • dleatherman