OpenAI ChatGPT
Versatile all-rounder for writing, coding and brainstorming. Plus tier (~£20 / $20 pm) lifts usage caps and unlocks premium models.
1. Introduction and Webinar Overview 0:04
Welcome attendees and confirm audio/visual setup.
Introduce the topic: leveraging mainstream AI tools for Infigo storefront builds.
Clarify that the focus is on general AI tools like ChatGPT and Google Gemini, not specific Infigo features.
2. Purpose of the Webinar 1:10
Goal: Provide starting points and ideas for incorporating AI tools into workflows.
Share personal experiences of using AI in creating the academy and storefront builds.
3. Target Audience 2:25
The webinar is designed for all levels of expertise with AI.
Focus on practical applications within Infigo.
4. Duration and Format 2:50
The webinar will last no longer than one hour.
Recording will be available post-webinar.
5. Interaction and Questions 3:06
Encourage attendees to ask questions via the questions panel.
Assure that questions will be addressed during or after the webinar.
6. Overview of Mainstream AI Tools 4:16
Discuss capabilities of AI tools: image generation, research, copywriting, coding, etc.
Emphasize the importance of effective prompting to get desired results.
7. Understanding AI Limitations 5:18
AI tools are assistants, not replacements for human expertise.
Importance of verifying AI outputs due to potential inaccuracies (hallucinations).
8. Privacy Considerations 7:32
Caution against sharing confidential information with AI tools.
Review terms and conditions of AI tools regarding data usage.
9. Types of AI Tools 9:09
Overview of popular AI tools: ChatGPT, Google Gemini, Microsoft Copilot.
Discuss different models available within these tools for various tasks.
10. Effective Prompting Techniques 11:46
Importance of detailed prompts for better AI responses.
Example of a basic vs. detailed prompt for product descriptions.
11. Using AI for Product Build Kickstart 18:07
AI can assist in generating site maps, market research, and policy recommendations.
12. Image Generation with AI 23:05
Discuss how to prompt AI for image generation, including specifications for style and size.
13. Copywriting with AI 29:32
Use AI for drafting product descriptions and other text content.
Importance of human editing to refine AI-generated text.
14. AI-Powered Code Generation 40:09
AI can assist in writing code snippets for small changes in storefronts.
Tips for prompting AI to generate clear and commented code.
15. Data Formatting and Reporting 55:00
AI can help format large datasets and create reports.
Example of using AI to generate CSV files for pricing scripts.
16. Conclusion and Next Steps 01:11:16
Recap of the webinar's key points.
Encourage attendees to explore AI tools creatively.
Invite feedback on future webinar topics.
A fast-paced, practical 1-hour session showing how affordable AI tools supercharge your Infigo projects.
This concise webinar demonstrates how low-cost, mainstream AI services—such as OpenAI ChatGPT, Google Gemini, and Microsoft Copilot—can boost every stage of an Infigo web-to-print storefront build, from the initial brief right through to go-live. Expect live examples of AI-generated copy, images, data analysis and even code snippets that you can replicate.
Whether you’re a print business owner, creative product designer or seasoned developer, you’ll leave with fresh, actionable ideas to streamline your next storefront launch while keeping the all-important human touch.
This session is based on real-world experience using mainstream AI alongside Infigo. It’s a practical reference—not legal advice. Always review the privacy terms, usage rights and costs of any AI provider to ensure they fit your specific requirements.
Before hitting “Generate”, ask the AI to critique and upgrade your own prompt against best-practice guidelines. It will flag missing details (audience, length, format) and request anything it still needs.
Create a product description for a label product which has a few different sizes and finishes available. Don't make it too long and wordy. It should get the point across in a short space but also needs to be descriptive and clear enough make the user want to purchase.
Here's a draft prompt:
---
[PASTE PROMPT ABOVE]
---
Please improve it so it follows top prompt-engineering guidelines:
• add missing details (audience, sizes, finishes, tone, length, format)
• keep it concise & action-oriented
If you need extra info before rewriting, ask follow-up questions instead of guessing.
You are a copywriter for an online print store.
Draft a 70–90 word product description (one paragraph) in British English.
Audience: small-business owners ordering packaging labels.
Product details:
• Sizes: 50×50 mm, 75×75 mm, 100×150 mm
• Finishes: gloss & matt
Highlight vibrant colour print, durable adhesive and easy peel-and-stick backing.
Tone: concise, energetic, persuasive.
End with a short call-to-action inviting purchase.
Pick your platform first, then the brain that powers it.
Versatile all-rounder for writing, coding and brainstorming. Plus tier (~£20 / $20 pm) lifts usage caps and unlocks premium models.
Powered by Google Search, ideal for live research and fresh web info, but also has great all-round capabilities.
Built into Word, Excel, Outlook and Teams, delivering a secure, integrated experience with your tenant’s data.
In ChatGPT, models are the networks that process your prompt and generate a response. Each balances reasoning skill, speed, context-window and cost differently, so choosing a model suited to your request is crucial to getting the most out of the tools.
Most advanced reasoning model—excels at complex, multi-step analysis across coding, science, maths and visuals.
Largest chat model to date with broader knowledge, improved intent-following and fewer 'hallucinations'. My model of choice for copywriting
Multimodal flagship that reasons across text, images and audio in real time. The standard ChatGPT model. Quick to respond but the detail and accuracy can often be lacking for more intense tasks.
How a provider handles your prompts and outputs is critical. Free tiers often let the company train on your inputs, while paid or enterprise plans may let you switch this off. Always confirm exactly how your data is stored, retained and used.
• Never share confidential or personally identifiable information (customer data, passwords, unreleased assets) with public models.
• Assume anything you type could be logged and reviewed unless explicitly stated otherwise.
• For sensitive workloads, use paid tiers, enterprise offerings or private API deployments that give you explicit opt-outs and tighter security.
Generate sitemaps, playbooks, check-lists and more to get you out of the starting blocks.
Use this with a model that supports live browsing.
You are an e-commerce UX architect specialising in Infigo storefronts.
Using live research on https://academy.infigo.net to give contextual knowledge where necessary. Draft a COMPLETE sitemap and product taxonomy that I can use to kickstart my storefront build project. This is for a General Commercial Print (GCP) storefront hosted on Infigo. Requirements:
• Include common core pages
• Provide two main user flows:
1. “Design Online” (using MegaEdit) – category > product > designer.
2. “Upload Your Artwork” – category > product > file upload.
• Create structured categories & sub-categories for GCP products.
• Within each product category include both “Design Online” and “Upload” paths.
• Use a maximum depth of 3 levels and output in an indented tree format.
Home
About Us
Products
├─ Design Online
│ ├─ Business Cards (Design Online)
│ ├─ Flyers (Design Online)
│ ├─ Brochures (Design Online)
│ ├─ Posters (Design Online)
│ ├─ Banners (Design Online)
│ └─ Stationery (Design Online)
├─ Upload Your Artwork
│ ├─ Business Cards (Upload)
│ ├─ Flyers (Upload)
│ ├─ Brochures (Upload)
│ ├─ Posters (Upload)
│ ├─ Banners (Upload)
│ └─ Stationery (Upload)
├─ Business Cards
│ ├─ Design Online
│ └─ Upload Artwork
├─ Flyers
│ ├─ Design Online
│ └─ Upload Artwork
├─ Brochures
│ ├─ Design Online
│ └─ Upload Artwork
├─ Posters
│ ├─ Design Online
│ └─ Upload Artwork
├─ Banners
│ ├─ Design Online
│ └─ Upload Artwork
└─ Stationery
├─ Letterheads (Design Online / Upload)
└─ Compliment Slips (Design Online / Upload)
Services
├─ Artwork Guidelines
├─ Template Downloads
└─ Pricing Calculator
Resources
├─ Blog
├─ Case Studies
└─ FAQs
My Account
├─ Register
└─ Order History
Basket
Checkout
Contact Us
Delivery & Returns
Terms & Conditions
Privacy Policy
Save time by dictating your requirements. Just ramble your thoughts into any speech-to-text tool— AI doesn’t mind repetition, tangents or half-baked ideas. Once your stream-of-consciousness is captured, let the model reshape it into a crisp, structured prompt.
Um okay, so I need an online print storefront, mostly general commercial print—business cards, flyers, maybe brochures and posters, oh and banners for events. It has to let customers design online but also just upload their own artwork because some people already have files. Payments—PayPal for sure and maybe Stripe, shipping UK and EU, standard and express delivery options... oh and I want a blog and an FAQs page, plus the usual legal pages, terms and privacy, the whole lot. Right, also need a resources area with artwork guides, yeah, that’s it I think... oh wait, an account area where they can reorder quickly. Cool.
Here's my raw dictated requirements (unstructured):
---
[PASTE RAMBLE ABOVE]
---
Please organise the details and turn them into a clear, professional prompt for planning an Infigo GCP storefront.
Follow best-practice prompt guidelines and ask follow-up questions if anything is missing.
You are an e-commerce UX architect specialising in Infigo storefronts.
Using live research on https://academy.infigo.net, create a full sitemap and product taxonomy for a General Commercial Print store offering design-online and upload workflows.
Requirements:
• Core pages: Home, About Us, Contact Us, Blog, FAQs, Resources, Basket, Checkout, My Account, Terms & Conditions, Privacy, Delivery & Returns.
• Product categories: Business Cards, Flyers, Brochures, Posters, Banners.
• Each category must include both “Design Online” (MegaEdit) and “Upload Artwork” paths.
• Payments: PayPal & Stripe. Shipping: UK & EU, standard & express.
• Limit depth to 3 levels; output as an indented tree.
Ask clarifying questions if needed.
Generate brand-consistent visuals in seconds
AI image generation has come a long way—models like DALL-E can create photorealistic shots that match your brand guidelines without ever firing up a camera.
To really make the magic happen, enrich your prompt with additional context such as:
Combine your assets and an initial prompt to output the first draft.
Create a photorealistic, square (1000×1000 px) hero shot of a matte stand-up zipper pouch on a wooden table with a softly blurred wooden wall behind it. Match the shape and proportions of the reference pouches I supplied. Light it with soft, natural, side-biased lighting and a shallow depth of field so the pouch is tack-sharp and the background subtly falls off. Wrap the pouch in an abstract, organic pattern using only Infigo brand colours: Primary Navy #002E47 as the dominant base, with accents in Primary Coral #FF6867 and Pale Blue #98C1D9—no other colours and no unprinted white on the pack. Place the exact Infigo logo file (icon + "infigo" wordmark) unaltered inside a rounded-corner panel with a thin white keyline, centred in the upper middle of the pouch. Render the logo reversed in white for strong contrast against the navy base, honouring the supplied spacing and proportions. Keep everything clean and premium, suitable for an e-commerce product page.
Use masking and modification prompts to tweak colour blocks, lighting or logo placement.
Using the exact same camera angle, background, lighting, pouch shape and 1000×1000 px canvas, remove the badge and the "infigo" wordmark entirely and replace them with the icon only. Replicate the icon precisely from the file I supplied: render the white shapes exactly as provided—including the small bottom cut-out—at about 30% of the pouch width, perfectly centred and level. Everything outside those white shapes must be transparent so the pack artwork shows through (no extra outlines or boxes). Swap the scattered blob pattern for three bold, flowing diagonal wave bands that wrap the pouch front from top-left to bottom-right, using only Primary Coral #FF6867, Primary Navy #002E47 and Pale Blue #98C1D9. Run the navy band through the centre behind the icon to maximise contrast. Keep the pouch matte, the print crisp, and ensure there's still no unprinted white anywhere on the packaging apart from the icon itself. High-end, photorealistic finish suitable for online advertising.
Iterate until shadows, reflections and brand colours look spot-on, then export a 1000 × 1000 pixel JPEG ready for your storefront.
Remember to check licensing and usage rights before publishing AI-generated imagery commercially.
Draft smarter, polish faster and keep your brand voice consistent.
Whether you’re launching a new storefront or refreshing an existing one, AI language models can handle the heavy lifting of content creation and quality-assurance—leaving you free to focus on the finishing touches only a human can add.
Feed the AI bullet points about your product and desired voice, and get a structured description—keywords baked in. The result? Hours saved and a strong SEO foundation.
Act as an expert e-commerce copywriter for print products.
Using the bullet points below, write a 120-word product description in a friendly yet professional tone.
• Recycled 350 gsm card
• Full-colour CMYK printing
• Custom sizes & finishes
• 48-hour turnaround
Include a punchy headline and natural SEO keywords for “eco friendly business cards”.
Before a customer email or site message goes live, let AI act as your on-demand proofreader—spotting typos, checking tone and ensuring consistency across brand terms.
You are a meticulous proofreader.
Review the customer-facing email below for spelling, grammar and clarity.
Suggest improvements to make the tone polite and professional.
[PASTE EMAIL TEXT HERE]
Convert the following plain-text order confirmation email into lightweight HTML with proper headings, links and inline styles that render well in major email clients.
Keep the copy unchanged.
[PASTE EMAIL TEXT HERE]
Generate a library of emails or messages with tokens (e.g., <CustomerName>, <OrderID>) already inserted in the right spots—perfect for Infigo’s dynamic content engine.
Below is a list of available tokens for my storefront emails:
<CustomerFirstName>, <OrderID>, <ShippingDate>, <OrderTotal>
Write a shipping delay notification email in a formal tone.
• Start with a greeting using the customer’s first name token.
• Mention the order ID token in the body.
• Set expectations for the new shipping date.
• Close with an apology and a support-contact line.
Return a complete template with the tokens inserted exactly as written.
Use AI as a creative kick-starter—then refine and add your personal insights.
Give me five SEO-friendly blog post ideas that appeal to decision-makers in web-to-print.
For each idea, provide:
1️⃣ A compelling title
2️⃣ A one-sentence summary
3️⃣ A short outline (intro, key sections, conclusion)
Explain briefly why each topic matters to print shops.
Return your answer as a Markdown table I can copy into Notion.
AI can often do 80 % of the work—just add your human touch to make sure the final copy feels authentic, accurate and on-brand.
Let the model create a first draft, then hand it your source data again and ask for a strict accuracy-check. A “second set of eyes” prompt like this keeps marketing copy laser-aligned with the facts.
<!-- 60–80 word dark-chocolate description -->
Here’s the product spec:
• 250 g dark chocolate bar
• Single-origin Colombian cacao
• Vegan & gluten-free
Write a concise, engaging product description in British English that highlights the points above and ends with a call-to-action.
Below is your first draft plus the original spec.
---
[FIRST DRAFT PASTE HERE]
SPEC
• 250 g dark chocolate bar
• Single-origin Colombian cacao
• Vegan & gluten-free
---
Task:
1. Highlight any detail that is inaccurate, missing or embellished.
2. Produce a comparison table (Spec detail ↔️ Present & Accurate? ↔️ Suggested fix).
3. Supply a corrected 60-80 word description that is 100% faithful to the spec.
Do not invent new information or assumptions.
| Spec Detail | Accurate? | Notes / Fixes |
|-------------------------------------|-----------|----------------------------------------|
| 250 g weight | ✅ | – |
| Single-origin Colombian cacao | ❌ | Draft said “Ecuadorian” – correct it |
| Vegan | ✅ | – |
| Gluten-free | ✅ | – |
💡 **Corrected description (78 words)**
Discover pure indulgence in every bite of our 250 g dark-chocolate bar, crafted exclusively from single-origin Colombian cacao. Naturally vegan and completely gluten-free, this rich, velvety bar balances deep cocoa intensity with a subtle fruity finish unique to the Colombian terroir. Elevate break-times, baking sessions or late-night cravings with ethical chocolate that loves you back. Ready to taste the difference? Add to basket now.
Prototype faster, refactor smarter and keep every snippet on-brand.
What is it? HyperText Markup Language structures every web page—headings, images, forms, layouts.
How AI helps …
Implement in Infigo: Paste into Content → Templates → Custom HTML or use the WYSIWYG “</>” source view.
Limitations: AI won’t redesign an entire theme or handle back-end logic—keep requests focused on isolated components.
Create a clean, accessible HTML-only snippet for a hero banner that promotes a seasonal offer in a web-to-print storefront.
• Use semantic HTML5 elements (header / main / footer etc.).
• Include an image (/326988105/Handler/CSSOverride/GetImage/22/Infigo Academy 250px.png) with descriptive alt text, a clear heading, a sub-heading with a <time> element, and a call-to-action link.
• Add helpful HTML comments explaining each part so a non-programmer can understand what’s happening.
• Leave all styling to the site’s existing CSS.
<!DOCTYPE html>
<!-- Hero banner for an Infigo web-to-print storefront -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Seasonal Offer – Infigo Storefront</title>
</head>
<body>
<header>
<h1>Summer Print Sale – Save 30%</h1>
<p>Hurry – offer ends <time datetime="2025-08-31">31 Aug 2025</time></p>
</header>
<main>
<section>
<figure>
<img src="/326988105/Handler/CSSOverride/GetImage/22/Infigo Academy 250px.png" alt="Personalised spiral-bound notebook">
<figcaption>Personalised Notebook – from £7.99</figcaption>
</figure>
<p><a href="/storefront/notebook" role="button">Customise & Order</a></p>
</section>
</main>
<footer>© 2025 Your Company Name – Powered by Infigo</footer>
</body>
</html>
Hurry – offer ends
What is it? Cascading Style Sheets control colours, spacing, fonts and responsive layouts.
How AI helps …
Implement in Infigo: Paste into Theme Editor → Custom CSS or wrap in a <style>
tag within an HTML embed.
Limitations: Large theme-wide refactors still need multi-browser QA.
Create a *CSS-only* “promo-banner”:
• Use brand colours as CSS variables.
• Infinite background gradient (coral → purple → navy) panning at 600 %.
• Add an animated rainbow border via a masked ::before pseudo-element.
• Hover: pause gradient & gentle zoom/tilt. Active: compress.
• Stylise heading with gradient text; button with lift & press states.
• Support prefers-reduced-motion to disable animation.
• Comment every section so a non-coder can follow.
/* ===== Infigo brand palette ===== */
:root{
--clr-navy:#002E47;
--clr-coral:#FF6867;
--clr-purple:#4344A2;
--txt-on-dark:#ffffff;
--space-lg:2rem;
--radius-lg:.75rem;
--ease:cubic-bezier(.4,0,.2,1);
}
/* ===== Ultra-visible, animated “promo-banner” ===== */
.promo-banner{
position:relative; isolation:isolate; /* for masked border */
min-height:200px;
display:flex; flex-direction:column; justify-content:center; align-items:center;
text-align:center; padding:var(--space-lg); border-radius:var(--radius-lg);
color:var(--txt-on-dark); text-shadow:0 1px 3px rgba(0,0,0,.3);
cursor:pointer; user-select:none; outline:none;
/* Infinite panning background */
background:linear-gradient(125deg,
var(--clr-coral) 0%,
var(--clr-purple) 45%,
var(--clr-navy) 100%);
background-size:600% 100%;
transition:transform .3s var(--ease);
animation:
slideDown .6s var(--ease) forwards,
gradientShift 9s linear infinite;
}
/* Spinning rainbow border */
.promo-banner::before{
content:""; position:absolute; inset:-3px; z-index:-1; border-radius:inherit;
background:linear-gradient(60deg,
var(--clr-coral), var(--clr-purple), var(--clr-navy), var(--clr-coral));
background-size:400% 100%;
animation:borderSpin 6s linear infinite;
/* Mask trick – shows only 3 px border */
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
padding:3px;
}
/* Heading & button */
.promo-banner h2{
margin:0; font-size:clamp(1.6rem,3vw+1rem,3rem);
background:linear-gradient(90deg,#fff 0%,var(--clr-purple) 80%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.promo-banner a{
margin-top:1rem; display:inline-block; padding:.75rem 2rem;
font-weight:700; text-transform:uppercase; letter-spacing:.05em;
color:#fff; background:var(--clr-navy); border-radius:calc(var(--radius-lg)/1.2);
box-shadow:0 4px 15px rgba(0,0,0,.25);
transition:background .3s var(--ease), transform .3s var(--ease);
}
.promo-banner a:hover{background:var(--clr-purple); transform:translateY(-2px) scale(1.05);}
.promo-banner a:active{transform:translateY(0) scale(.94);}
/* Interactivity */
.promo-banner:hover{
animation-play-state:paused; /* freeze gradient */
transform:scale(1.05) rotate(.5deg);
}
.promo-banner:active{transform:scale(.92) rotate(-.6deg);}
/* Keyframes */
@keyframes slideDown{from{transform:translateY(-24px);opacity:0;} to{transform:none;opacity:1;}}
@keyframes gradientShift{from{background-position:0% 50%;} to{background-position:100% 50%;}}
@keyframes borderSpin{from{background-position:0% 50%;} to{background-position:300% 50%;}}
/* Motion safety */
@media (prefers-reduced-motion:reduce){
.promo-banner, .promo-banner::before{animation:none;}
}
The banner demonstrates looping gradients, a masked rainbow border, animated text and interactive states—no JavaScript required.
What is it? JavaScript adds dynamic behaviour—modals, sliders, form validation, micro-animations.
How AI helps … Build lightweight functions, remove jQuery, translate snippets to ES6/TypeScript.
Implement in Infigo: Paste into Content → Templates → Custom JavaScript or inline within a <script>
.
Limitations: AI can’t foresee performance regressions—always test on real devices.
Create a *JavaScript-only* snippet that:
• Listens for clicks on an element whose ID is “fireworks-btn”.
• On click, injects a full-viewport <canvas> and renders animated confetti for 2 s.
• Uses requestAnimationFrame for 60 fps; removes the canvas when finished.
• Falls back to alert(“🎉”) if Canvas API is unavailable.
• Comment every section so a non-coder can follow.
/* ============================================================
Fireworks Confetti · Vanilla JS · No external CSS
Paste into <script> or Theme → Custom JavaScript
============================================================ */
/* 1. Config ------------------------------------------------------- */
const DURATION_MS = 2000; // How long the animation runs
const COLORS = ['#FF6867','#4344A2','#FFD166','#06D6A0','#118AB2'];
const PARTICLES = 120; // Total confetti pieces
/* 2. Main handler ------------------------------------------------- */
document.getElementById('fireworks-btn')?.addEventListener('click', () => {
/* Canvas fallback check */
if (!window.HTMLCanvasElement) return alert('🎉');
/* Create full-screen canvas */
const canvas = Object.assign(document.createElement('canvas'), {
style: `
position:fixed;inset:0;z-index:9999;pointer-events:none;
`
});
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
/* Fit to viewport */
const setSize = () => { canvas.width = innerWidth; canvas.height = innerHeight; };
setSize(); addEventListener('resize', setSize, { passive:true });
/* Build particle pool */
const parts = Array.from({ length: PARTICLES }, () => ({
x: canvas.width / 2,
y: canvas.height / 2,
vx: (Math.random() - .5) * 8,
vy: (Math.random() - .7) * 8,
g : 0.2 + Math.random() * .2,
rot: Math.random() * 360,
size: 6 + Math.random() * 6,
color: COLORS[Math.floor(Math.random() * COLORS.length)]
}));
/* Animation loop */
const start = performance.now();
(function anim(t){
const elapsed = t - start;
ctx.clearRect(0,0,canvas.width,canvas.height);
parts.forEach(p => {
p.x += p.vx;
p.y += p.vy += p.g;
p.rot += 6;
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.rot * Math.PI / 180);
ctx.fillStyle = p.color;
ctx.fillRect(-p.size/2, -p.size/2, p.size, p.size);
ctx.restore();
});
if (elapsed < DURATION_MS) requestAnimationFrame(anim);
else { // Clean-up
canvas.remove();
removeEventListener('resize', setSize);
}
})(start);
});
Vanilla JS, ES6+, no external styles—click the button to generate a burst of confetti that self-destructs after 2 s.
Purpose: Drop-in banner that counts down to the end of a promotion.
Implement in Infigo: Paste the bundle into an HTML embed; the internal <style>
and <script>
keep everything sandboxed.
Limitations: Keep widgets under ≈5 KB and avoid global selectors to prevent clashes.
Build a *single-file* countdown widget:
• HTML: inline banner with message, live timer, “Shop Now” link and dismiss ✕.
• CSS: coral ➜ navy gradient, bold digits, pulse animation in final 10 s, slide-in on load.
• JS: live countdown to 31 Aug 2025 23:59 (Europe/London), stop at 0, change message to “Deal expired!”, mute CTA, support multiple instances, Esc closes banner.
• No external libraries. Comment code for non-coders.
<!-- FLASH-SALE COUNTDOWN · paste anywhere in body -->
<div class="deal-countdown-widget">
<div class="deal-banner" role="status" aria-live="polite">
<span class="deal-msg">Flash Sale ends in</span>
<span class="deal-timer" aria-label="Countdown">--:--:--</span>
<a class="deal-cta" href="/storefront/sale" target="_blank">Shop Now</a>
<button class="deal-close" aria-label="Dismiss banner">×</button>
</div>
<style>
:host, .deal-countdown-widget{--clr-coral:#FF6867;--clr-navy:#002E47;}
.deal-banner{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:.75rem;
background:linear-gradient(90deg,var(--clr-coral),var(--clr-navy));
color:#fff;font-family:sans-serif;font-size:1rem;box-shadow:0 4px 12px rgba(0,0,0,.25);
animation:slideIn .6s cubic-bezier(.4,0,.2,1);}
.deal-timer{font:700 1.05rem/1 monospace;letter-spacing:.03em;background:#fff1;
padding:.2rem .5rem;border-radius:.35rem;}
.deal-cta{all:unset;cursor:pointer;background:#fff;color:var(--clr-navy);padding:.45rem 1rem;
border-radius:.5rem;font-weight:700;transition:transform .25s;}
.deal-cta:hover{transform:translateY(-2px) scale(1.05);}
.deal-cta:active{transform:translateY(0) scale(.92);}
.deal-close{all:unset;cursor:pointer;font-size:1.25rem;line-height:1;color:#fff;margin-left:auto;}
@keyframes slideIn{from{transform:translateY(-15px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes pulse{50%{background:#ff1f1f;}}
.deal-banner.pulse .deal-timer{animation:pulse .6s infinite;}
</style>
<script>
/* ===== countdown behaviour =================================== */
(function(widget){
const END_TIME = new Date('2025-08-31T22:59:59Z'); // 23:59 BST (UTC+1)
const banner = widget.querySelector('.deal-banner');
const timerEl = widget.querySelector('.deal-timer');
const cta = widget.querySelector('.deal-cta');
const closeBtn = widget.querySelector('.deal-close');
/* format helper */
const pad = n => n.toString().padStart(2,'0');
const tick = () => {
const now = new Date();
let diff = END_TIME - now;
if (diff < 0) diff = 0;
const hh = pad(Math.floor(diff / 36e5) % 24);
const mm = pad(Math.floor(diff / 6e4) % 60);
const ss = pad(Math.floor(diff / 1e3) % 60);
timerEl.textContent = `${hh}:${mm}:${ss}`;
/* final 10 s pulse */
banner.classList.toggle('pulse', diff > 0 && diff <= 10e3);
if (diff === 0) { // expired
clearInterval(id);
banner.classList.remove('pulse');
widget.querySelector('.deal-msg').textContent = 'Deal expired!';
cta.style.pointerEvents = 'none'; cta.style.opacity = '.4';
}
};
tick(); const id = setInterval(tick, 1000);
/* dismiss */
const dismiss = () => { banner.style.display = 'none'; clearInterval(id); };
closeBtn.addEventListener('click', dismiss);
widget.addEventListener('keydown', e => { if(e.key === 'Escape') dismiss(); });
})(document.currentScript.parentElement);
</script>
</div>
Self-contained banner demonstrates animated CSS, real-time JS logic and accessible HTML—all in one copy-paste block.
What is it? Regular expressions match text patterns (e-mails, postcodes, SKUs).
How AI helps: Translates human rules (“three letters, four digits…”) into one concise pattern.
Implement in Infigo: Paste into form-field validation or pricing scripts.
Limitations: Test edge-cases—one typo breaks the match.
Generate a case-insensitive regex that:
• Validates an SKU in the form AAA-0000-BB
◦ AAA → exactly 3 A-Z letters
◦ 0000 → exactly 4 digits
◦ BB → exactly 2 A-Z letters
• Reject lowercase or missing dashes
• Explain the pattern with inline comments
/** SKU format: AAA-0000-BB **/
const SKU_RE = /^[A-Z]{3}-\d{4}-[A-Z]{2}$/;
Use cases: Multi-part product definitions, print-device settings, legacy integrations.
How AI helps: Produces valid schemas with correct nesting and comments.
Implement in Infigo: Upload via Products → Advanced → Import XML.
Limitations: Ensure tag names match the target system exactly – AI can’t guess proprietary nodes.
Use the Infigo MultiPart Product Config Builder help-centre page at https://academy.infigo.net/p/2203 to generate a basic XML configuration for a multi-part product. The product has two user-upload parts:
1. A front cover named “Cover” which allows between 1 and 2 pages and accepts only a single PDF upload. Apply a preflight check profile named “Preflight_Basic”. Provide UI labels (“Front Cover” / “Upload your front cover PDF.”) in English with translations for German (de-DE) and French (fr-FR).
2. An interior section named “Contents” which allows between 1 and 50 pages and up to five separate uploads. Apply a preflight check profile named “Preflight_Content”. Provide UI labels (“Interior Pages” / “Upload your interior pages.”) in English with translations for German and French.
Set global settings in the <Configuration> element as follows: previewModeType = “normal”, editorMode = “required”, confirmPreview = “true”, previewMode = “single”, isPreviewOptional = “false”, title = “show”, addPageNumbers = “true”, and pageNumbersAtContentPagesOnly = “false”. Include an <Order> section listing the parts in the order Cover then Contents. Do not include advanced preview settings. Produce valid XML with appropriate nesting and comments where useful.
<?xml version="1.0" encoding="utf-8"?>
<Configuration previewModeType="normal"
editorMode="required"
confirmPreview="true"
previewMode="single"
isPreviewOptional="false"
title="show"
addPageNumbers="true"
pageNumbersAtContentPagesOnly="false">
<Parts>
<!-- Part definitions control page ranges and any preflight profiles -->
<PartConfiguration type="userupload"
name="Cover"
minPageNum="1"
maxPageNum="2"
requiredCheckProfile="Preflight_Basic"
optionalFixProfile="" />
<PartConfiguration type="userupload"
name="Contents"
minPageNum="1"
maxPageNum="50"
requiredCheckProfile="Preflight_Content"
optionalFixProfile="" />
</Parts>
<InputItems>
<!-- Upload area for the front cover -->
<InputItem type="part">
<ItemInfo>
<InternalName>Cover</InternalName>
<UIName>Front Cover
<localization lang="de-DE">Titelblatt</localization>
<localization lang="fr-FR">Page de couverture</localization>
</UIName>
<UIDescription>Upload your front cover PDF.
<localization lang="de-DE">Laden Sie Ihre Titelseite hoch.</localization>
<localization lang="fr-FR">Téléversez votre page de couverture.</localization>
</UIDescription>
</ItemInfo>
<ItemContent>
<PartName>Cover</PartName>
<!-- Only one upload allowed -->
<Usage type="range" min="1" max="1" />
</ItemContent>
</InputItem>
<!-- Upload area for the interior pages -->
<InputItem type="part">
<ItemInfo>
<InternalName>Contents</InternalName>
<UIName>Interior Pages
<localization lang="de-DE">Innenseiten</localization>
<localization lang="fr-FR">Pages intérieures</localization>
</UIName>
<UIDescription>Upload your interior pages.
<localization lang="de-DE">Laden Sie Ihre Innenseiten hoch.</localization>
<localization lang="fr-FR">Téléversez vos pages intérieures.</localization>
</UIDescription>
</ItemInfo>
<ItemContent>
<PartName>Contents</PartName>
<!-- Allows between one and five separate uploads -->
<Usage type="range" min="1" max="5" />
</ItemContent>
</InputItem>
</InputItems>
<!-- The order node specifies the sequence of parts in the final product -->
<Order>
<OrderItem>Cover</OrderItem>
<OrderItem>Contents</OrderItem>
</Order>
</Configuration>
Use cases: Quick tier-price tables powered by a single CSV and a handful of attributes, ideal for the Generic Pricing Script.:contentReference[oaicite:1]{index=1}
How AI helps: Converts a plain-English requirement into the exact JSON keys the engine expects.:contentReference[oaicite:2]{index=2}
Implement in Infigo: Upload via Products → Advanced → Import JSON; the script reads the file at runtime.:contentReference[oaicite:3]{index=3}
Limitations: Property names are case-sensitive—mismatches stop the import.:contentReference[oaicite:4]{index=4}
I have attributes in my product called Size, Stock and Finish.
The CSV I’m using has a “Quantity” column for order volume and a “Price” column for the cost.
I want tier pricing enabled so shoppers get discounts at higher quantities.
Give me the simplest Generic-Pricing-Script JSON that handles this.
{
/* CSV file the script will read -------------------------------- */
"filePath": "file.csv",
/* Column headings the engine should parse ---------------------- */
"quantityColumnName": "Quantity",
"priceColumnName": "Price",
/* Let the engine calculate breaks from the Quantity column ----- */
"useTierPrice": true,
/* Map CSV headings to product attributes ----------------------- */
"attributesMappings": [
{ "csvKey": "Size", "attributeName": "Size" },
{ "csvKey": "Stock", "attributeName": "Stock" },
{ "csvKey": "Finish", "attributeName": "Finish" }
]
}
This lean JSON matches the **exact** keys documented for the Generic Pricing Script—nothing more, nothing less—so it imports cleanly and enables tier pricing out of the box.:contentReference[oaicite:5]{index=5}
When you want AI to extend or style something that already exists on your page, first copy the relevant snippet from your browser’s DevTools and include it in your prompt. That concrete context (IDs, classes, nested structure) lets the model target the exact elements — saving you from manual clean-up later.
<!-- Existing button you want to style -->
<button class="btn btn-primary checkout-btn">Checkout</button>
Here's the existing code on my page:
---
[PASTE THE SNIPPET ABOVE]
---
Please generate the CSS required to:
• make every "checkout-btn" a coral gradient
• add a hover scale animation
Return only the <style> block I can paste straight in.
<style>
/* Gradient coral button using the original class */
.checkout-btn{
background: linear-gradient(135deg,#FF6867 0%,#FFA89B 100%);
color:#fff;
border:none;
padding:0.75rem 1.5rem;
font-size:1rem;
border-radius:0.5rem;
transition: transform 0.25s;
}
.checkout-btn:hover{
transform: scale(1.05);
}
</style>
Copy existing markup from your browser’s DevTools so the assistant can target real IDs and classes.
Work in a staging storefront, tweak the prompt, re-test – three quick iterations usually beat one long request.
Ask the AI to add inline comments and surface editable variables at the top of the script for painless maintenance.
AI excels at isolated tweaks but can introduce performance or security issues if you try to replace an entire development cycle. Complex UX, integrations or mission-critical flows = call the pros.
Disclaimer: Always validate AI-generated code in a safe environment before deploying live.
Harness AI-powered analytics to transform raw storefront data into human-friendly, decision-ready insight.
Websites can churn out a mountain of metrics—views, quotes, conversions and more—but their sheer volume often leaves teams wondering where to start. By letting an AI assistant tidy-up, summarise and visualise those numbers, you can move from “data swamp” to “action plan” in minutes.
Below is a prompt you can drop straight into ChatGPT (or your favourite AI tool) to produce an SQL query that feeds directly into the Metabase-powered Infigo Insights module. It will surface the five most-viewed products, complete with trends and last-viewer info, filtered for Storefront 23.
I need assistance creating SQL code to format data in a table. Below, I will provide information on all relevant data points for your reference when constructing this code—these are applicable to my specific application.
You must provide your output in a complete format where I can just copy and paste it into an area expecting SQL code input.
Using this data, provide an output for me which shows the following data:
• The top 5 viewed (or quoted) products, organised so the most viewed is at the top of the list
• Product name
• How many times the product has been viewed in the last 30 days
• Days since the product was last viewed
• First name of the last user to view the product (replace blank/null with “Guest”)
• A metric displaying the trend of views for each product — looking at each day for the last 30 days, is the amount of views “Increasing”, “Decreasing” or “Static”?
Give each column a short, appropriate name.
Maintain the filter of storefront 23 in your output.
Here is the data point information for you to reference:
SELECT TOP(1048575) “reporting”.”quote”.”id” AS “id”, “reporting”.”quote”.”name” AS “name”, “reporting”.”quote”.”status” AS “status”, “reporting”.”quote”.”markup_type” AS “markup_type”, ... (continues)
Modern AI “research modes” can now crawl rival sites, digest screenshots, parse sitemaps and output structured insights in minutes— far beyond simple price scraping. Use them to understand how competitors position their products, guide customers through design editors and upsell add-ons, then translate those lessons into concrete improvements for your own storefront.
The bullets below condense a 4-page AI report for brevity.
You are an AI research agent.
Task: Produce a concise comparative report for B2C web-to-print storefronts.
1) Select five direct competitors (at least two UK-based).
2) Audit: product range, design-editor features, checkout flow, pricing tiers, shipping & turnaround, add-ons, unique selling points.
3) Present findings as:
• Table: key metrics per site
• Bullet summary of strengths/gaps
• Actionable recommendations for my new Infigo storefront.
Limit to 500 words.
Always validate scraped data and screenshots before acting—prices, plug-ins and layouts can change overnight.