🧩 How to Add a Product Feature Section with Image + Text Layout

This tutorial will show you how to create a clean and modern “Product Feature Section” using Shopify’s Liquid + CSS. You can customize images, text, alignment, spacing, and more—directly from the Theme Editor.

📌 Step 1 — Create Your New Section File

In your Shopify theme, go to:

Online Store → Themes → Edit Code  
→ sections → Add new section  
File name: product-feature.liquid

Paste the following starter structure:

<section class="product-feature-section">
  <div class="product-feature-container">

    <div class="pf-image">
      <img src="{{ section.settings.feature_image | img_url: '800x' }}" alt="Feature image">
    </div>

    <div class="pf-content">
      <h2>{{ section.settings.heading }}</h2>
      <p>{{ section.settings.text }}</p>

      {% if section.settings.button_label != blank %}
        <a href="{{ section.settings.button_link }}" class="pf-button">
          {{ section.settings.button_label }}
        </a>
      {% endif %}
    </div>

  </div>
</section>

<style>
  .product-feature-section {
    padding: 60px 20px;
  }
  .product-feature-container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap;
  }
  .pf-image img {
    width: 100%;
    border-radius: 12px;
  }
  .pf-content h2 {
    font-size: 32px;
    margin-bottom: 15px;
  }
  .pf-content p {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .pf-button {
    display: inline-block;
    padding: 12px 24px;
    background: #111;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s;
  }
  .pf-button:hover {
    background: #333;
  }
</style>

📌 Step 2 — Add Theme Editor Controls (Schema)

At the bottom of the same file, add this schema block:

{% schema %}
{
  "name": "Product Feature Section",
  "settings": [
    {
      "type": "image_picker",
      "id": "feature_image",
      "label": "Feature Image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Why Our Product Is Amazing"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Description",
      "default": "Write a short explanation about this product benefit to help customers understand why it's valuable."
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Label",
      "default": "Learn More"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    }
  ],
  "presets": [
    {
      "name": "Product Feature Section"
    }
  ]
}
{% endschema %}

You now have a fully customizable product feature section.

📌 Optional: Add Image Left / Right Toggle

Upgrade your layout with a simple toggle switch inside the schema:

{
  "type": "select",
  "id": "layout",
  "label": "Image Position",
  "options": [
    { "value": "left", "label": "Image Left" },
    { "value": "right", "label": "Image Right" }
  ],
  "default": "left"
}

Then update your container div:

<div class="product-feature-container layout-{{ section.settings.layout }}">

And add this CSS:

.layout-right {
  flex-direction: row-reverse;
}

🎉 You're Done!

Go to your Theme Editor and add the new section: “Product Feature Section”

• Upload your product image
• Edit the heading + text
• Set the button label/link
• Optional: switch the image to right side

This reusable feature block works great for product pages, landing pages, and homepages.