There’s been a lot of talk about how generative artificial intelligence will impact search, content, and process, but it’s also a powerful coding tool that can benefit e-commerce businesses of all sizes.
ChatGPT and its competitors don’t go so far as to turn beginners into master programmers, but they can create functional code that marketers and merchants can paste into their apps and automation workflows.
An example will illustrate the point.
Post to the Shopify blog
of Content and Commerce Modeling is big business. Content attracts readers Convert However, Shopify merchants often run into problems.
Shopify’s default blog editor (think of it as a content engine) is great in many ways, but it lacks powerful features.
For example, entering a YouTube URL in the blog editor will only generate text – it won’t automatically expand into a video, and the seller will need to paste in the HTML to do that.
In contrast, if you enter the same YouTube URL in the WordPress.com editor, you’ll see a responsive embedded video that scales to fit your visitor’s screen – the behavior most content marketers expect.
In the Shopify blog editor, you will need to paste the HTML for your embedded video.
The solution is to bypass the Shopify editor entirely. Create content Can I create a document in a tool like Google Docs with images, tables, and YouTube videos and then automatically import it into my Shopify blog?
I told ChatGPT to generate the code for just such an app.
AI Solutions
ChatGPT’s solution consists of two parts.
App Script Accessible It provides a development environment that can be accessed from any Google Doc and uses Google Application Programming Interfaces (APIs) as a service. The code used is primarily JavaScript.
Google Apps Script is a development environment that works with Google Docs and other Google applications.
ChatGPT listed the process step by step and generated detailed code that you can copy and paste into your Apps Script environment.
ChatGPT’s Apps Script had six functions:
- Post article to Shopify() — This is its main function. It calls supporting functions and ultimately connects to the Shopify API.
- Convert body text to HTML (body text) — Given a document body, this function does most of the work: it identifies whether a particular element in the document body is a bulleted list, a table, or a paragraph. Paragraphs can be tricky, because they can contain text, headings, images, links, etc.
- Extract YouTube video ID (URL) — Searches for a YouTube ID in a URL string.
- Generate a YouTube embed video ID — Given a YouTube video ID, this function builds a set of HTML tags that generate a responsive embedded video.
- Format the current date() — is a helper function that takes the current date and formats it into the publication date of a blog post.
- escapeHTML(text) — is a helper function that removes character sets that may cause issues when the HTML is sent to Shopify’s API.
The most surprising thing about ChatGPT’s code generation was its familiarity with App Script and Shopify API requirements: ChatGPT knew that Shopify’s API cannot accept images as files, but needs to be encoded and passed as data.
Custom Shopify Apps
There was one last step: in Shopify, I had to go to the Apps & Sales Channels tab in my platform settings. From there, I created a custom app, authorized it, and installed it. The goal was to collect an API access token so that the App Script could post content to the Shopify blog.
When you create a custom app, it provides you with access to an API token.
Posted Content
With some ChatGPT code and less than 30 minutes, we had a working solution for creating content in Google Docs and displaying it in Shopify.
ChatGPT’s code transformed a Google Doc into a full blog post for Shopify.
This process is repeatable: anyone can create content in Google Docs with images, tables, and YouTube URLs, and then create a clean, responsive blog post in Shopify.
Click here for ChatGPT PDF Full Apps Script.
Implications
ChatGPT’s original solution had some issues.
- ChatGPT did not understand the exact structure of Google Doc files: the initial code was looking for images and links at the same level of the document hierarchy as tables and paragraphs, when in fact these elements were inside the paragraph element, i.e. as children of the paragraph element.
- When generating a function to create responsive HTML for a YouTube video, ChatGPT loaded the image twice. By changing the variable assignment, the issue was resolved.
- The code is not perfect. Refactoring Improves readability and functionality.
- The Shopify API required a blog ID which was not easy to obtain. I ended up getting one using the API and a development tool called Postman.
Still, this example shows that ChatGPT can generate useful code, especially for users with technical knowledge. Moreover, the process was fast. I’ve written a lot of Apps Scripts, and without ChatGPT, this script would have taken a lot longer.
