Step-by-Step Guide: Building a Shopify Section with ChatGPT

Learn how to turn a design idea into a fully functional Shopify section using ChatGPT, Liquid, and the theme editor — complete with images, color controls, and responsive layout.

🚀 Introduction

I recently needed a custom highlights section for my Shopify store that would:

• Show 4 product highlights with icons and short text
• Support background color customization from the Shopify editor
• Work across both old themes and Online Store 2.0
• Be simple enough to copy-paste into any project

Instead of digging through docs for hours, I asked ChatGPT to help me build this.

Here’s a step-by-step of how I built it using AI — with full code examples and screenshots.

---

🧑‍💻 Step 1: The Idea

I had a screenshot of a layout from Chamberlain Coffee that I wanted to replicate.

I wanted it to look like this:

• A heading
• 4 icon+text columns
• Customizable background color
• Mobile responsive

So I uploaded the screenshot to ChatGPT and said:

“I want to build this section for Shopify theme both old & new. So help me to build liquid section.”

---

🛠 Step 2: Generate a Base .liquid Section File

ChatGPT gave me a complete sections/coffee-highlights.liquid file.

It used:

• image_picker for uploading icons
• text inputs for titles
• color setting for background
• Flexbox-based layout for responsiveness

Sample Code

<div class="coffee-highlights-wrapper" style="background: {{ section.settings.background_color }}; padding:40px 0; text-align:center;">

  <h2 style="font-size:28px; font-weight:bold; margin-bottom:30px;">{{ section.settings.section_title }}</h2>

  <div class="highlights-grid" style="display:flex; flex-wrap:wrap; justify-content:center; gap:30px; max-width:1000px; margin:0 auto;">

    {% for i in (1..4) %}
      {% assign icon_key = "highlight_" | append: i | append: "_icon" %}
      {% assign title_key = "highlight_" | append: i | append: "_title" %}
      {% assign icon = section.settings[icon_key] %}
      {% assign title = section.settings[title_key] %}

      <div class="highlight-item" style="flex: 1 1 200px; max-width: 220px;">
        {% if icon != blank %}
          <img src="{{ icon | image_url: width: 80 }}" alt="Highlight Icon {{ i }}" style="margin: 0 auto 15px;" />
        {% endif %}
        <p style="font-size:16px; line-height:1.4;">{{ title }}</p>
      </div>
    {% endfor %}

  </div>
</div>

---

Step 3: Adding Custom Background Color Support

Next, I told ChatGPT:

“I want to add some background colour in theme settings as well, not in custom css”

It guided me to add this inside the schema:

{
  "type": "color",
  "id": "background_color",
  "label": "Background Color",
  "default": "#f3f3f3"
}

Then I used it in the HTML wrapper:

style="background: {{ section.settings.background_color }};"

Now I could change the background visually from the Shopify editor — no hardcoded styles!

---

Step 4: Uploading Icons via image_picker

For each of the 4 highlights, I added image fields in the schema:

{
  "type": "image_picker",
  "id": "highlight_1_icon",
  "label": "Highlight 1 Icon"
}

This created a simple image upload field in the Theme Editor. ChatGPT also reminded me I could use .svg, .png, or .webp icons.

---

Final Section Schema (Shortened)

{% schema %}
{
  "name": "Coffee Highlights",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Chamberlain Coffee is always:"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f3f3f3"
    },
    {
      "type": "header",
      "content": "Highlights"
    },
    {
      "type": "text",
      "id": "highlight_1_title",
      "label": "Highlight 1 Title",
      "default": "Sustainably & ethically sourced"
    },
    {
      "type": "image_picker",
      "id": "highlight_1_icon",
      "label": "Highlight 1 Icon"
    },
    ...
  ],
  "presets": [
    {
      "name": "Coffee Highlights",
      "category": "Custom"
    }
  ]
}
{% endschema %}

---

Step 5: Making It Mobile-Friendly

I wanted a bit more control for small screens. So ChatGPT suggested using a <style> block:

<style>
  .highlight-item {
    flex: 1 1 200px;
    max-width: 220px;
  }
  @media (max-width: 600px) {
    .highlight-item {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }
</style>

Now the layout stacked on mobile — perfect!

---

Conclusion

In less than 30 minutes, I was able to:

• Upload a screenshot
• Talk to ChatGPT like a teammate
• Get a fully working .liquid section
• Customize colors and content easily
• Make it responsive and reusable

---

Final File Structure

/sections/
  coffee-highlights.liquid

---

💡 Pro Tips

• You can extend this with blocks instead of hardcoded 4 highlights
• Add heading tag choice (h1/h2/h3) for better accessibility
• Use range inputs for padding/margin if needed

---

🙋 Want to Try This?

Just ask ChatGPT:

“Help me build a Shopify section like this image…”
And upload a screenshot. It’s that simple.