cannaiq/wordpress-plugin/docs/ELEMENTOR-GUIDE.md

CannaiQ Menus - Elementor Guide

Build custom cannabis product menus using Elementor and CannaiQ dynamic tags.

---

Quick Start

1. Install & Configure

1. Install the CannaiQ Menus plugin
2. Go to Settings → CannaiQ Menus
3. Enter your API Key (provided by CannaiQ)
4. Enter your Store ID (your dispensary ID)
5. Save settings

2. Create Your First Menu

1. Create a new page in WordPress
2. Click Edit with Elementor
3. Search for "CannaiQ Product Loop" widget
4. Drag it onto your page
5. Products will appear automatically

---

Building Custom Product Cards

The power of CannaiQ is building your own card designs. Here's how:

Step 1: Add Product Loop

The Product Loop is your container. It fetches products and repeats your design for each one.

1. Drag CannaiQ Product Loop onto page
2. Configure settings:
   • Store ID: Your dispensary ID
   • Category: Filter by Flower, Vape, Edibles, etc.
   • Limit: How many products to show
   • On Special Only: Show only sale items

Step 2: Design Your Card

Inside the Product Loop, add standard Elementor elements:

Product Loop
└── Container (your card wrapper)
    ├── Image
    ├── Heading (product name)
    ├── Text (brand)
    ├── Text (THC/effects)
    ├── Text (price)
    └── Button (add to cart)

Step 3: Connect Dynamic Tags

This is the key step. Each element needs to pull data from the product.

1. Click on any element (e.g., Heading)
2. Find the field you want to populate (e.g., "Title")
3. Click the Dynamic Tags icon (stacked coins icon)
4. Select CannaiQ Product → Product Name

Repeat for each element in your card.

---

Dynamic Tags Reference

Click the Dynamic Tags icon and select from CannaiQ Product group:

Basic Info

Tag	Output Example
Product Name	"Blue Dream"
Product ID	"12345"
Store ID	"1"
Brand Name	"TruInfusion"
Category	"Flower"
Subcategory	"Eighths"
Description	"A sativa-dominant hybrid..."

Pricing

Tag	Output Example
Price	"$45.00"
Sale Price	"$35.00"
Original Price	"$45.00"
Price Display	"$45.00 → $35.00" (with strikethrough)
Discount %	"22% OFF"
Discount Badge	Red badge with "22% OFF"

Potency

Tag	Output Example
THC %	"24.5%"
THC Badge	Dark pill with "24.5% THC"
CBD %	"0.5%"
CBD Badge	Dark pill with "0.5% CBD"
Strain Type	"Sativa"
Strain Badge	Green pill with "SATIVA"

Effects & Details

Tag	Output Example
Effects Chips	Colored pills: 😊 HAPPY 😌 RELAXED
Single Effect	One effect pill
Terpenes	"Myrcene 1.2%, Limonene 0.8%"
Weight	"1/8 oz"
Weight Options	Pill selector or dropdown

Stock

Tag	Output Example
Stock Status	Green badge "In Stock"
Stock Quantity	"24"
In Stock	"In Stock" or "Out of Stock"

Links & Images

Tag	Use For
Product Image	Image widget source
Menu URL	Button link (opens dispensary menu)
Brand Logo	Brand image

---

Example: Premium Product Card

Here's how to build a professional product card:

Structure

Container (card wrapper)
├── Container (image area)
│   ├── Text: Discount Badge [Dynamic: Discount Badge]
│   ├── Image [Dynamic: Product Image]
│   └── Container (badge row)
│       ├── Text [Dynamic: Strain Badge]
│       └── Text [Dynamic: THC Badge]
│
└── Container (content area)
    ├── Heading [Dynamic: Product Name]
    ├── Text: "by [Dynamic: Brand Name]"
    ├── Text [Dynamic: Effects Chips]
    ├── Container (price row)
    │   ├── Text [Dynamic: Weight]
    │   └── Text [Dynamic: Price Display]
    └── Button: "ADD TO CART" [Link: Dynamic Menu URL]

Card Wrapper Settings

• Width: 280px
• Background: White
• Border Radius: 12px
• Box Shadow: 0 4px 20px rgba(0,0,0,0.08)
• Padding: 0 (image bleeds to edge)
• Overflow: Hidden

Image Area Settings

• Min Height: 200px
• Background: #f9fafb
• Position: Relative (for badge overlays)

Content Area Settings

• Padding: 16px
• Gap: 8px

Button Settings

• Full Width: Yes
• Background: #1f2937 (dark)
• Text: White
• Border Radius: 6px
• Open in New Tab: Yes

---

Example: Promo Banner

For promotional banners and deals:

Structure

Container (banner)
├── Container (text side)
│   ├── Heading: "BOGO"
│   ├── Heading: "1G CONCENTRATES"
│   └── Button: "Shop Now"
│
└── Container (image side)
    └── Image (product photo)

Banner Settings

• Direction: Horizontal (Row)
• Background: Dark (#1a1a2e) or gradient
• Min Height: 140px
• Padding: 24px 32px
• Border Radius: 16px
• Justify: Space Between
• Align: Center

---

Example: Horizontal Product Row

For list-style layouts:

Structure

Container (row)
├── Image (thumbnail, 80x80px)
│
├── Container (details)
│   ├── Heading [Dynamic: Product Name]
│   ├── Text [Dynamic: Brand Name]
│   └── Text: "THC: [Dynamic: THC %]"
│
└── Container (price/action)
    ├── Text [Dynamic: Price Display]
    └── Button: "+" (add to cart)

Row Settings

• Direction: Horizontal (Row)
• Background: White
• Border Bottom: 1px solid #e5e7eb
• Padding: 16px 20px
• Gap: 16px
• Align: Center

---

Using Pre-built Templates

We include ready-to-use templates you can import:

How to Import

1. Go to Elementor → Templates → Import Templates
2. Navigate to: wp-content/plugins/cannaiq-menus/templates/elementor/
3. Select a template:
   • premium-card.json - Vertical product card
   • promo-banner.json - Horizontal deal banner
   • horizontal-row.json - Product list row
4. Click Import
5. Insert template into your page
6. Customize colors, fonts, spacing

---

Alternative: Pre-built Widgets

If you don't want to build custom designs, use our ready-made widgets:

Widget	Description
CannaiQ Product Grid	Grid of product cards
CannaiQ Specials Grid	Products on sale
CannaiQ Brand Grid	Browse by brand
CannaiQ Category List	Category navigation

Just drag, configure Store ID, and publish.

---

Alternative: Shortcodes

For non-Elementor pages or posts:

[cannaiq_products store_id="1" limit="12" category="Flower"]

[cannaiq_specials store_id="1" limit="6"]

[cannaiq_brands store_id="1"]

[cannaiq_categories store_id="1"]

Shortcode Parameters

Parameter	Description	Example
store_id	Your dispensary ID	store_id="1"
limit	Max products	limit="12"
category	Filter category	category="Flower"
brand	Filter brand	brand="Cookies"
on_special	Sale items only	on_special="true"

---

Troubleshooting

Dynamic tags not showing data?

• Make sure Product Loop is the parent container
• Check that Store ID is configured in plugin settings
• Verify API key is valid

Products not loading?

• Check Settings → CannaiQ Menus for API connection status
• Verify your Store ID is correct
• Check browser console for errors

Styles look wrong?

• Clear Elementor cache: Elementor → Tools → Regenerate CSS
• Clear any caching plugins
• Check for CSS conflicts with your theme

---

Need Help?

• Documentation: https://cannaiq.co/docs
• Support: support@cannaiq.co