shopify theme designer

I have created the Featured Product section using Online Store 2.0 architecture. This section integrates directly with the Shopify Theme Editor, allowing merchants to select products and toggle visibility settings without touching code.

Featured Product Section

{% comment %} sections/featured-product.liquid {% endcomment %}
<div class="featured-product page-width section-{{ section.id }}-padding">
  <div class="grid grid--1-col grid--2-col-tablet">
    <div class="grid__item">
      {%- if section.settings.product.featured_image != blank -%}
        {{ section.settings.product.featured_image | image_url: width: 800 | image_tag: 
          loading: 'lazy',
          sizes: '(min-width: 990px) 50vw, 100vw',
          widths: '400, 800, 1200'
        }}
      {%- else -%}
        {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
    </div>
    
    <div class="grid__item">
      {%- if section.settings.heading != blank -%}
        <h2 class="h1">{{ section.settings.heading | escape }}</h2>
      {%- endif -%}

      {%- if section.settings.show_vendor and section.settings.product.vendor != blank -%}
        <p class="caption-with-letter-spacing">{{ section.settings.product.vendor }}</p>
      {%- endif -%}

      <h3>{{ section.settings.product.title | default: "Example Product Title" }}</h3>
      <div class="price">{{ section.settings.product.price | money }}</div>
      
      {%- if section.settings.product != blank -%}
        <a href="{{ section.settings.product.url }}" class="button button--primary">View Details</a>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Featured Product",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Featured Product"
    },
    {
      "type": "product",
      "id": "product",
      "label": "Product"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Featured Product"
    }
  ]
}
{% endschema %}

Next steps

1. Upload this file to your theme's /sections folder.
2. Open the Theme Editor and add the "Featured Product" section to any JSON template.
3. Run shopify theme check to validate the Liquid syntax against your specific theme environment.