Crafted Pour Cocktail Gallery Plugin

Shopify Crafted Pour Gallery Instructions

Rev June 9, 2023

Please start by reviewing the Initial Steps page. Once complete, return here to complete the setup on your Shopify site.

Integration to Shopify:

If you’re testing the widget on a preview or staging domain (e.g., shopifypreview.com), send us the full preview URL so we can whitelist it for development.

There are two procedures to integrate Crafted Pour Cocktail Gallery plugin into a Shopify site:

1.. If you want to add a general cocktail gallery page to your site, follow the “Cocktail Gallery Page” instructions below.

2. If you want to add recipes to the middle of your product pages, follow the “Product Page Recipes” instructions further down on this page.

Cocktail Gallery Page

Instructions to create a dedicated Cocktail Gallery Page:

1. In Shopify, go to Online Store > Pages

Image 1

2. Click on the Add Page button on the top right, and name the page (e.g., “Cocktail Recipes”):

You should see the following screen:

Image 2

Image 3

3. Now switch the Content editor to HTML by clicking the “<>” button:

4. To generate a gallery for an entire brand, paste the following script into the Content box:

<script id="crafted-pour-recipe-plugin-script" type="text/javascript"

src="https://plugin.craftedpour.com/scripts/crafted-pour-recipe-plugin.js?catfilter=true&productfilter=true&color=XXXXXX"> </script>

Replace color=XXXXXX with your preferred hex color (e.g., D56C4E).

Optional Parameters:

brandfilter=true – for multi-brand use
rows= – to limit display to a fixed number of rows
textColor=, backgroundColor=, secondaryColor= – to match your site styling
brand= – if you want to filter for a single brand

Click Save when finished.

5. To generate a gallery for a specific product instead, follow these steps. This version dynamically connects each product page to relevant cocktail recipes using just Shopify’s built-in product fields.

A) Use the SKU or Barcode Field in Shopify

Shopify stores:

SKUs in product.variants.first.sku
UPCs in product.variants.first.barcode (preferred field for UPC)

B) Paste This Code into Your Product Template or a Custom Liquid Block

UPC Version (preferred):

<script id="crafted-pour-recipe-plugin-script" type="text/javascript"

src="https://plugin.craftedpour.com/scripts/crafted-pour-recipe-plugin.js?rows=1&ratings=true&sku={{ product.variants.first.barcode }}&color=XXXXXX"> </script>

SKU Version (if using SKUs instead of UPCs):

<script id="crafted-pour-recipe-plugin-script" type="text/javascript"

src="https://plugin.craftedpour.com/scripts/crafted-pour-recipe-plugin.js?rows=1&ratings=true&sku={{ product.variants.first.sku }}&color=XXXXXX"> </script>

Replace color=XXXXXX with your brand color hex value.

As long as the SKU or UPC is registered in our system (or added via the CMS for paid plans), the plugin will automatically display tasting notes and matching cocktail recipes.

No metafields or manual product IDs needed.

Click Save, and the page is ready.

You should see cocktails loaded into the page you created.

Full Plugin Parameters Reference

Parameter Description

rows=1 One horizontal row (recommended for product pages)

(omit rows=) Infinite scroll (for full galleries)

catfilter=true Filters recipes by tags like “spicy” or “citrusy”

productfilter=true Adds a product filtering option

brandfilter=true Shows brand selection (if managing multiple brands)

ratings=true Displays contributor reviews and tasting notes

product= Direct product ID (only needed if not using SKU/UPC)

sku= Match by UPC or SKU — Shopify pulls this automatically

brand= Filter by brand

color= Main accent color (buttons, highlights, etc.)

textColor= Main text color

backgroundColor= Page background; 8-digit hex supported for transparency

secondaryColor= Background for tags and ingredient boxes

🧪 Preview the Widget

Use this to test any product or parameter setup:

https://plugin.craftedpour.com/test.html?sku=YOUR_UPC_OR_SKU&color=XXXXXX&ratings=true&recipes=true

Try different colors
Toggle parameters like ratings= or rows=
Remove sku= to load general recipes

📈 SEO Setup (For Paid Plugin Users Only)

If you’re on a paid plan, you can enable structured data and get your recipe content indexed by Google.

A) Add the SEO Script in theme.liquid

Go to Online Store > Themes > Edit Code
Open theme.liquid
Before the </head> tag, insert:

{%- if template == 'page.recipes' -%}

{%- endif -%}

Ensure the template name matches the one used for your recipe gallery.

B) Submit the Plugin Sitemap to Google

Your auto-generated sitemap will be:

https://plugin.craftedpour.com/sitemaps/YOURDOMAIN.com_recipes.xml

Set up a redirect on your domain (e.g., using a redirect app):

https://yourdomain.com/recipe-sitemap.xml → redirects to the URL above

Go to Google Search Console
- Verify your domain
- Submit the redirect URL

C) Add a Static Recipe Index Page (Optional)

Create a hidden page at:
```
https://yourdomain.com/all-recipes
```
Paste real recipe URLs like:
```
<ul>
```
<li><a href="https://yourdomain.com/recipes?cp_rid=XYZ123">Spicy Margarita</a></li> <li><a href="https://yourdomain.com/recipes?cp_rid=ABC456">Tequila Sunset</a></li> </ul>
This helps search engines discover the full recipe URL pattern.

⚠️ Pre-Rendering Note

Shopify does not support server-side pre-rendering, so tools like Prerender.io won’t work. Use the static index page + sitemap method to maximize SEO visibility.

🧰 Benefits of a Paid Plan

With a paid plan, you unlock:

✅ Full SEO support and sitemap indexing

✅ CMS access to manage your products, SKUs, and UPCs directly

✅ Suppress recipes you don’t want shown

✅ Prioritize featured recipes at the top of your widget

✅ Custom styling and filtering configuration

✅ Eligibility for our Tastemaker Program, where top bartenders create original cocktails with your brand

Learn more or upgrade here: https://corp.craftedpour.com/brands

Need Help?

Email info@craftedpour.com with your store URL, questions, or to request CMS access.