ShopSavvy for Eleventy

An Eleventy (11ty) plugin that adds shortcodes for product cards, deal feeds, and price history, plus a Liquid/Nunjucks filter and a global data file with trending deals. Ships as dual ESM/CJS so it works on both 11ty 2.x and 3.x setups.

Set up ShopSavvy for Eleventy

1. 1

   Get a ShopSavvy Data API key

   Create a key at shopsavvy.com/data. Keys look like ss_live_ followed by 32 characters. Keep it out of source control.

2. 2

   Install from GitHub

   The package in the install command (npm install eleventy-plugin-shopsavvy) is not on its public registry yet, so install from the source repository and follow its README:

   git clone https://github.com/shopsavvy/eleventy-plugin-shopsavvy.git

3. 3

   Add your API key

   Set the SHOPSAVVY_API_KEY environment variable to your key (shell, .env file or Eleventy's secrets settings), or pass it to the client as the README shows.

4. 4

   Make your first call

   From the shopsavvy/eleventy-plugin-shopsavvy README (Configure):

   // eleventy.config.mjs (ESM, Eleventy 3)
   import shopsavvy from "eleventy-plugin-shopsavvy"
   
   export default function (eleventyConfig) {
     eleventyConfig.addPlugin(shopsavvy, {
       apiKey: process.env.SHOPSAVVY_API_KEY, // optional: SHOPSAVVY_API_KEY is read by default
       cacheTTL: 60_000, // optional: reuse identical API responses for this long during a build
     })
   }

   Copied from the repository README.

5. 5

   Configure

   From the shopsavvy/eleventy-plugin-shopsavvy README (Configure):

   // .eleventy.js (CommonJS, Eleventy 2 or 3)
   const shopsavvy = require("eleventy-plugin-shopsavvy")
   
   module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(shopsavvy)
   }

   Copied from the repository README.

6. 6

   Run the example

   From the shopsavvy/eleventy-plugin-shopsavvy README (Run the example):

   bun install && bun run build
   cd examples/basic && SHOPSAVVY_API_KEY=ss_live_… npx @11ty/eleventy

   Copied from the repository README.

Keys come with a Data API plan. See plans.

Features

Use Cases

What data, how often, which direction

Data

Product records, current offers from tens of thousands of retailers and price history back to 2011, dense from 2019, from the ShopSavvy Data API. Prices are in US dollars.

How often

Every offer carries the time it was last checked. With the Data API you can schedule refreshes hourly, daily or weekly for retailers we can re-check through an official retailer API; other retailers update as ShopSavvy sees them.

Direction

ShopSavvy data flows into Eleventy. Requests carry only what you ask about (identifiers, search terms or schedules) and your API key.

FAQ

Related Integrations