Shopify Theme Development Basics

theme/
├── layout/
│   └── theme.liquid
├── templates/
│   ├── index.json
│   └── product.json
├── sections/
│   └── hero.liquid
└── assets/
    └── theme.css

{% for product in collections.featured.products limit: 4 %}
  <article class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </article>
{% endfor %}

{% schema %}
{
  "name": "Hero banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Welcome to our store"
    }
  ]
}
{% endschema %}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}