Show details for Academy Webinar | August 2025 | Leveraging Mainstream AI In Your Storefront Builds

Academy Webinar | August 2025 | Leveraging Mainstream AI In Your Storefront Builds

The webinar showed how to use mainstream AI tools (e.g., ChatGPT, Gemini, Copilot) to accelerate Infigo storefront builds from planning and research to generating images, copy, small code widgets/CSS/XML, pricing CSVs, email templates, bulk data imports. and more. It emphasised effective prompting, picking the right model, verifying accuracy (cites/sanity checks), and protecting confidential data—positioning AI as an assistant, not a replacement. A live demo walked through an AI-assembled product page plus pricing script and import examples, and touched on reporting with Infigo Insights/Metabase.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

0:00:04 Hello everyone. Welcome to today's webinar. Uh, before I get started, just my usual check please in the chat can someone confirm whether you can see me hear me and see my screen please.
0:00:24 Fantastic. Thank you very much. Okay, so, uh, welcome everybody. Thank you for attending today. Okay, so this particular topic is something a little bit unusual in terms of our usual academy webinars.
0:00:40 So what I'm actually going to be looking at today is how we can leverage our mainstream AI tools in order to sort of speed up and make more efficient our infigo storefront builds.
0:00:52 But when I'm talking about mainstream AI here, I'm not talking about fancy features that we've implemented so far or anything like that, which embedded within in Figo itself.
0:01:05 What I'm talking about are just the general AI tools that most of you will probably have heard of by now.
0:01:10 So things like chat GPT or Gemini by Google or something like that. It's just how we can actually utilize those mainstream tools, which can either be free, although then performance might not be quite up to scratch or very low cost for your business.
0:01:29 So the goal of this webinar is to provide you with sort of starting points and ideas as to how you might incorporate these AI tools into your workflow.
0:01:41 What I'm going to cover here is stuff from my own experience of doing this kind of thing because I've used I've encompassed AI into the into creating the academy and that kind of thing quite a lot just because it's me myself and I I've had to sort of find ways to sort of streamline the process and that
0:01:57 kind of thing and some of those things can be extrapolated into general storefront bills themselves and I'm hoping that you'll be able to utilize them as well.
0:02:06 Now what I'm going to talk about here by no means is an exhaustive list it's just some examples nor will it be the only way to accomplish the kind of things which I'm doing is just one way of going about it.
0:02:16 The idea is to give you ideas and get you started. Now, I'm not targeting this at any group in particular either.
0:02:25 So it's not aimed at people who've already got a lot of expertise in using AI. It's not necessarily aimed at someone who hasn't heard a bit at all or is a little bit apprehensive to use it.
0:02:37 I've tried to make it a bit more tailored to all. It's a lot more focused towards knowing what you can do inside in FIGO, so it will cover a lot of different areas inside of FIGO and then just show how we can exploit those.
0:02:50 So the webinar won't be any longer than one hour. I've honestly got no idea how long it's going to last below that, hopefully, just because it's such an unusual topic, and the recording will be available after the webinar from the academy.
0:03:06 It's just me, myself and I today, in terms of in FIGO team members. So if you do have any questions please do feel free to ask them in the questions panel.
0:03:15 If I catch side of them and I if I can answer them I will try and do so otherwise if I'm just borrowing through speech for the entire hour I'll try my best to cover everything at the end or post webinar but please do keep asking questions or please chat with each other if you prefer as well as we're 
0:03:33 proceeding okay so what I'm actually going to use as a main resource today. I've got a couple of pages with some notes on, which I'm just going to use as reference, essentially.
0:03:49 So we've also got a product page here I've made in advance. It's not the most complex thing you've ever seen, but a lot of the things that are present on this page have been created using AI with very little manual input from myself.
0:04:02 So that's what we'll be using today. And I'll walk through that in a little while. Before we do that, I want to just talk about these mainstream AI tools in general just a little bit.
0:04:16 So just in case to cover those who really haven't really got started with any of these tools at all, just heard about them on the news or whatever, people often think of things like ChatGPT and other AI tools like that, just as kind of a turbocharged Google.
0:04:33 So you ask it a simple question, it comes back with a simple response and it sounds like a person whilst it's doing it but it is capable of a lot more than that.
0:04:42 So as we'll see we've got capability for things like image generation, complex research, market comparisons, copyrighting generation, coding, all sorts of stuff that it can potentially do and you've just got to know how to get the most effective results out of it.
0:05:00 So how best to do these prompts as we call them. So the actual questions that you ask them. The way to think of these AI assistance is not a replacement for yourselves in terms of it can't it can't just do everything that everything that you do is more of an assistant.
0:05:18 It can't replace human expertise. It can just assist them in being more productive and it can take over tedious tasks freeing up humans for stuff that's way more interesting in terms of being more creative and more complex work.
0:05:34 Now another thing that often gets said about these tools is the level of accuracy and trust in those tools. So it's got to be acknowledged that sometimes these AI tools can give you inaccuracies in their response, and they can sound incredibly confident in themselves when they're giving you these inaccurate
0:05:53 answers, which can be a bit jarring at types. And they call that hallucinations as well when it kind of comes up with stuff which is not really relevant and not really true.
0:06:08 So an important thing to remember is that even if you are using these to assist yourself in various tasks, you do always need to double check these facts and these outputs.
0:06:17 Don't just blindly trust without verification. There are various ways you can do this and I'll go through some of these tips.
0:06:25 One of these tips, which I want to point out first of all, is that if, for example, you're using an AI tool which is able to search the web, which I'll come onto a bit later on, then you can ask that AI tool to cite all of the sources it's referencing.
0:06:38 That will give you the ability, if you don't trust something it says, to actually go and research it yourself a bit later on.
0:06:44 It means you're not drawing all the sites to try and find the answer, but you can confirm where necessary. Another elephant in the room to do with AI is job security, unfortunately.
0:06:58 So it's not as it stands at the moment, at least, who knows about the future. It's not something which generally can replace human roles.
0:07:07 again, it is an assistant. It still needs that human creativity, that human judgment for reviewing, for ensuring quality, for that creative drive in the first place.
0:07:19 It all ments, it improves productivity, but that human element is still critical. And then a final note before we actually move on to the important stuff here is the privacy implications.
0:07:32 So this did come up when we briefly mention this in the last webinar as well, that we do need to be careful about out what we could put into these tools.
0:07:42 So depending on the tool you use, they'll have very different terms and conditions, what they're allowed to do with your data, how much you pay for your subscription, if you pay it all, might determine what they can do with the data.
0:07:54 If you are planning to put sort of confidential data in there, it's very important that you consider what they can do with that data.
0:08:02 So there might be certain things, like I think Microsoft co-pilot, which works inside your Microsoft environment will be more secure, data-wise than something like ChatGPD.
0:08:13 But then you'd have to read those terms and conditions for proper advice on that. A good rule of thumb to work by is never share, confidential or personally identifiable information.
0:08:25 So things like customer data, passwords, unreleased assets that won't be available on the open web, that kind of thing. Assume unless otherwise stated that anything that you type could be logged and viewed by the company themselves unless it's explicitly stated otherwise.
0:08:44 And if you are, you're walking up more sensitive workloads than use paid tiers if they provide the cover you need or look at enterprise offerings or something that's tied into your ecosystem.
0:08:56 So, I'll just general advice. So, very quickly before we move on, I just want to talk about the difference between the different AI tools that are available out there.
0:09:09 I'm not going to go into this in a massive amount of detail. There's loads of different providers out there. We're all of which might specialize in a bunch of different things, specialize in a bunch of different areas.
0:09:21 I'm just probably picking what what might be class at the top three here. So we've got chat GPT, which I'll mention a lot because it's the one I tend to use.
0:09:30 It's the one I've got a paid subscription for. That's a good all-rounder for all these different things, just coding images, copywriting, whatever.
0:09:38 You've got Google Gemini, which is tied to to Google and Google Search, so good for things like internet research. So my own research suggests and then Microsoft of co-pilot.
0:09:49 Now, these are different providers that will all respond in a slightly different way. They might have different strengths. A level underneath there, a lot of these providers will give you different models that you can work from.
0:10:03 And these models might specialize in very different things. So, again, examples I'm using here are chat GPT related to just to give you some context, but I've got three main models that I might work from with the main workload that I use.
0:10:21 So I've got OpenI-03, which is probably their most advanced reasoning model. It's great for things like coding, complex mathematics, creating document, creating sort of spreadsheets and CSVs and that kind of thing.
0:10:37 It's great for all that stuff. It's what I've found image generation and text generation is a bit more robotic in the text generation.
0:10:48 You've then got for a comparison, GPT 4.5, which is a preview version, which is a lot better at things like writing text with less of these hallucinations.
0:11:00 And then you've got the standard model, this GPT 4, which is great for just sort of general use case. You type something in there, the answer comes back straight away, but for stuff which is a lot more detailed like large documents, detailed spreadsheets, large bodies of code, you'll find or at least
0:11:20 in my experience that it's not as accurate. So what I'm trying to get across here is that there is a very important things to consider.
0:11:26 Choose the right model before you actually tackle whatever it is that you're trying to do. Okay, an apologies if anyone is quite experienced with AI, I am still going through the basics at this point, but we'll move on to in figure in a second.
0:11:46 So what I want to talk about now is what I consider to be the primary thing related to effective use of AI regardless of the application you're using it with.
0:11:58 And that is prompting. So prompting for those that don't know is basically the text or the input that you're putting into the AI.
0:12:08 And it's important that you basically get that right and put as much detail as you possibly can, as much context as you possibly can in those prompts in order to get the required output that you want.
0:12:24 Fundamentally, what you get out of these systems is what you put into them. So if you put something really simple in there, like I've got a basic example here, I just did a couple of minutes ago.
0:12:34 If you put something really simple in there, just something like a product description for a label, for a 330 millilitre can.
0:12:43 Now that's not got any detail. It can take a lot of liberties with that response. And it will go in whatever direction it wants, you've given it no specification, no detail in what it needs to do.
0:12:55 So it might give you something which is very accurate, But it won't give you anything which is probably in the format that you wanted.
0:13:01 It wasn't what you were thinking in your head. Could be a good starting point. But the better thing to do is to actually give it a much more detailed prompt.
0:13:10 So rather than just this one single line and I hope that's big enough for people to see. You can give it a lot more detail.
0:13:17 Now it only takes a couple more minutes to type all this out but the quality of response it gives is much much better.
0:13:24 So what specifications do we have on this can? What quality of product do we get out of it? What pricing structure do we have?
0:13:33 How long do you want the description to be? What voice should it be written in? All this kind of stuff.
0:13:40 Just giving it that little bit of extra context and closing up those gaps in its ability to be ambiguous will give you a much more structured response.
0:13:51 But again, you'd still need to go through and double check, especially with stuff like copywriting. Okay, so I think I've covered most of that in just that one explanation there.
0:14:09 So it is stuff like set the persona, set the voice. If you can share additional resources with whatever model you're using, then do so.
0:14:17 So things like brand assets, screen shots, relevant images, that kind of thing. Any additional context that you can give the model to help it get to its goal will be beneficial for you, right?
0:14:34 I'm going to move on before I get to racked up in this. Darryl, I think that's something that's controlled on your side because we've had that issue before.
0:14:46 The question there was, I think the screen for some people is 50-50. So my face is big and then the screen is quite small.
0:14:54 From what we've seen previously, I think it's something that you can do on your side, just drag it from one to the next, but I apologise if that's not the case, but that's what we had previously.
0:15:17 Okay, actually, before we move one very last thing of promise before we move on, a tip for you here, something for which I often use myself, which is quite useful, if you're quite new to prompting, then you might not know exactly the level of detail or the format that it requires.
0:15:37 But the AI itself probably knows what it needs to make an effective prompt. So why don't you ask it to improve your own prompt?
0:15:45 If you make an original prompt, you can then say, here's a draft prompt, paste it in, make it better, expand it, add more details to it, and that can fill in the details later.
0:15:57 And it will give you a much more rounded out and That's inclusive prompt that you can then reuse over and over again once you've got a basic template.
0:16:16 Okay, so here's our product that we're going to look at. So as I mentioned, this is not the most complex product in the world, but it will give us a good example.
0:16:27 So there's a lot of things on here which are AI generated, which we're going to look at today. So this is different areas like the actual image generation.
0:16:36 So all of those are AI generated. Descriptions that are on here, various other snippets of code and widgets, things like this support window here.
0:16:46 That's all been AI generated. a nice new tabbed window at the bottom, which contains various bits of information on the product.
0:16:57 We even go so far as doing things that are sitting in the background and in figure as well. So things like the pricing of this product is being driven by the generic pricing script, which uses a CSV to dictate the pricing.
0:17:11 We can use the AI model to create the CSV that works in the background or we can use it to configure the XML, the works in the background of our multi-part product that we've got here.
0:17:27 So there's loads and loads of different things we can do and we'll cover these off one by one. So first thing I actually want to talk about in this respect is actually using AI to actually kickstart our product build.
0:17:57 So it's not just about actually creating physical content that we can use, it's also about getting those thoughts that are in your head down on paper or down screen.
0:18:07 So you can use it, especially certain tools as an advanced planning tool or even a research assistant. So let's say, for example, you are just starting in your very first storefront build.
0:18:20 You've got not really any idea how to do this. Maybe your business has never had a web-to-print platform before, and you don't really know how to get started.
0:18:30 You're going to need information in the background to know how to actually do this. So you could get the tool to actually create this kick starter common time for you to actually get you off that starting line.
0:18:44 So it could be things like generate me a potential site map. So the layout of my products, the layout of my categories and all the additional pages I might need.
0:18:53 It could be do some market research on the pricing of these particular products. Go away and actually search. It could be give me some recommended shipping and return policies for web-to-print businesses that deal with these kind of products, for example.
0:19:08 If you need this context, You can go away and get it to do this kick-starting information for you. Some AI models now have the ability to actually go and search the open web as well, and I'll see an example of that in a moment.
0:19:23 What this means is that it's not just one website at a time it's working at. If you ask it for research on a certain topic, and in the prompt, make sure that it's working at a number of different comparative sources, is it will give you that context, that research.
0:19:41 And as long as you tell it what format you want the output data in, it will present it for you.
0:19:46 So let's say you want it in a table format, where you can see a comparison of different sites. It can do it that way for you.
0:19:52 Now, the example I want to show is actually within my chat GPT window. And the example I did here was to do with trying to get some ideas on the layout or what should be included on this product page.
0:20:12 So I say landing page research. Now I apologise there's just going to be a lot of text in some of these, tried to make it a bit more visual but it's not possible on all of them unfortunately.
0:20:23 So what you can see is that I've actually given this quite a large complex prompt and this actually leads me onto another tip before we move away for I forget about it.
0:20:34 Especially at this early stage, you might not have completely baked ideas in your head. You might not know exactly what it is you want to do or exactly which direction you want to go.
0:20:46 And a lot of us find it a lot easier to just talk these ideas, especially me as you may have noticed.
0:20:51 Talk these ideas rather than just try and type them all out, which can take a long time and you can lose train of thought or whatever.
0:20:58 So why don't you actually use it, just dictate it to the model, or use an app on your phone to just dictate whatever it is that you want to find out.
0:21:07 And just ramble at it basically, just talk and talk and talk. It doesn't matter if you repeat yourself. It doesn't matter if the idea is a half baked.
0:21:14 The AI doesn't care. And then just tell it at the end to actually structure that in a decent way or to actually just make you a response from it.
0:21:23 It will save you a lot of time. And it actually does a very, very good job in most cases of cutting out all the nonsense that you might talk in between these things.
0:21:33 So that's the reason I've got a big body of text there I've just been speaking to it and waiting for its results.
0:21:44 And then what I used here was a mode which is in chat GPT, which I'm assuming some of the other ones have as well, which is quite new, which is called agent.
0:21:52 And this is one which will actually open up a web, a virtual desktop and we'll go through and search all these websites and navigate through these websites and you can see it doing it and collect all the information.
0:22:04 And this is very useful for things like market research on something like an e-commerce storefront. Once it's gathered all that information, it'll collect it all together.
0:22:14 And then I'm not going to read all this out because we'll be here forever, but it's given me great recommendations from various different sites as to what we might want to include on our landing pages.
0:22:26 What kind of attributes do people normally offer? Do people offer different sizes? What kind of pricing structure do they have?
0:22:33 Is it a tiered pricing structure? Do they allow upload only, or is there an online editor? All these questions might be answered.
0:22:46 And of course there's a little bit of like work to read through and understand, but it's done the main bulk of the work for you.
0:22:58 Right, I don't want to spend too long on there, I want to move on to something a little bit more visual.
0:23:05 So next we're looking at generating images. So many of these AI models now are able to generate an unbelievable range of images.
0:23:23 All you have to do is to know how to correctly prompt them. Now I will say that there are some image generation models which are a lot more competent than others.
0:23:33 And the sum which I think, like I've never used it but mid journey as an example, I think, which specializes in image generation.
0:23:43 But there are a lot of the sort of general mainstream ones like Chan G.P.T., which do great jobs at image generation.
0:23:50 And they've got a tool called Dali, or Dali, or whatever you want to call it, which does that image generation.
0:23:59 Now this is another area where the detail in your prompt is especially important. Anything that you don't define in your image is basically a free for all for the AI tool.
0:24:11 It's open for interpretation. You want to be sure that you specify things such as the artistic style. So specify, for example, in product images, you might want something like photo realistic image to make sure you do get that nice crisp image.
0:24:29 You might want to specify if you want to create a logo or if you want to create an icon, specify that you want that particular thing.
0:24:37 Or if you want a particular artistic style, you can do it that way as well. You can also insert things such as the size that you might want.
0:24:46 So in our particular prompt here, we've recommended or suggested that it creates something which is a thousand by a thousand.
0:24:52 Let me find that there so there's detail in there such as the size we're expecting the photographic style that it's suitable for a professional e-commerce website that's very important to include as well all this stuff which includes the context that it needs.
0:25:20 And then of course if you're wanting something that's very artistically vibrant and distinct you want to describe what's actually on the product as well if it's a product that wins itself to that.
0:25:29 So if you can describe what the design is, describe it, say what text is going to be on there, say if there's a logo, say if there's certain colors that it needs to use.
0:25:40 A great tip actually as well is when you're actually creating these prompts, I don't think you'll see it on here, but you can include things in some models like file uploads.
0:25:52 and file uploads you might include are things like a company's branding guidelines, which might be a PDF, it might be a Word document or whatever, these can often read them, and it will read through that entire pre-prepared document, you'll know exactly what colors you need to use, you'll know exactly
0:26:07 what fonts to use, exactly what iconography if it's in there. It's a quick win, it's a quick win to give you that kind of information.
0:26:19 A very useful tip as well is that you can ask it to choose the output file format and you can ask it to have a transparent background if that file format suits it.
0:26:30 So it will do that for you, it won't just make a white background image if you want something where the background can show through, create a PNG or ask it to convert it like this one here into a WebP format.
0:26:49 So not only does WebP allow for things like animations and transparent backgrounds, if I remember in that correctly, it will also be a lot smaller than PNGs that are generated by standard.
0:27:02 So all you need to do is say, okay, well, I've got this image that I like, convert it to a WebP file, and then it will make the image much smaller, and it will load on your website a lot faster.
0:27:14 Now one caveat I found with chat GPT, at least, just as a warning to you. If you're wanting to use something like logos and specific logos, it does seem to have trouble replicating that logo precisely.
0:27:28 That's just a warning to you. Other models might do it a little bit better, but I've had particularly difficulties with that.
0:27:32 So you might have to consider that if you are creating a particular branded Products or of course you can ask it to leave that particular area blank And then you can do some work on it afterwards inside Photoshop or whatever to put the logo on there.
0:27:49 It's all just about taking that Taking the workout basically not causing it all out but taking a lot of the bulk workout So it's not just basic product images, you can ask it for certain environments as well, certain backgrounds, certain lighting structures, where's the lighting coming from, where's 
0:28:15 the shadows, what environment is it in? I'm not saying this is perfect, it's just an example I made. You can ask it to modify just certain bits of the image if your model suits it as well.
0:28:30 So there are put more details on, for example, just to get the thing you want. Now it might not give you pristine, precise things, which it depends what kind of detail you're after on your particular storefront.
0:28:42 But as something just as a placeholder, or something just to get you off the mark and actually get your storefront out there, it gives you a very, a potential very, very quick solution for creating images.
0:29:01 I'm just checking my notes. Now at certain points, I'm going to show how to actually implement these things inside and figure itself.
0:29:12 But I think putting an image in place is pretty standard for everybody, and I'm assuming everybody knows how. So I'll use that one.
0:29:19 It's just a standard method of putting images on your input figure product. But all right, so the next part is going to be looking at storefront copy.
0:29:32 So copywriting. So this is probably one of the more commonly used use cases for mainstream AI. It is just writing content, whether it can be blogs, emails, product descriptions, whatever it might need to be.
0:29:48 However, as many people will know and will be annoyed by, it's often very, very obvious when something is written by an AI.
0:29:56 Regardless of how hard it tries, it always sounds a little bit robotic. It always sounds slightly unhuman in a somewhat unnerving way.
0:30:07 So this is a point where it's especially important to add that human touch after the AI has generated it. So you, I'd say in terms of copywriting and getting it to generate text, it is a great tool to use as a drafting tool, a first pass, which then you can go ahead and refine it a little bit further
0:30:32 . Once again, make sure that you have as much detail as you can in the input, because that closes the available gaps for it to do a bit of hallucination.
0:30:43 We've already talked a bit about one line as versus quite detail prompts. And another potential tip that you could do actually is let's say you're not quite sure what you want in terms of a description, something like this.
0:31:03 So you're not sure if you want something which is just one paragraph or you want something which is just a few bullet points or you're not sure what style you want it.
0:31:11 You could ask the tool itself to give you comparative things in one go. So create me a few different sample paragraphs in a few different formats containing these details, for example.
0:31:29 Okay, so there's two areas where we've actually incorporated a copywriting into our product here, and they're quite different in the way they do things.
0:31:38 So we've got one which is just a basic paragraph. That's nice and easy. I think most of you will know how to do that and how to implement it.
0:31:45 The other is further down. Now I've taken a bit of liberty here. So what I wanted was a body of text where it contains all of the relevant details on that particular product.
0:31:58 That includes, as you can see here, specifications for the product, potentially extra downloads of artwork and templates they want to download and then information on shipping and return.
0:32:11 Now, we have had it so that it's one large body of text, however, that would not be very good for the user to look at at all.
0:32:20 And then you have got content templates in infigo and that kind of thing, but it might not give you it in the exact format that you want.
0:32:28 You might not be able, maybe you want to present that in a certain way, but you can't particularly do so.
0:32:33 So, what we've actually gone for here is we've got the AI to complete this entire widget. So, we've asked it to format things in a certain way whilst also generating the copy.
0:32:45 So, what I've asked it for, if I can find my relevant section, Product details are custom tabs. Okay, so I provided it with loads of details and specifications and other details on the actual, Oh, Woods details on the product itself.
0:33:26 And then I've just put very specific details in there as to what I want it to actually create. Now, before I go any further with coding with AI, it's very good for creating small changes to your site.
0:33:43 CSS changes, as we'll see a bit later on, or a small widget like this, or structuring an XML for you in the background, or something like that.
0:33:54 You're not really feasibly going to be able to do like a complete website redesign, or a detailed site build on the just using your AI tool if you've got no knowledge of programming.
0:34:08 You're still going to have to bring in the experts for that. They will do a proper job. But if you're just wanting to do some small changes, some small tweaks, then that can be achieved absolutely.
0:34:20 And then you can drop that into your site, which I'll show you where in a moment. Just, I know you said you had to leave Trey, so just a quick one there.
0:34:27 Yes, you could drop that into the code mirror editor or you could do it into an embed inside a content template, and I'll show everybody else that in a moment.
0:34:41 Okay. Another thing about coding is if you do start creating custom code, I'm under liberty to tell you that any custom code you put onto your site will not be covered by our support team.
0:34:55 That is all when you are afraid. If you've made it using content templates or something like that, then it's something that we do by default, that's fine.
0:35:04 But if it's custom code, then you really do have to make sure that it's suitable for your particular application. Okay, so in this particular example, what I asked for was the copywriting on those three things, but then to be split into three separate tabs, all those tabs to be stylized with CSS, written
0:35:27 in HTML, JavaScript if necessary, because I know those can all be put onto the and then to provide me with an entire code block, an entire widget contained, which I can copy and paste into that particular application.
0:35:43 And then the end result of that, after just a couple of goes and a couple of refinements, was what we see on the front page here.
0:35:52 So we can see we've got several tabs, we can see various different bits of animations, various bits of information which have been shown in different ways.
0:35:59 I haven't checked the copy that's come out of this, in just in case it's rubbish. But we can see the application works great.
0:36:09 How that's actually put into your store. You are correct, I have Christian, I have, I did think I did ask during the course of the preparation for this, for it's also also account for mobile view.
0:36:28 Let's see if it actually does work. Maybe not exactly as I'd like, but I didn't give it specific details on that.
0:36:43 Let's see, say it works relatively well, but that's just me. Okay, so how that's put into the actual system. So I'm just gonna go into that product.
0:37:12 And then there's two places I can put this as trailer we did to in the previous message, actually. So if you know it's going to be the only thing in that particular area of the product, you could just put it in a code mirror editor.
0:37:25 Just drop it into there, HTML, CSS, JavaScript, it should display it fine. If it's a self-contained thing. However, if you want to use it in conjunction with other content templates, so let's say there's descriptions above it or whatever it might be, then the element you want to use inside content templates
0:37:44 is an embed like this, and then just drop the code inside the embed. Now I would say be careful when you are making these things.
0:37:58 Don't sort of put 500 of them on one page because I imagine when you start getting that many, it won't be the most streamlined code in the world, hence the need for a professional, but if you've just got one or two bits on a page, I can't see it's lonely down that much, in most cases.
0:38:19 Right. Now I know I've found eventually onto code there, but one last thing on copywriting or writing text is another tip.
0:38:33 It's make AI audit its own copy, and I've actually used this to great effect previously. I don't know if I've got an example of it, but if, let's say you've given it some specifications, you've given it quite a lot of input data which it needed to sift through and you've asked it to create an output 
0:38:52 based on that data. Now, for some reason, that first time round, it might make stuff up. It'll get most of it right, I assume, but it'll make some stuff up.
0:39:03 It might take some liberties on the data, it might make assumptions. So a good second round to do before you check it manually is actually just get it to choose its own information or to verify sorry its own information.
0:39:18 I forgot an example of that somewhere. Yeah, something like that. So you can tell it not to rewrite it for you because it might make the same mistake again, but you can tell it to go through the thing it provided you line by line, compare it with the input data and make sure it's 100% accurate.
0:39:39 And then it might come out with a table giving you ticks or crosses and which things are incorrect. Get it to do the hard work for you is all I'm saying.
0:39:49 Just try and make my life easier basically by doing all this. Okay. So, AI-powered code generation. Let's go back to our thing here.
0:40:09 So, a lot of the AI models will now specialize in writing code, and it doesn't really matter what programming language it's in.
0:40:17 It will still specialize in it. It seems to be particularly adept at it, which I'm not really surprised at really.
0:40:23 These can be anything from one line snippets. So, If you need something really short, two, add a push, one of these four we contained widgets, potentially beyond as well.
0:40:33 But I imagine you got scope for it to drift a little bit if you start trying to ask it to do too much in one go.
0:40:40 But again, please do remember that for larger scale tasks or full site designs where it needs to be efficient, it needs to be practical, it needs to all be perfect and in sync, then you're gonna want professional to have a go at this.
0:40:56 Okay, once again you want to make sure that for any code that you write you're doing it in detailed plain text descriptions really clearly stating what it is that you require in as much detail as possible.
0:41:10 Make sure that you've included in that prompt the language that you wanted to come out on and the medium in which it's going to be displayed.
0:41:18 So for example when I was creating this one here I says the language it didn't need to be in. So HTML, CSS, JavaScript, and that it was going to be placed in an embed on a product page.
0:41:32 And that just gives it a little bit of extra context, I think, just to know how to write in the way it should.
0:41:45 Now, before we go to specific applications that were on here, just one more tip for you here and that is to when you're writing a prompt for things like coding there's ways you can make it even easier for yourself if you do have to do manual work afterwards and that is especially if you're not a programmer
0:42:05 like me then you want to ask it to put comments throughout the code it writes because then you will be able if you need to go back through it at any point, it will give you really clear instructions as to where everything is.
0:42:17 And another recommendation is to ask it to put variables right at the top of the script, so surface them right at the top.
0:42:24 So if there's something where you might need to change the URL later on, or you might need to change some part of the text or something like that, have it put those right at the top of the script, so you can easily find it later on, and you're not sort of scribbling around 300 lines of code.
0:42:47 Okay, another tip I've got for you, and this is one which has helped me a lot. is to actually give the script the context.
0:43:02 So what I mean by the context, so one of the things we've got on here, and we've customized, is this attribute section here.
0:43:14 So what I wanted from this is I could do it actually kind of inadvertently answering the question that you just asked their tray.
0:43:22 So for the scripts that we made here, the styling was all part of the same contained script. It's not using CSS over right there.
0:43:29 It could do, but it's not. It's all just self-contained. However, for this one, what I wanted was a global styling.
0:43:37 So I already had the attributes on my page, and they were displayed in a certain way, but maybe I want it so that that every single attribute box, let's say, and all of my buttons, like we have here, are all styled in a certain way.
0:43:52 And to do this, as many as you know, as many of you know, we're gonna have to put this in CSS override, so the area of infigo, which is CSS override.
0:44:01 But in order to make sure that it is generating CSS, which targets the right things in your storefront, We might need to give it some additional context and a good way to do this is to actually just go on to the Inspection tools or the dev tools for your actual browser, whichever one you use that text
0:44:22 is definitely too small Let's go with that and again You don't really need to know massively about what you're doing here You just need to copy and paste things out of here just to give it that additional context in its prompt So, for something like this, you could say, well, only apply this to pages
0:44:43 which have this page catalog product, which is specific to catalog pages. Or, because attributes are specific to product pages in this respect, maybe we right click on there, say inspect, that takes us to it.
0:44:58 And then we can find the area where that box is highlighted. it. So let's say something like this, we can copy that entire element, that entire block of code, and then just include that in our prompt.
0:45:16 And then just say, I've got this area here, which includes my attributes. Here's the code from an example page, make the CSS so it references that particular, these particular divs, these particular IDs.
0:45:30 And so it just applies to these types of pages. So, for the actual result of that, Global CSS styling, my mouse isn't cooperating.
0:46:01 That's not going to work. Okay. But basically what we've put in there is a prompt that says exactly what style you want.
0:46:09 So again, you can use brand colors, you can use brand guidelines, mention that you want curved edges and all that kind of stuff.
0:46:15 But then give it that relevant context. Just copy and paste it into the prompt. Most of it will be useless to it, but it should be very good at picking out the areas which are necessary for that particular thing.
0:46:27 I've had great success with this in the past. Then it will give you that CSS snippet as a result if you've just asked for CSS, and then all you need to do is your usual method of actually uploading it to the global site.
0:46:39 So you would put that into a CSS file. So I use Visual Studio Code. Files goes down, but nevermind, so just copy and paste it into there, and then put it into the CSS override area of your own figure storefront.
0:47:04 And that means wherever it sees those particular IDs, those particular attribute elements, it will apply that styling so it should be on every product page.
0:47:14 Now, you do need to be careful in case it identifies elements which are not what you intended. So once you've put one of these in, just go and have a little search around your site and see if anything else has screwed itself up as a result.
0:47:30 But in most cases, it's nice and easy as that, especially if you're making minor changes. Okay, let's see some other examples we've got here.
0:47:47 So, one we can't see on the actual screen here. And I can see it's already 10 to the hour, so I apologize if I've run over once again.
0:47:54 I'm making a habit of that. Another example which we can't see on the actual front end here is that we can use it to create email templates.
0:48:04 Now, this is something which can be quite annoying most likely on a lot of first-time storefront builds. If you've got 30 different email templates that you need to write, and you're trying to either do it with content templates, or you're trying to do it with the HTML, you're trying to make sure that
0:48:21 everything's there, it sounds the right way, so there's an element of copywriting in there as well, and making sure it's got all the relevant context and content in it as well.
0:48:30 So we can, well, the AI tool, say we can assist with that. So if I go to email message templates.
0:48:40 I've made one example of this, which is on. It was all to paid. is not quite as effective as I'd hoped for the webinar, but I hope everyone's okay.
0:49:05 And basically what I've done here, I've again cheated in giving it the information it needs. So, what I've asked for is some information, well, I've asked it to create an email which covers if an order has just been paid and it's an email that goes to the customer.
0:49:28 But I also need it to know the tokens that it can use. So, a lot of you will be familiar with writing email templates in Vigo and then you've got all these tokens on the right-hand side, which are variable information that you can include in the template.
0:49:44 And you're going to waste a bit of time just going through and try and figure out every single one of these you need in every single little bit.
0:49:50 But you can cheat once again. So all you to do is get all of the relevant tokens from here and give it to the AI model, and then it can probably pull them out, the ones it needs, because they're all quite logically and sensibly named.
0:50:04 So if I just go and inspect that, for example, I could just copy the contents of that entire box, which includes all those tokens.
0:50:16 Give the AI model context as to what those tokens are, so the thing is surrounded by the percentage signs, and then say go and make my template based on this.
0:50:31 And then you can see that it's come out with a fully styled, fully formatted HTML email with all of these things included in it.
0:50:49 And if you just bear with me one second just to find the thing I need to find. Now, I didn't perfect this, but there's the kind of thing it came out with from one run through the AI tool.
0:51:21 So granted it's using the wrong logo, I should have got it to use the white logo. But it's got all these different tokens in there, it's nicely formatted, it's got all this nice information, buttons, order details, address information, and that's all from one single prompt.
0:51:38 It'll save you so much time on all the email formatting, especially if you don't have to do HTML. Okay. I am going to overrun probably, so I apologize if anyone has to go, but the recording will be, will be made available, of course.
0:52:03 So there's a couple of other areas that we've used the AI to generate code in here, one of them is to actually create the formatting for the XML for the multi-part product.
0:52:18 So this is something which probably irritates quite a few people with the multi-part products unfortunately. And it is the config that it requires in the background.
0:52:35 Now, there's lots of things that conflict can do, and there is content on the inferior academy to show how to do that content.
0:52:42 But still, if you've got no familiarization with any code or anything like that, right to the XMLs, looking at this format, it's going to probably freak you out, and you don't really want to have to be putting all this together for yourself.
0:52:56 So, what you could do is, once you've got some background knowledge yourself offers to what kind of information this thing expects, which again is on the academy.
0:53:06 You could say create this XML for me based on this format, research on the inferior academy, what the format's gonna be, and give it the academy URL.
0:53:16 Say like things like I want to preview, I wanted a maximum of two upload areas, maximum of two pages, it should use these pitstop profiles, and then it should be able to go away and populate this entire thing for you to just copy and paste into the XML in the correct format, assuming it's been able to
0:53:34 get the reference material from the infego academy. OK, covering the last bit of code, we have another little widget here, which is this support box, which allows us to do a few different things.
0:53:58 Now, for the most part, that's the same as the last one we saw, which is a combination of HTML, CSS, and JavaScript, but consider other coding languages as well.
0:54:09 So we've got fabrication in here using Redgex. Now, Redgex is used elsewhere in Enfigo, inside Invent 10 bytes, for example.
0:54:21 So you can use the AI tool to sort out Redgex strings for you, which are, from my experience, incredibly complicated because I don't know how to do them, but the tool can do it for you.
0:54:39 That'll do for that one. Okay, next part I want to talk about there's two major sections left. We've got reporting and we've got data formatting.
0:55:00 So, in terms of data formatting, what I've found from my experience again is that AI is a great tool for performing work with a large amounts of data.
0:55:11 And this is things like your formatting, it's like restructuring data, it can be creating brand new documents like spreadsheets, programming and stuff like that.
0:55:28 So I'm going to jump straight into our example for this one. There's two places I think where we've used an example of reformatting data.
0:55:39 Yeah, so one is our pricing. And then the other is actually for bulk importing products. So I'll start off with the pricing.
0:55:48 So as many of you will know, the creation of the utilization of the generic pricing script inside in Figo requires you to have a CSV in the background.
0:56:01 Now, depending on how many attributes and attribute combinations you have, let me just show you an example. To give context, something like this.
0:56:21 So this is the one I actually had AI create for me. So this is the kind of CSV you would need in the background.
0:56:27 Need in the background, it's got things such as the quantity tiers, if you need those, it's got all of the different attributes, options and combinations.
0:56:36 So in my simple model, we're already up to 50 potential lines, where it calls back a particular price. So a certain combination of quantity and attribute selections will give you a certain price.
0:56:49 50 lines in my one simple thing so far, my one simple product with a couple of attributes in it. If you had a very complex one with lots of different attributes and attribute options, then this could get very big, very quickly.
0:57:03 And if you're having to manually create that or construct it in some other way, it could take you a decent amount of time.
0:57:10 But during this with your AI tool is potentially quite easy and quite lucrative time-wise. if I can find it. Okay, so some key things I'll pick out of the prompt that were given to this, so there was pages that were referenced on the Imanfego Academy, showing how this CSV needs to be formatted.
0:57:49 Additional tutorials on the pricing scripts in case it needed to research additional context and that kind of thing. Also, you might give information on what the attributes are and just copy and paste those attribute combinations and the different tier quantities are available.
0:58:07 Other things you can put in there as well based on the level of detail you need from the CSV and just ask it to actually create this as a grid in CSV format.
0:58:16 In my case, I even asked it to do some online market researchers to what the prices were supposed to be, which might be a good initial benchmark if you don't have any prices in mind.
0:58:27 And then it spits out as a result, a quite nice CSV which I can just instantly use in the background of my pricing script.
0:58:37 You can also use it to actually configure the pricing script itself. So this is where we actually go into the product page.
0:58:58 Remember where I'm going. And then we need to basically configure the pricing script. Now, generally speaking, they're fairly easy to set up.
0:59:06 But if you've got no coding experience, I can understand how that might be quite tricky and jarring to do for the first time.
0:59:14 But often more often than not, in Figu, we'll give you context as to how those are supposed to be laid out.
0:59:19 And if you provide that context to the AI tool and say exactly what it is that you want and give it your CSV as a reference, it might be able to create that formatting for you.
0:59:29 So you just copy and paste the result into here. Okay. Two more things. So let's see. I have seen your questions by the way, Chris.
0:59:59 I'm thinking those might be ones I need to answer offline, unfortunately. However, I have seen them. So book So I briefly touched on this in the last webinar as well.
1:00:14 So there's a lot of areas where you can upload information in bulk into your infigo system. So probably the most commonly used area with this is product management.
1:00:26 So where you can sort of import Excel sheets containing all of your product information. You can also do it with customers, although that does raise some privacy issues.
1:00:38 so you should be careful with that. You could do it with, as in if you did it with AI, you can import access permission, scopes, targets and rules, attribute combinations, I think can import, there's loads of different things, but they all need to be in a specific format.
1:00:57 So what happens if you've got that information elsewhere from an old system or another department to throw in that, you are something, and you need to get it in a format that's correct to put into Infigure.
1:01:09 It could be simple, it could mean that there's quite a bit of legwork for you to get the format exchanged.
1:01:15 So why not use a system like this to do it for you, as long as it's not confidential information. So for example, if it's our products, so I've got an example spreadsheet here, which is potential details of a few different products that we might want to bring into our system.
1:01:42 And we can see it's not a full specification of details at all. A few things to note as well is that there is a description, there's SKUs, they have product type descriptions which are completely different from the infigo naming convention.
1:01:57 So we'd need to in most cases you'd need to manually change that. And they've got category information as well. So what category do they sit in?
1:02:05 Whereas when you're looking at the infigo import, the category requirements are a number rather than a name. So you can see where the manual work might end up coming in when you're trying to do this kind of thing.
1:02:19 So giving, so any leg up that you can get with converting this from one sense to the other from one format to the other is gonna give you a lot of benefit.
1:02:30 So what we can do is just give the system the required prompt information to do this change so we can give it an empty version of infigo's format or an existing version of infigo's format just by sort of exporting to excel.
1:02:49 And that will give you the actual file format. So, let's see if this is an example I can use. Let's go to the first couple of lines as an example.
1:03:01 So you can see that this is what you would export. It has all the different columns of potential data. But based on the information we've received from our team, there's only certain columns that we would need to change.
1:03:14 So we still need to do some stuff with the other ones, just to make sure they're not empty. so it doesn't error out.
1:03:21 All we need to do is make sure that tool has all the context it needs to change those over. So, for example, we need to tell it what the conversion between the old system is here, and in Figo is now.
1:03:35 So, uploadable PDF might be multi-part, or custom designer would be mega-edit. Whatever the in Figo terminology it's. And also, we need a way to actually get these product names into their product category names into their category IDs.
1:03:54 Now these are very specific examples. I'm just showing you how you how you could be sneaky and get around this kind of thing.
1:04:00 This might be probably considered the trickiest one because you're going to have to go through and find all of the matching IDs and do it one by one to try and change them over.
1:04:09 I'm going to you can fast-track it with an Excel formula but one thing you could do is steal that information out of your infigo store for it as an example so if we've made our categories there I go that's my list of my categories unfortunately there's no category numbers on there however I can see that
1:04:34 if I hover over the edit button there where it says the link in the bottom some corner, probably too small for you to see, the ID of the category is on that link.
1:04:46 Okay, we can work with that. So if I go and inspect that, to see what information is on there, there we go, I can see that information is on the link.
1:04:56 So if I provide this entire box as code to the AI tool, it should have a comparative link between the name of the category And the ID number that needs to use.
1:05:11 So as long as we give it the prompt context to know what those differences are, it should be able to change all those over.
1:05:17 It's probably not worth it if you've only got sort of 10, 20 products to move over, but if you've got hundreds, it might be worth doing something like this just to expedite that.
1:05:26 that situation, and what we ended up with after running this through the tool was a completely updated, infigo formatted thing with all the correct information, all the correct category IDs, which can then be imported into our system directly.
1:05:58 Okay, one last thing, promise. So the last one I want to talk about is reporting. Now, AI is an incredibly powerful tool when it comes to creating reports and crunching large amounts of data.
1:06:14 We've seen that in other areas like market research. Or if you fed it a spreadsheet or something, we've seen it reorganize data so it could analyze it as well.
1:06:24 It could filter it, it could create visuals from it, whatever you need to do. within an infigo context, the most effective use case for reporting using AI is when it's combined with infigo insights, which uses the meta-based application in the background.
1:06:41 So what meta-based has is very sort of user-friendly wizards where you can, and I know what you won't be familiar with insights too much, but basically we've got all the different data tables in here, which we can link together.
1:06:59 We can get all different data, all different tables and link them all together, and then say which field we want to use, say which, I'm just trying to select the right thing whilst talking, say which fields we want to use, say what we want to filter by, say what we want to summarise by.
1:07:19 It's all fairly straightforward with the wizards, but there's still a learning curve involved with it, especially if you're not use a sort of database technology.
1:07:29 So why don't we expedite this to make the report that we want straight away? So again, this is just a bit of a cheeky method just to save yourself some time.
1:07:38 You'll see that when you start sort of linking different data sets together, all of the relevant columns and column information gets shifted over to the right hand side as a result in the SQL query.
1:07:51 Okay, so I can say, all right, well, we've got our products maybe I want to see how many of those products have been ordered, for example, and maybe who ordered them.
1:08:10 So I can link all of those bits of information together. I'm not sure I even need that order line. That's throwing me out now, because normally does this automatically.
1:08:31 One second. I don't know, it needs the order as well. So what we've got there is a lot of potential columns, a lot of potential information over on the right hand side, which you probably can't see.
1:09:07 And we could use these tools to form at that if we wish to do so. However, if we want to skip the learning curve and all that kind of stuff, then why don't we just get the tool to do it for us.
1:09:21 So I set up a basic example just before we started the webinar on this actually. It probably doesn't make much logical sense, but it will get my point across.
1:09:29 So what I've asked for is to generate SQL code that gives me a data table with certain columns and then certain columns with some calculations as well.
1:09:42 And to create some new information I suppose as well, so things like show me what product it was that was purchased create the product URL that data wasn't even available so it's been augmented from elsewhere so I've given instructions on how to do that.
1:09:55 And then new metrics, things like the day since it was us purchased. Another bits and pieces put in there if it needs to be filtered or refined or if you need to sort it in some way.
1:10:09 And then just copy and paste all of that potential information from here into the AI tool. So it's just got the context it needs.
1:10:18 It's got all the context it needs to create the script it needs. So from there, I can just copy its output, tell MetaBase that I want to just do that as an actual SQL query, it didn't be on my microphone.
1:10:37 And then assuming I've done this correctly, not quite, but almost, that will just give you all of that information straight away without the learning curve of having to figure how to do it all manually in MetaBase.
1:10:54 So again, just a little bit of a time save before you. I've realized I've overrun yet again. My apologies, I really should make these webinars an hour and 15 minutes long.
1:11:08 That's all the major topics I wanted to cover. I hope it has been useful. And again, it's not like an exhaustive list.
1:11:16 It's just to give you ideas as to where you can utilize it. because a lot of people, I think, don't realize how expansive these tools are and where they can help as long as you get creative with it.
1:11:27 So if you do have any questions, I'll try my best to answer them. If there's any of which have not been able to answer online, I'll take them away for afterwards.
1:11:36 But all that's left to be said is thank you very much for listening. I hope it's been useful for you.
1:11:41 The next webinar will be in around six weeks, but I've not decided on a topic yet. So please do let me know if there's anything particularly you want to see.
1:11:49 But yeah, thank you very much. I'll speak to you next time.

Incomplete
Webinar Chapters

Leveraging AI Tools for Efficient Infigo Storefront Builds

 

1. Introduction and Webinar Overview 0:04

generated-image-at-00:00: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

generated-image-at-00:01: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

generated-image-at-00:02:25

  • The webinar is designed for all levels of expertise with AI.

  • Focus on practical applications within Infigo.

 

4. Duration and Format 2:50

generated-image-at-00:02:50

  • The webinar will last no longer than one hour.

  • Recording will be available post-webinar.

 

5. Interaction and Questions 3:06

generated-image-at-00:03: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

generated-image-at-00:04: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

generated-image-at-00:05: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

generated-image-at-00:07: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

generated-image-at-00:09: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

generated-image-at-00: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

generated-image-at-00:18:07

  • AI can assist in generating site maps, market research, and policy recommendations.

 

12. Image Generation with AI 23:05

generated-image-at-00:23:05

  • Discuss how to prompt AI for image generation, including specifications for style and size.

 

13. Copywriting with AI 29:32

generated-image-at-00: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

generated-image-at-00: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

generated-image-at-00: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

generated-image-at-01:11:16

  • Recap of the webinar's key points.

  • Encourage attendees to explore AI tools creatively.

  • Invite feedback on future webinar topics.

Link to Loom

https://loom.com/share/e11b99031c2647339150b813958b6d0e


 

Leveraging Mainstream AI in Your Storefront Builds

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.

Why attend

  • Cut production time and reduce tedious manual work.
  • Boost content quality with AI-assisted proofreading and idea generation.
  • Unlock creativity by generating on-demand concepts and visuals.
  • Free yourself to focus on strategic, high-value tasks—and delight customers.

Housekeeping

  • Duration: 1 hour (maximum)
  • Host & Presenter: Sam Webster | Academy Manager
  • Questions: Drop them into the Livestorm Q&A panel at any time.
  • Recording: A replay will be available on this Infigo Academy page shortly after the event.

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.

The Golden Rules of Prompting

🔥 Hot Tip: Let AI Refine Your Prompt

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.

Your first draft

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.

Ask AI to critique

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.

AI-enhanced prompt

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.

Choosing the Right Tools for your Task

Pick your platform first, then the brain that powers it.

1) Choose your provider

OpenAI ChatGPT

Versatile all-rounder for writing, coding and brainstorming. Plus tier (~£20 / $20 pm) lifts usage caps and unlocks premium models.

Google Gemini

Powered by Google Search, ideal for live research and fresh web info, but also has great all-round capabilities.

Microsoft Copilot

Built into Word, Excel, Outlook and Teams, delivering a secure, integrated experience with your tenant’s data.

2) Pick the right model (OpenAI's ChatGPT is being used for this example)

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.

OpenAI o3

Most advanced reasoning model—excels at complex, multi-step analysis across coding, science, maths and visuals.

GPT-4.5 (preview)

Largest chat model to date with broader knowledge, improved intent-following and fewer 'hallucinations'. My model of choice for copywriting

GPT-4o

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.

3) Keep your data safe

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.

Golden Rules

• 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.

Planning your Storefront Build with AI

Generate sitemaps, playbooks, check-lists and more to get you out of the starting blocks.

Why use AI for storefront planning?

  • Getting started is often the hardest part—let AI structure your thoughts and suggest the first steps to get you up and running.
  • Get your AI tool to search the web to utilise more expansive research recommendations that follow e-commerce UX best practice. You can also ask it to search the Infigo Academy.

Example prompt

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.

Sample AI output

Prompt tips

  • Add as much detail as possible to improve accuracy (audience, regional shipping, plugins).
  • Iterate: once you have the output, request refinements—first drafts are rarely perfect!

🔥 Hot Tip: Ramble First, Refine Later

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.

Ramble your ideas

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.

Ask AI to refine

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.

AI-structured prompt

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 images from a simple text input

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:

  • Brand guidelines / context (colours, typography)
  • Reference your existing images (or free-to-use imagery) showcasing the desired aesthetic
  • Provide full, detailed descriptions. Remember, if you don't specify something, the AI model may take liberties with the output!

Example Workflow

1. Initial generation

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.
Initial AI generated pouch featuring Infigo branding

2. Refine specific areas

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.
Refined AI generated pouch with updated wave pattern and centred icon

3. Final polish

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.

AI-Powered Copywriting for Your Storefront

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.

Where AI delivers value

  • SEO-friendly drafts for product pages, home pages and blogs.
  • Proofreading & QA for emails, notifications and error messages.
  • Dynamic templates with Infigo tokens already in place.
  • Style & tone tweaks so every word feels on-brand.

Drafting SEO-friendly copy & content

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”.

Proofreading & error-checking communications

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]

Crafting dynamic, token-driven templates

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.

Brainstorm blog ideas (bonus)

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.

🔥 Hot Tip: Make AI Audit Its Own Copy

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.

Initial copy prompt

<!-- 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.

Ask AI to critique itself

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.

Example critique output

| 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.

AI-Powered Code Generation & Optimisation

Prototype faster, refactor smarter and keep every snippet on-brand.

Where AI delivers value

  • Brand-compliant UI components in pure HTML / CSS.
  • Clean, documented JavaScript that follows best practices.
  • Framework-agnostic snippets ready to embed anywhere.
  • Lightning-fast refactors so legacy code runs like new.
HTML Snippets

What is it? HyperText Markup Language structures every web page—headings, images, forms, layouts.

How AI helps …

  • Generate new blocks (hero banners, accordions, tables).
  • Refactor messy legacy markup for accessibility.

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.

Prompt Example

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.

Example AI Output (code)

<!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>

Live Result

Summer Print Sale – Save 30%

Hurry – offer ends

Personalised spiral-bound notebook
Personalised Notebook – from £7.99

Customise & Order

© 2025 Your Company Name – Powered by Infigo
CSS Styling

What is it? Cascading Style Sheets control colours, spacing, fonts and responsive layouts.

How AI helps …

  • Create brand-ready utility classes in seconds.
  • Convert HEX palettes into reusable CSS variables.

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.

Prompt Example

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.

Example AI Output (code)

/* ===== 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;}
}

Live Result

Summer Print Sale – Save 30%

Customise & Order

The banner demonstrates looping gradients, a masked rainbow border, animated text and interactive states—no JavaScript required.

JavaScript Interactivity

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.

Prompt Example

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.

Example AI Output (code)

/* ============================================================
   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);
});

Live Result

Vanilla JS, ES6+, no external styles—click the button to generate a burst of confetti that self-destructs after 2 s.

Full Widget (HTML + CSS + JS)

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.

Prompt Example

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.

Example AI Output (code)

<!-- 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>

Live Result

Flash Sale ends in --:--:-- Shop Now

Self-contained banner demonstrates animated CSS, real-time JS logic and accessible HTML—all in one copy-paste block.

Regex Validation

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.

Prompt Example

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

Example AI Output (code)

/**  SKU format: AAA-0000-BB  **/
const SKU_RE = /^[A-Z]{3}-\d{4}-[A-Z]{2}$/;

Live Result

XML Configuration

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.

Prompt

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.

Example AI output

<?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>
JSON 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}

Prompt Example

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.

Example AI Output (code)

{
  /* 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}

🔥 Hot Tip: Give AI the Actual Code Context

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.

Grab the real snippet

<!-- Existing button you want to style -->
<button class="btn btn-primary checkout-btn">Checkout</button>

Tell AI what you need

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.

AI-ready code (example)

<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>

            
”, “” and “” placeholder with your own content before publishing. -->

Pro Tips for Reliable Results

1 · Give Context

Copy existing markup from your browser’s DevTools so the assistant can target real IDs and classes.

Prompt starter

2 · Iterate Fast

Work in a staging storefront, tweak the prompt, re-test – three quick iterations usually beat one long request.

3 · Comment Heavy & Variables First

Ask the AI to add inline comments and surface editable variables at the top of the script for painless maintenance.

Prompt starter

4 · Know Your Limits

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.

Making Print Reports Easier to Read and Act On

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.

  • Ask for charts: “Analyse this CSV and build a bar graph of daily views.”
  • Request summaries: “Highlight this month’s fastest-rising products.”
  • Generate reusable SQL for Metabase or Infigo Insights.

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.

Your copy-ready AI prompt


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)
    
Resulting output table from AI-generated SQL in Metabase

AI-Driven Competitor & Market Research

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.

What to Compare

  • Product range & customisation options
  • Site structure & user journey (clicks from home → checkout)
  • Design-editor capabilities (templates, live preview, mobile UX)
  • Pricing & discount ladders (per-unit, bundles, subscriptions)
  • Shipping, turnaround speeds & fee transparency
  • Upsells & add-ons (finishes, packaging, mailing services)
  • Marketing messages, USPs & social proof
  • Accessibility, page-load speed & conversion nudges (timers, chatbots)

AI Summary — Pricing Demo (condensed)

The bullets below condense a 4-page AI report for brevity.

  • Per-card cost drops from ~£0.12 (100 cards) to ~£0.02 (2 000+), reflecting strong economies of scale.
  • Premium paper, lamination or Spot UV add flat surcharges of roughly £5-£15 per job.
  • Double-sided printing typically adds 25-35 % to the base price.
  • Fast-track production can inflate totals by up to 60 % versus 3-4-day turnaround.
  • Delivery fees (~£5) apply under £50-£55 basket value; free shipping above that threshold.
  • Quantity dropdowns with dynamic price calculators dominate the UX and reinforce bulk savings.
  • Suggested entry-level ladder for your store: 100 £12 → 250 £15 → 500 £20 → 1 000 £30 → 2 000 £45 → 5 000 £80.

Copy-Ready Prompt

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.