Vibe Coding on Shopify: Build Custom Sections Without Using Any Apps

by

What if you could redesign your Shopify storefront without touching Liquid, hiring a developer, or installing another app?

Thanks to large language models (LLMs) and Shopify’s Online Store 2.0, you can now build and customize your store using plain language — a method known as vibe coding.

Instead of writing code, you describe what you want:

“Make it look like this.”

“I want 5 swipeable videos.”

“Don’t use any apps — just code I can paste.”

That’s vibe coding in action — a term coined by Andrej Karpathy to describe the emerging practice of coding by vibes, not syntax.

Who Benefits from Vibe Coding?

Shopify vibe coding is a game-changer for anyone who wants to make updates to Shopify websites but doesn’t know how to code:

  • Shopify Store Owners: Customize your store without coding knowledge.
  • Ecommerce Marketers: Rapidly test and implement ideas without developer delays.
  • Designers: Gain creative autonomy without the need for engineering support.

Building a Video Carousel Without Apps

In this guide, we’ll recreate a “See it in Action” video carousel like the one on Anyday.com — but instead of using an app, we’ll build it vibe coding on Shopify.

And while we’re focusing on a video carousel section for this guide, the exact same vibe coding process can be applied to other common Shopify site updates — many of which store owners are currently solving with clunky apps or expensive developer work:

  • Create branded FAQ sections for product pages
  • Create reusable, branded content blocks
  • Customize content and layout of your 404 and other utility pages
  • Replace app-based popups with custom newsletter opt-ins
  • Add trust badge rows or review snippets to product pages
  • Display collection-specific banners and CTAs
  • Build slim announcement bars without using apps

Once you learn this Shopify vibe coding workflow, you can roll out these upgrades faster, cleaner, and with full creative control. Let’s get started.

Step 1: Generating Your Shopify Section Code

First, let’s transform your concept into code with the assistance of AI.

For this tutorial, I’ll be using ChatGPT (GPT-4o), but you can use Claude, Gemini, or Grok — all of which can generate valid Shopify 2.0 section code when guided with clear, structured prompts.

To get the best results, your prompt should:

  • Define Functionality: Clearly describe the section’s purpose and behavior (e.g., a carousel of swipeable videos).
  • Provide Context: Include 2–3 screenshots of your current Shopify setup, such as the Edit Theme Files page and the Customize Theme interface.
  • Share Inspiration: Offer 2–3 screenshots or URLs of design inspirations. For instance, we used desktop and mobile views of Anyday.com’s “See it in Action” section, along with a close-up of the video interaction.
  • Request Best Practices: Ask for clean, modern code that incorporates semantic HTML, lazy-loading for performance, and accessibility features.

Initial Prompt Example:

Here’s the exact prompt I used to kick off my vibe coding session for the “See it in Action” video carousel — paired with the screenshots I provided to guide the model:

“Create a Shopify 2.0 section called shorts-carousel.liquid that displays a responsive, fast-loading “See it in Action” video carousel formatted for both mobile and desktop. The user should be able to input up to 5 Youtube shorts video URLs. Each video should display a clean thumbnail preview and play seamlessly when tapped or clicked. Ensure the design is swipeable on mobile, keyboard-accessible on desktop, and optimized for fast performance using lazy-loaded iframes and semantic, accessible markup.”

Your first AI-generated code may not work perfectly. That’s normal. You’ll likely need to troubleshoot and refine the code with further prompts. We’ll cover that in Step 2.

Step 2: Create Your Shopify Section File

Now that your AI-generated section code is ready, let’s turn it into a real, working section inside your Shopify theme. Follow these steps:

  1. In your Shopify Admin, go to: Online Store > Themes > Edit Code
  2. In the sections folder, click Add a new section
  3. Name it: see-it-in-action-carousel.liquid
  4. Paste the code you got from Step 1 into this new file
  5. Click Save

What if you see an error?

Don’t worry — it’s normal for the first version of the code to break.

Here’s what to do to fix it:

  1. Screenshot the error: Capture the entire Shopify code editor screen, including the red error message at the top and the section of code it points to.
  2. Copy the error message text: Select and copy the exact error message (e.g., Expected close_square but found pipe)
  3. Ask ChatGPT to fix it using this prompt:
    • Text input:
      • “The code you gave me has an error. Please fix it and rewrite the full version so I can paste it into Shopify. Here’s the error I got” + Add the error message text here + “. For context, I’m also attaching screenshots.”
    • Image input:
      • Upload your screenshot
  4. Paste the new version into your Shopify section: Copy the fixed code from ChatGPT and replace your old code. Click Save.
  5. Repeat if needed: Still broken? Just send the updated error and screenshot back to the AI. Each round gets you closer.

Always include both the error message and a screenshot of your code editor so the AI has full context to debug accurately.

Step 3: Add the Section to Your Shopify Storefront

Now that your custom section is live in your theme code, it’s time to visually place it on your storefront using Shopify’s Customizer. How to Add the New Section:

  1. Go to Online Store > Customize in your Shopify admin
  2. In the top bar, choose the page template where you want this section to appear (e.g., homepage, product page, or create a new one)
  3. Click Add Section and select “See it in Action Carousel”
  4. Paste in your YouTube Shorts URLs and click Save

That’s it — your custom carousel is now live. You’ve just built and deployed a fully custom vibe-coded Shopify section without apps, plugins, or writing a single line of Liquid yourself.

Step 4: Test, Refine, and Iterate

Before publishing, take a quick look at how your section looks and feels. The goal is to make sure it’s smooth, easy to use, and aligned with your brand.

On Mobile

  • You can swipe left and right through the videos
  • Each video fits nicely on the screen without being too small or too wide
  • When you tap a video, it plays right away — no lag, no weird behavior
  • The section stays within the screen — no unexpected scroll or layout issues

On Desktop

  • All five videos are visible in one row without needing to scroll
  • Thumbnails are clear, evenly spaced, and click without issues
  • There are no sudden jumps, scrollbars, or broken layouts

Experience & Performance

  • Thumbnails show up fast, without slowing the page down
  • Videos only load when someone clicks to watch — keeping things lightweight

If something isn’t working as expected — or if you simply want to improve the layout, tweak the design, or adjust how the section behaves — this is where iteration comes in.

How to Iterate Effectively

This is the core of vibe coding: refining your section through small, intentional feedback loops using clear thinking, context, and collaboration with AI. Here’s how to do it well:

  1. Spot what’s not working.
  2. Think through the logic — what was supposed to happen?
  3. Provide clear context — describe the issue, include screenshots, and state your expected result.
  4. Ask the AI to regenerate the full section or fix the error.
  5. Implement changes one at a time — then test again.

Example Prompt

“The video carousel is overflowing on mobile. Each card should be 50vw and swipeable like on Anyday.com. Here’s a screenshot of how it looks now. Please fix this and regenerate the full Liquid section so I can paste it into Shopify.”

This structure combines logic, frameworks, and context — and allows the AI to actually help.

Need a Working Base? Use This Fallback Code

If your see-it-in-action-carousel.liquid still isn’t working after a few iterations, copy and paste the fallback code below into your section file:

Liquid
{% schema %}
{
  "name": "See it in Action Carousel",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "See it in action"
    },
    { "type": "url", "id": "video_1", "label": "YouTube Shorts URL 1" },
    { "type": "url", "id": "video_2", "label": "YouTube Shorts URL 2" },
    { "type": "url", "id": "video_3", "label": "YouTube Shorts URL 3" },
    { "type": "url", "id": "video_4", "label": "YouTube Shorts URL 4" },
    { "type": "url", "id": "video_5", "label": "YouTube Shorts URL 5" }
  ],
  "presets": [
    { "name": "See it in Action Carousel" }
  ]
}
{% endschema %}

<style>
.video-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}
.video-carousel::-webkit-scrollbar {
  display: none;
}
.video-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}
.video-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.video-card iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}
.video-card .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.video-card .play-icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 16px solid #000;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
@media (max-width: 768px) {
  .video-card {
    width: 50vw;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const cards = document.querySelectorAll(".video-card");
  cards.forEach(card => {
    card.addEventListener("click", function () {
      const id = card.dataset.videoId;
      const iframe = document.createElement("iframe");
      iframe.src = `https://www.youtube.com/embed/${id}?autoplay=1`;
      iframe.loading = "lazy";
      iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
      iframe.allowFullscreen = true;
      card.innerHTML = "";
      card.appendChild(iframe);
    });
  });
});
</script>

<div class="section section--spacing">
  <div class="page-width">
    {% if section.settings.title != blank %}
      <h2 class="h2 text-center mb-4">{{ section.settings.title }}</h2>
    {% endif %}
    <div class="video-carousel">
      {% for i in (1..5) %}
        {% assign key = "video_" | append: i %}
        {% assign url = section.settings[key] %}
        {% if url contains 'shorts/' %}
          {% assign video_id = url | split: 'shorts/' | last | split: '?' | first %}
          <div class="video-card" data-video-id="{{ video_id }}">
            <img
              src="https://img.youtube.com/vi/{{ video_id }}/hqdefault.jpg"
              alt="YouTube Shorts Preview"
              loading="lazy"
            />
            <div class="play-icon"></div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
Expand

Final Step: Hit “Publish”

If it looks good and feels aligned with your brand, go ahead and publish. You’ve just created and deployed your first vibe-coded component — start to finish.