Shopify Guide

Install the Recipe Widget on Shopify

A cocktail gallery page plus recipes on every product page — wired to Shopify's built-in SKU/UPC fields, no metafields or manual product IDs.

Shopify gets the widget's full ecommerce treatment: a dedicated cocktail gallery page, plus a recipe row on each product page that matches recipes to the bottle automatically using the SKU or barcode Shopify already stores. Recipes render into your page's DOM (not an iframe), so the SEO accrues to your store's domain.

Before you start

A Crafted Pour brand profile. If you have not claimed yours yet, start free at craftedpour.com/claim.
Your products registered with Crafted Pour. Email info@craftedpour.com with your product list, product detail page URLs, a photo of each product, and UPC codes (preferred) or SKUs. We register these so your products appear as shoppable ingredients and the right recipes flow into your widget. Paid plans can manage products directly in the CMS.
Your plugin_id. We issue this when we provision your widget — it ties the embed to your brand's products, settings, and domain. Log in at craftedpour.com/cms — your Plugin document is listed there, and its document ID is your plugin_id. It is also in your onboarding email, or ask info@craftedpour.com.
Your site domain on file with us. Tell us the exact domain (and any staging/preview domains) where the widget will run so we can register them. Recipes will not load from an unregistered domain.
Brand color hex codes (6 digits, without #) if you want the widget styled to match your site — e.g., B42B30. A tool like htmlcolorcodes.com helps.
Access to your Shopify admin (Online Store → Pages and → Themes).
UPCs in each variant’s Barcode field (preferred) or SKUs in the SKU field, matching what you registered with Crafted Pour.
Testing on a preview/staging domain (e.g. shopifypreview.com)? Send us the full preview URL first so we can whitelist it.

Part 1 — Cocktail gallery page

Create the page

In Shopify admin, go to Online Store → Pages and click Add page. Name it (e.g., “Cocktail Recipes”).

Switch the editor to HTML

In the Content editor toolbar, click the <> (Show HTML) button so you are editing raw HTML, not rich text.

Paste the embed

Cocktail gallery embed (v2)

<!-- Crafted Pour SEO script (load first) -->
<script type="text/javascript"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin-seo.js">
</script>

<!-- Crafted Pour recipe widget -->
<script id="crafted-pour-recipe-plugin-script"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js?plugin_id=YOUR_PLUGIN_ID&catfilter=true&productfilter=true&featured=true&primaryColor=B42B30">
</script>

Replace YOUR_PLUGIN_ID and the color value. Optional extras: brandfilter=true for multi-brand portfolios, rows= to cap the gallery height, textColor=/backgroundColor=/secondaryColor= to match your theme (see the full table below).

Keep the id="crafted-pour-recipe-plugin-script" exactly as shown, and never put two script tags with that same id on one page — duplicates mean only the first is processed. Multiple widgets on a single page require the v2-only class form — see the universal guide.

Save and add to navigation

Click Save, then add the page to your store's menu (Online Store → Navigation) so shoppers — and Google — can find it.

Theme-editor alternative: if your theme includes a Custom Liquid section (all current free Shopify themes do), you can instead add one to the page template: Online Store → Themes → Edit theme (labeled Customize in older admins) → Add section → Custom Liquid, then paste the same embed. This works better on themes whose page editor strips scripts.

Part 2 — Recipes on every product page

This version dynamically connects each product page to matching cocktail recipes using Shopify's built-in product fields — no metafields and no per-product setup. Shopify stores UPCs in product.variants.first.barcode (preferred) and SKUs in product.variants.first.sku.

Open your product template

Go to Online Store → Themes → Edit theme (labeled Customize in older admins), then switch the template selector at the top to Products → Default product.

Add a Custom Liquid block

In the product information section (or below it), click Add block → Custom Liquid and position it where you want recipes to appear — mid-page placement converts best. (Custom Liquid accepts raw HTML including <script> tags, up to 50 KB per section.)

Paste the product-page embed

UPC version (preferred)

<!-- Crafted Pour recipe widget — pulls this product's UPC automatically -->
<script id="crafted-pour-recipe-plugin-script"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js?plugin_id=YOUR_PLUGIN_ID&rows=1&ratings=true&sku={{ product.variants.first.barcode }}&primaryColor=B42B30">
</script>

SKU version

<!-- Crafted Pour recipe widget — SKU variant -->
<script id="crafted-pour-recipe-plugin-script"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js?plugin_id=YOUR_PLUGIN_ID&rows=1&ratings=true&sku={{ product.variants.first.sku }}&primaryColor=B42B30">
</script>

As long as the UPC or SKU is registered with Crafted Pour, the widget automatically shows that bottle's tasting notes, community star ratings (ratings=true), and matching cocktail recipes. rows=1 keeps it to one swipeable row — recommended on product pages.

Save and spot-check a few products

Click Save, then open two or three product pages. Each should show its own recipes and ratings. A product that shows nothing usually has an unregistered or mismatched UPC/SKU — see troubleshooting below.

Part 3 — SEO script in theme.liquid

The gallery embed in Part 1 already includes the SEO script inline. If your theme strips it, or you prefer it in the <head>, add it to theme.liquid conditionally:

Edit theme code

Online Store → Themes, click the ⋯ menu icon on your theme, then Edit code, and open layout/theme.liquid.

Insert before </head>

theme.liquid — before </head>

{%- if template == 'page.recipes' -%}
<script type="text/javascript"
  src="https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin-seo.js"></script>
{%- endif -%}

Make sure the template name (page.recipes) matches the template your recipe gallery page uses — check the page's Theme template setting in the page editor.

Customize the widget: full parameter reference

Everything after the ? in the script URL configures your widget. Chain parameters with &. All are optional except plugin_id.

Parameter	Example	What it does
`plugin_id`	`plugin_id=qYyFJ6…`	Required. Your widget ID from Crafted Pour — loads your products, recipes, and partner settings.
`rows`	`rows=2`	Show a fixed number of rows with paging arrows. Omit for an infinite-scroll gallery. Use `rows=1` on product pages.
`featured`	`featured=true`	Adds the curated FEATURED rail at the top — hand-picked seasonal recipes photographed with your bottle. Toggle its content via the CMS (`show_featured`).
`ratings`	`ratings=true`	Shows the product-ratings widget (community tasting notes and star ratings) above the recipes. Designed for single-product pages.
`recipes`	`recipes=false`	Set to `false` to hide the recipe grid — combine with `ratings=true` for a ratings-only embed.
`catfilter`	`catfilter=true`	Adds a category (spirit-type) filter dropdown.
`productfilter`	`productfilter=true`	Lets visitors filter recipes by your products. Rendered as a dropdown or as visual product pills depending on your partner-level filter style setting.
`brandfilter`	`brandfilter=true`	Brand selector — for portfolios, groups, and retailers managing multiple brands in one widget.
`product`	`product=KN3ARO…`	Restrict the widget to one product by its Crafted Pour product ID. Only needed when you cannot use `sku`.
`sku`	`sku=012345678905`	Match a product by UPC (preferred) or SKU — ideal on ecommerce product templates where the platform injects the value dynamically. Repeatable for multi-SKU pages.
`primaryColor`	`primaryColor=B42B30`	Main accent color (buttons, highlights). Hex without `#`.
`color`	`color=B42B30`	Supported alias for `primaryColor` — many existing installs use it and it keeps working. If both are present, `primaryColor` wins. Prefer `primaryColor` for new installs.
`secondaryColor`	`secondaryColor=FFFFFF`	Background for tags and ingredient boxes.
`backgroundColor`	`backgroundColor=FFFFFF`	Widget background. Defaults to transparent so it inherits your page background.
`textColor`	`textColor=000000`	Main text color.
`textPosition`	`textPosition=bottom`	Moves recipe name and creator below each photo instead of overlaid on it — a cleaner look on minimal sites.
`recipeItemBorder`	`recipeItemBorder=0`	Set to `0` for square recipe-card corners (matches squared-off site designs). Omit for the default rounded cards.

Partner-level behavior — editor's notes, smart product placement (competitor masking), generic-recipe inclusion, and filter style — is configured per brand rather than per embed. See the Partner Settings guide and manage them at craftedpour.com/cms.

Recipe detail pages & SEO setup

Every recipe card links to a full recipe page on your domain (your gallery URL with ?cp_rid=<recipe> appended). The SEO script in the embed above is what makes those pages count for search:

Server-rendered recipe content. Title, ingredients, instructions, and your brand's AI-sommelier editor's note are served before any JavaScript runs, so Google indexes real content on your URL — not an empty shell.
Structured data. Machine-readable Recipe markup including star ratings, making your pages eligible for Google's rich results and readable by AI assistants like ChatGPT and Gemini.
Canonical and social tags. Correct canonical, Open Graph, and Twitter URLs are set per recipe automatically.

That is why the two-script embed matters: keep the SEO script before the widget script, on the same page.

Shopify note: Shopify does not support server-side pre-rendering tools like Prerender.io, so the SEO script + sitemap route below is the supported path. For the sitemap redirect, use a redirect app (e.g. “Easy Redirects”) or Online Store → Navigation → URL Redirects pointing /recipe-sitemap.xml at your Crafted Pour sitemap URL. Optionally, create a hidden page listing a few real recipe URLs (…/pages/cocktail-recipes?cp_rid=…) to help crawlers discover the URL pattern faster.

Submit your recipe sitemap to Google

We auto-generate a sitemap of every recipe URL on your domain at: https://plugin.craftedpour.com/sitemaps/YOURDOMAIN.com_recipes.xml
Create a redirect on your domain — e.g. yourdomain.com/recipe-sitemap.xml → the URL above.
In Google Search Console, verify your domain and submit the redirect URL under Sitemaps.

How to know it worked

The gallery renders. Open the published page — you should see a grid of recipe cards with photos and a “Powered by Crafted Pour” badge. If you enabled featured=true, a FEATURED rail leads the page.
Cards open recipe pages on your domain. Click any recipe — the URL should stay on your site and gain ?cp_rid=…, showing the full recipe with your product linked in the ingredients.
Your products are shoppable. On a recipe that uses your product, the ingredient should link out with your “shop” call-to-action (competitor names masked if smart product placement is on).
SEO content is being served. On a recipe page (with cp_rid in the URL), use View Source and search for recipe-seo-content or the recipe name — it should appear in the raw HTML.
No console errors. Open your browser's developer tools (F12) → Console. A healthy install logs Recipe widget loaded with no red errors.
On a product page, the ratings module and a one-row recipe rail render for that specific bottle (check that the sku= value in View Source resolved to a real UPC/SKU, not an empty string).

Troubleshooting

The page editor removed my script when I saved. Some themes sanitize page content. Use the Custom Liquid section approach in the theme editor instead — it never strips scripts.
A product page shows no recipes. The variant’s Barcode/SKU field is empty or doesn’t match what’s registered with Crafted Pour. Check the field in the product admin, and confirm the product is in your registered list (or add it via the CMS on paid plans).
Recipes work on the live domain but not the preview theme. Preview domains must be whitelisted — send us the full shopifypreview.com URL.
The script shows as plain text on the page. It was pasted into a rich-text/paragraph field instead of an HTML/code element. Re-paste it into your platform's HTML embed field.
Nothing renders at all. Check that the script URL is exactly https://plugin.craftedpour.com/v2/scripts/crafted-pour-recipe-plugin.js and that your page editor did not strip the <script> tag (some platforms restrict scripts on lower-tier plans).
An empty grid loads. Usually a wrong or missing plugin_id, or your domain is not yet registered with us. Email support@craftedpour.com with your page URL.
Testing on a staging or preview domain. Send us the full preview URL first so we can whitelist it — unregistered domains will not load recipes.
Old content keeps showing after changes. Clear your site/CDN cache and hard-refresh (Cmd/Ctrl + Shift + R).
Colors look wrong. Color values must be 6-digit hex without the # — primaryColor=B42B30, not primaryColor=#B42B30. A # starts the URL fragment, so everything from it onward is silently dropped and your color never reaches the widget. The same applies to the legacy color= parameter.
Your site uses a Content-Security-Policy. Allow plugin.craftedpour.com in script-src, connect-src, and img-src.

Want the deep-dive on what the widget does for your brand — smart product placement, brand-aware photos, AI editor's notes, star ratings in Google? See the full feature tour.

Install it free — or let us do it for you

Everything on this page is free to self-install with your existing widget. Prefer white-glove? We offer paid installation — custom styling, placement, and theme work included — so it is live on your site without you touching a line of code.

Request Paid Installation Ask a Question

← All installation guides Widget features →