hugo-shopsavvy

Hugo Module that adds shortcodes for product cards, deal feeds, and price history powered by the ShopSavvy Data API. Everything is fetched at build time via Hugo's resources.GetRemote — your generated site stays static, no runtime JS required.

Documentation · Get an API key · Other integrations

Install

As a Hugo Module (Hugo 0.107+)

# config.toml
[module]
  [[module.imports]]
    path = "github.com/shopsavvy/hugo-shopsavvy"

hugo mod get github.com/shopsavvy/hugo-shopsavvy
hugo mod tidy

As a legacy theme

git submodule add https://github.com/shopsavvy/hugo-shopsavvy themes/hugo-shopsavvy

# config.toml
theme = "hugo-shopsavvy"

Configure

Set your API key in either of two ways. The env var wins if both are set.

export HUGO_SHOPSAVVY_API_KEY="ss_live_…"

# config.toml
[params.shopsavvy]
  apiKey = "ss_live_…"

Shortcodes

{{< shopsavvy-product >}}

Renders a product with offers from across retailers.

Param	Required	Default	Notes
upc	one of these		Barcode / UPC / EAN / ISBN
asin	one of these		Amazon ASIN
id	one of these		ShopSavvy product ID
url	one of these		Direct retailer URL
layout		card	card, inline, or table
retailer			Filter offers to a single retailer slug
limit		5	Max offers to render

{{< shopsavvy-product upc="012345678905" >}}
{{< shopsavvy-product asin="B0DGHYDZSB" layout="inline" >}}
{{< shopsavvy-product url="https://www.target.com/p/-/A-12345678" layout="table" >}}

{{< shopsavvy-deals >}}

Renders a grid of trending deals.

Param	Default	Notes
category		Filter by category slug (e.g. electronics)
limit	10	Max deals to render
sort	trending	price, discount, or trending
grade		Optional minimum letter grade (e.g. A)

{{< shopsavvy-deals category="electronics" limit="8" >}}

{{< shopsavvy-price-history >}}

Renders an inline SVG sparkline.

Param	Default	Notes
upc / asin / id / url	required	One of these
days	90	Days of history (max 365)
width	240	SVG width in px
height	60	SVG height in px

{{< shopsavvy-price-history upc="012345678905" days="180" >}}

Styles

The module ships with a default stylesheet at assets/css/shopsavvy.css. Pull it in from your base layout:

{{ with resources.Get "css/shopsavvy.css" }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{ end }}

You can override the visual tokens via CSS variables:

:root {
  --shopsavvy-accent: #111;
  --shopsavvy-border: #e5e7eb;
  --shopsavvy-muted: #6b7280;
}

Example site

Run the bundled demo to see the shortcodes in action:

HUGO_SHOPSAVVY_API_KEY=ss_live_… cd exampleSite && hugo server

Test

./test.sh

License

MIT — see LICENSE.