Розробка тем

my-theme/
  theme.json                   маніфест: id, назва, версія, стилі
  config/settings_schema.json  глобальні налаштування теми
  sections/<handle>.liquid     секції: Liquid + {% schema %}
  snippets/<handle>.liquid     сніпети для {% render %} і сторінки теми
  assets/                      CSS, зображення, шрифти, іконки
  locales/uk.json, en.json     слова теми для фільтра t
  design/*.json                токени, стилі, шапка, підвал, шаблони сторінок
  README.md                    нотатки автора (не входить у тему)

{
  "storeforma_theme": 1,
  "id": "ua.my-studio.bloom",
  "name": "Bloom",
  "version": "1.0.0",
  "author": "My Studio",
  "description": "Світла тема для квіткових магазинів.",
  "stylesheets": ["kit.css", "theme.css"],
  "kit": "pages",
  "menus": [{"handle": "mega", "name": "Мегаменю"}]
}

node storeforma-agent.mjs theme init ua.my-studio.bloom   # нова тема з Primitive
node storeforma-agent.mjs theme pull ./theme              # або поточна тема магазину
node storeforma-agent.mjs theme check ./bloom             # перевірка на сервері, нічого не зберігає
node storeforma-agent.mjs theme dev ./bloom --open        # перегляд лише для вас: сторінка оновлюється після кожного збереження
node storeforma-agent.mjs theme push ./bloom --publish    # встановити

node storeforma-agent.mjs login --store mystore.storeforma.shop

node storeforma-agent.mjs theme init ua.my-studio.bloom   # нова тема з Primitive у ./ua.my-studio.bloom
node storeforma-agent.mjs theme pull ./bloom              # або поточна тема магазину

node storeforma-agent.mjs theme dev ./bloom --open              # головна
node storeforma-agent.mjs theme dev ./bloom --open --path /shop  # одразу каталог

node storeforma-agent.mjs theme check ./bloom
node storeforma-agent.mjs theme push ./bloom --publish

{
  "storeforma_theme": 1,
  "id": "ua.my-studio.bloom",
  "name": "Bloom",
  "version": "0.1.0",
  "author": "My Studio",
  "stylesheets": ["kit.css", "theme.css"],
  "kit": "pages"
}

{%- assign title = section.settings.title | default: 'sec.picks_title' | t -%}
<section class="bloom-picks">
  <h2 class="bloom-picks__title">{{ title }}</h2>
  <div class="bloom-picks__grid">
    {% for block in section.blocks %}
      {% if block.type == 'product' and block.settings.product %}
        <div {{ block.attributes }}>{% component 'product.card', product: block.settings.product.id %}</div>
      {% elsif block.type == 'note' %}
        <p class="bloom-picks__note" {{ block.attributes }}>{{ block.settings.text }}</p>
      {% else %}
        {% render_block block %}
      {% endif %}
    {% endfor %}
  </div>
  {% if section.blocks.size == 0 and request.design_mode %}<p>{{ 'ui.choose_product' | t }}</p>{% endif %}
</section>

{% schema %}
{
  "name": "Bloom: добірка",
  "settings": [
    {"id": "title", "type": "text", "label": "Заголовок (порожньо — текст теми)", "default": ""}
  ],
  "blocks": [
    {"type": "product", "name": "Товар", "settings": [{"id": "product", "type": "product", "label": "Товар"}]},
    {"type": "note", "name": "Примітка", "settings": [{"id": "text", "type": "text", "label": "Текст"}]},
    {"type": "@app"}
  ],
  "max_blocks": 8
}
{% endschema %}

<article class="bloom-card">
  <a class="bloom-card__media" href="{{ product.url }}">
    {% if product.featured_image %}
      <img src="{{ product.featured_image.src }}" srcset="{{ product.featured_image.srcset }}" sizes="(min-width: 1024px) 25vw, 50vw" alt="{{ product.title }}" loading="lazy">
    {% endif %}
    {% if product.discount_percent %}<span class="bloom-card__sale">−{{ product.discount_percent }}%</span>{% endif %}
  </a>
  <a class="bloom-card__title" href="{{ product.url }}">{{ product.title }}</a>
  {% component 'product.swatches', limit: 5 %}
  <p class="bloom-card__price">{% if product.compare_at_price %}<s>{{ product.compare_at_price }}</s> {% endif %}{{ product.price }}</p>
  {% unless product.available %}<p class="bloom-card__muted">{{ 'ui.sold_out' | t }}</p>{% endunless %}
  {% component 'commerce.add-to-cart' %}
</article>

// locales/uk.json
{"sec": {"picks_title": "Свіжі квіти щодня"}}

// locales/en.json
{"sec": {"picks_title": "Fresh flowers every day"}}

.bloom-picks { max-width: var(--store-container); margin: 0 auto; padding: var(--store-space-12) var(--store-space-4); }
.bloom-picks__title { font-family: var(--store-font-display); font-size: var(--store-text-3xl); color: var(--store-ink); }
.bloom-picks__grid { display: grid; gap: var(--store-space-6); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.bloom-card { display: grid; gap: var(--store-space-2); padding: var(--store-space-3); border-radius: var(--store-radius-lg); background: var(--store-surface); box-shadow: var(--store-shadow-card); }
.bloom-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--store-radius-md); }
.bloom-card__media img { width: 100%; height: 100%; object-fit: cover; }
.bloom-card__sale { position: absolute; top: var(--store-space-2); left: var(--store-space-2); padding: 0 var(--store-space-2); border-radius: var(--store-radius-full); background: var(--store-accent); color: var(--store-on-accent); font-size: var(--store-text-xs); }
.bloom-card__title { color: var(--store-ink); font-weight: 600; text-decoration: none; }
.bloom-card__price { margin: 0; color: var(--store-primary-strong); font-weight: 700; }
.bloom-card__price s, .bloom-card__muted { color: var(--store-muted); font-weight: 400; }

cd bloom && zip -r ../bloom.zip . && cd ..
# Дизайн → Теми → «Імпорт теми з файлу» → bloom.zip
# або: node storeforma-agent.mjs theme push ./bloom