Vibe Coding Is Ecommerce’s New Excel

Relying on AI-generated software can make ecommerce operators nervous until they realize the process is a bit like using a spreadsheet.

The term “vibe coding” describes an AI-first approach to software development. Non-technical owners and managers can describe a desired software tool in natural language via a GPT-like chat and have AI produce it.

The approach has significant potential for ecommerce, allowing companies to quickly experiment with custom software tools at a very low cost, nearly zero in some cases.

Vibe coding will not replace platforms such as Shopify or even developers, but it can help teams prototype, automate, and test ideas quickly — much like Excel did for finance.

Vibe Coding

Andrej Karpathy, a prominent computer scientist and former AI director at Tesla, coined the phrase vibe coding in February 2025.

Karpathy suggested allowing AI to generate most of the code, while humans provide natural language goals, feedback, and corrections.

The idea rests on five pillars.

• Natural language. Programming instructions are conversational, as in “make a pop-up modal with a discount banner for a WooCommerce store.” AI acts on human intent.

• Prototyping. AI produces prototypes rapidly, providing a minimal version of the desired application in minutes.

• Iteration. The AI will not get it right with the first or even second prototype. Rather, vibe coding tools receive human feedback with each iteration and try again.

• No coding skills. Understanding the coding process of AI is helpful, but it requires no programming skills.

• Limited scope. Vibe coding will not replace software engineers at scale. Mission-critical applications still require professionals, much like spreadsheet power-users eventually graduate to advanced systems or databases.

Like a Spreadsheet

For vibe coding, follow your instincts and instruct the AI on what the software should do.

Entrepreneur Joe Procopio likened vibe coding to the introduction of spreadsheets in a recent Inc. opinion article.

“In 1979, when Apple released VisiCalc, it was the killer app that made everyone’s job and life a lot easier. It was visual math in a box, unheard of at the time,” wrote Procopio.

Spreadsheets changed the world because they provided a visual layer over math and logic for non-programmers.

Folks using spreadsheets — then and now — did not need to know formulas or programming; instead, they typed values into cells, dragged across a table, and suddenly they had payroll models, inventory systems, and even entire annual budgets.

Vibe coding, Procopio argues, is a similar visual layer, but it abstracts software instead of math. An operator describes what the software should do in plain language, and the AI translates it into working code.

Applying the Analogy

Procopio’s analogy applies to ecommerce dashboards, automations, and even limitations.

Dashboards

Imagine an ecommerce shop wants to test whether adding social proof to a widget boosts conversions. The store owner might sign up for two or three apps — testing, upselling, social — to run the experiment for $150 per month in subscriptions, plus web development.

With vibe coding, it might take a few hours to describe and iterate a custom app that manages the testing, upselling, and social proof in one.

A spreadsheet enables a business to build its own reporting dashboard without hiring a data analyst. Vibe coding similarly creates a front-end experiment without subscribing to apps or hiring a developer.

Put another way, many early-stage ecommerce founders modeled business plans in Excel long before they had accountants. Likewise, ecommerce entrepreneurs can model new features via vibe coding before paying developers.

Automations

Spreadsheet macros are similar in concept to vibe coding automations.

For example, a marketing manager might download advertising performance reports from multiple sources, reformat them via macros, and upload the data into accounting software. With vibe coding, the manager can describe this workflow and generate a tool to automate it.

Other lightweight automations could include:

• Converting supplier CSVs into Shopify’s import format.
• Auto-generating invoices from order exports.
• Flagging orders with mismatched billing and shipping addresses.

These are tedious, repetitive jobs that AI-generated scripts can handle much like a macro in Excel.

Limitations

My final comparison from Procopio’s spreadsheet analogy is knowing when to stop.

It’s a bad idea to run an entire ecommerce shop out of a few complicated Google Sheets, and vibe coding will not replace Shopify or any other software that solves robust problems or requires security and reliability.

Unlocking Vibe Coding

In short, vibe coding is a creative, iterative, AI-driven approach to building software where natural language replaces syntax, speed replaces polish, and experimentation replaces structure.

Making vibe coding as approachable as a spreadsheet means that just about any ecommerce operation can automate workflows, prototype features, and test ideas.

Merchants’ Guide to Optimizing CSS

Cascading Style Sheets bring life to a website. CSS controls the appearance of HTML elements such as colors, fonts, layouts, and animations. But CSS can quickly become a tangled web of bloated and outdated styles and redundant rules. The result is often slower load times and complicated troubleshooting.

Optimizing CSS files avoids those snafus.

Verifying CSS

Start by verifying the state of your CSS files.

• Browser tools. Open a website in Chrome or Firefox, right-click anywhere on the page, and select “Inspect.” Under the “Network” tab, filter by “CSS” to see each stylesheet’s size and load time.

PageSpeed Insights identifies speed optimizations such as this example for unused CSS.

Other tools can simplify the cleanup process.

• UnusedCSS is a user-friendly tool that scans your website, identifies unused CSS, and generates a streamlined version. Enter your URL and let the tool do the heavy lifting.

• CleanCSS offers an online CSS minifier and optimizer. It strips out unnecessary spaces and comments and removes redundant code, resulting in a leaner stylesheet.

• CSS Lint doesn’t directly remove unused CSS; it highlights inefficiencies and potential errors. Use it to pinpoint areas where your CSS can be streamlined and improved.

For example, these unused styles for an old banner should be removed:

.banner { background: #f4f4f4; padding: 20px; }
.banner__title { font-size: 2em; }

The active styles remain:

.header { background: #fff; padding: 10px; }
.header__logo { height: 50px; }

Optimizing CSS

Once you’ve removed the unused code, the next step is optimizing what remains. Here are my go-to tactics.

• Minification removes unnecessary characters (e.g., spaces and comments) from your CSS, reducing file size without affecting functionality. Minifier.org is my top tool.

• Combine multiple CSS files into one. Fewer HTTP requests mean faster load times. However, if critical CSS is needed immediately and non-critical CSS can be loaded later, consider splitting them strategically.

• Adopt a naming convention. Structured naming such as BEM helps avoid conflicts and redundancy and makes your CSS more readable and easier to optimize.

Leaner CSS

Comment strategically. Comments are useful for clarity, but excessive or outdated comments can clutter your files. Keep them relevant and update them as your code evolves.

/* This is a comment */

Responsive design. CSS media queries adapt the content to the users’ device resolution (size). However, instead of writing multiple similar queries, consider a mobile-first approach where you define the base styles and then add modifications for larger screens.

/* Base styles for mobile devices */
.container {
padding: 10px;
font-size: 16px;
background-color: #f0f0f0;
}

/* Styles for tablets and larger screens */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 18px;
background-color: #e0e0e0;
}
}

/* Styles for desktops */
@media (min-width: 769px) {
.container {
padding: 30px;
font-size: 20px;
background-color: #d0d0d0;
}
}

Accessing CSS Files

Merchants can usually access CSS files in ecommerce platforms via the control panel or an FTP client.

Shopify. Modify CSS by logging into the admin panel, navigating to Online Store > Themes, and clicking Actions > Edit code on your active theme. In the code editor, find the CSS files in the “Assets” folder (e.g., component-discount.css, theme.css). Edit the files and save your changes to see them applied on your storefront.

PrestaShop themes typically store CSS files in the theme directory (often under /themes/your_theme/assets/css). Access and modify these files using an FTP client or via the built-in theme editor in the PrestaShop back office (if accessible). After making changes, remember to clear the cache so updates are reflected on the live site.

Magento 2. CSS is part of your theme’s structure and is usually found in the directory app/design/frontend/[Vendor]/[theme]/web/css (or as .less files under web/css/source) in modules. It’s best to create a child theme or override the default theme’s CSS files rather than editing core files directly. Once you’ve made your changes, run the static content deployment command (bin/magento setup:static-content:deploy) and flush the cache to apply the updates. Note that the static content deploy will temporarily put the website in maintenance mode.

NetSuite SuiteCommerce typically stores CSS files in the theme’s assets folder. Modify these through your local development environment or the NetSuite File Cabinet. If you’re using Sass or another preprocessor, make changes to the source files, compile them, and deploy the updated assets to your site.

WooCommerce’s CSS files typically reside in the active WordPress theme. Edit your theme’s style.css file directly or, preferably, create a child theme to override the default styles without affecting future updates. Alternatively, add custom CSS via the WordPress Customizer under Appearance > Customize > Additional CSS.

For other platforms, head to the documentation and search for “css asset management” or something similar. In my experience, every platform provides guidance on implementing or changing CSS.

Learn More

GenAI Is a Potent Ecommerce Coding Tool

Much is made of generative artificial intelligence’s impact on search, content, and processes, but it’s also a potent coding tool that could help ecommerce businesses of all sizes.

While they have yet to transform a novice into a master programmer, ChatGPT and its competitors can produce functional code that marketers and merchants can paste into apps and automation workflows.

An example can make the point.

Posting to Shopify Blog

The content-then-commerce model is big business. Content attracts readers to convert into buyers. However, Shopify merchants often encounter a problem.

While it excels at many things, Shopify’s default blog editor — think content engine — lacks robust features.

For instance, a YouTube URL in the blog editor produces nothing more than text. It does not automatically expand into a video, requiring merchants to paste HTML for that purpose.

In contrast, the same YouTube URL in the WordPress.com editor results in a responsive embedded video that shrinks and expands to match a visitor’s screen. This is the behavior most content marketers expect.

The Shopify blog editor requires users to paste HTML for an embedded video.

A solution is bypassing the Shopify editor altogether. What if a marketer could compose content in a tool such as Google Docs — with images, tables, and YouTube videos — and then auto-load it into a Shopify blog?

I prompted ChatGPT to generate the code for just such an app.

The AI Solution

ChatGPT’s solution had two parts.

Apps Script is accessible from any Google Doc and provides a development environment wherein Google application programming interfaces (APIs) are available as services. The code used is essentially JavaScript.

Google Apps Script is a development environment available in Google Docs and other Google applications.

ChatGPT produced detailed code that could be copied and pasted into the Apps Script’s environment, listing the process step-by-step.

ChatGPT’s Apps Script had six functions.

• postArticleToShopify() — this was the primary function. It calls the supporting functions and ultimately connects to the Shopify API.

• convertBodyToHTML(body) — given the document body, this function does most of the work. It identifies if a particular element in the document body is a bulleted list, a table, or a paragraph. Paragraphs are tricky since they can contain text, headings, images, or a link.

• extractYouTubeVideoId(url) — finds the YouTube ID in a URL string.

• generateYouTubeEmbed(videoId) — given a YouTube video ID, this function builds a set of HTML tags that result in a responsive embedded video.

• formatCurrentDate() — is a helper function that retrieves and formats the current date into the publication date for the blog post.

• escapeHTML(text) — is a helper function that removes a set of characters that could cause problems when the HTML is sent to Shopify’s API.

The most surprising part of ChatGPT’s code generation was its familiarity with the App Script and Shopify API requirements. ChatGPT knew that Shopify’s API could not receive an image as a file but had to be encoded and passed as data.

Custom Shopify App

There was one last step. In Shopify, I had to navigate to the “Apps and sales channels” tab in the platform’s settings. From there, I created, authorized, and installed a custom app. The goal was to collect an API access token allowing the App Script to post content to the Shopify Blog.

Creating the custom app provided access to the API token.

Content Posted

In less than 30 minutes and ChatGPT’s code, I completed a working solution to compose content in a Google Doc and have it appear on Shopify.

ChatGPT’s code transformed a Google Doc into a complete blog post in Shopify.

The process is repeatable. Anyone could compose content in Google Docs — with images, tables, and YouTube URLs — and produce a clean and responsive blog post in Shopify.

Here is a PDF of ChatGPT’s complete Apps Script.

Implications

ChatGPT’s initial solution had a few glitches.

• ChatGPT did not understand precisely how Google Doc files are structured. Its initial code looked for images and links at the same level of the document hierarchy as a table or paragraph. In practice, these elements were inside a paragraph element, i.e., children of a paragraph element.

• When it generated the function to create the responsive HTML for the YouTube video, ChatGPT loaded the image twice. Changing the variable assignment solved the issue.

• The code is not perfect. In some places, it should be refactored to improve readability and function.

• The Shopify API required a blog ID that was not easy to retrieve. Ultimately, I used the API and a development tool called Postman to obtain it.

Nonetheless, the example shows ChatGPT can generate useful code, especially for a user with some technical know-how. What’s more, the process was fast. I have written many Apps Scripts. This one would have taken much longer without ChatGPT.