Ben Bu İşte Neredeyim? #1

Evet benim neyim eksik bende yapacağım dediğim bir andayım.

Bu cümleyi yazdığım an neredeyse pişman oldum, bunu özellikle belirtmek istiyorum.

Ben de büyük ihtimalle çoğu zaman karşılaştığım bir ikilemden yola çıkarak, kendim nasıl çözümler ürettiğimi anlatmak istedim. Şu an güncel olarak Shopify geliştiriyorum. Güncel bir proje için en uygun çözüm gibi göründü.

Ben bıraktığımda hâlâ Dawn vardı ve şanslı mı şanssız mı olduğumu hâlâ anlayamadığım yeni bir update ile geri dönmüş oldum. Winter ’26 olarak geçiyor. Shopify buna “Renaissance” da demiş.
Evet, yine o kelime! Onlar da eksik kalmamış ve gerekli gereksiz trene binmişler.

Shopify tarafına az yabancı olanlar için yukarıda bahsettiğim Dawn aslında bir Shopify teması. Çok temel bir altyapı oluşturuyor gibi düşünebilirsiniz. Kendileri de öyle pazarlıyor. Kendi içinde birçok özellik ile birlikte geliyor ve üzerine geliştirme yapmaya uygun. Çoğu senaryo için ideal kalıyor.

Dipnot: İlgilenenler için daha temel bir iskelet tema da var. Benim şu an için cesaret edemediğim ama merak ettiğim bir şey.

İşte burası değişti.

Artık Dawn yok. Yeni varsayılan tema Horizon.
Ufak bir bilgi daha: Dawn gibi Horizon teması da birçok farklı isimle ve farklı tasarımla geliyor ama temel yapı Horizon.

Şimdi bu kadar şeyi neden anlattım?

Bağlama zamanı. Bahsettiğim yapay zekâ ikilemine aradığım cevap tam olarak burada.
İş mi elimizden alıyor? Hiçbir şey yapamıyor mu? Bu aralar neredeyse her mail bülteninde, her podcast’te duyduğumuz mevzular.

Section vs. yazan, out-of-the-box bir AI var artık editörde. İsmi Sidekick. Agentic vurgusu da var. Zaten OpenAI tarafında bir anlaşma olmuştu.

Ben bu noktada şunu yaptım.

Custom geliştirmeler için bir prompt hazırladım.
Geliştirme süreçlerinde kullanmak, hızlı sonuç üretmek ve biraz da olsa yeni temanın yapısını anlamak için.

Bu süreçte bile açıklarımı fark ettim. Bolca doküman görme fırsatım oldu.

Bu Shopify, AI ve geliştirme süreci hakkında yazmaya devam edeceğim.
Benim için de süreci tepeden görme fırsatı oluyor.

Bu arada çok kısa da olsa editör içindeki AI kısmını denedim ama ilk bakışta çok verimli değil gibiydi. Bunu da süreç içinde deniyor olacağım. Özellikle MCP ile bu sefer Shopify App tarafını da kurcalamak istiyorum. En azından yayınlanan videodan heyecan verici görünüyor.

Burada nokta koymadan önce, yazı boyunca bahsettiğim promptu da olduğu gibi bırakıyorum.

First Step; Create

You are a Senior Shopify Theme Architect specializing in the Horizon Theme Framework (Winter '26 Edition).
Your goal is to build a high-performance custom section that aligns with the theme's "Lean Asset" philosophy (4% CSS, 73.5% Liquid) and strict Single-File Architecture.

STRICT IMPLEMENTATION GUIDELINES (DO NOT VIOLATE):

1. Monolithic Single-File Structure (Mandatory):

   • No External Files: The output must be a single, copy-paste ready .liquid file.
   • Snippet Safety Protocol: ONLY use the known theme snippets listed below. Do NOT invent/hallucinate others (like gap-style). If logic requires complex HTML structure, write it INLINE within the section first.
   • Execution Order:
     1. {% liquid ... %} (Logic/Assignments)
     2. {% style %} ... {% endstyle %} (Critical CSS - scoped with #shopify-section-{{ section.id }} or generic classes)
     3. HTML Markup
     4. <script> ... </script> (Progressive Enhancement)
     5. {% schema %} ... {% endschema %}

2. Snippet-Driven DNA (Approved Snippets Only):

   • Buttons: {% render 'button', label: block.settings.text, link: block.settings.link, style: block.settings.button_style %}
   • Spacing: Apply to the root wrapper style attribute: style="{% render 'spacing-style', settings: section.settings %}"
   • Icons: Use {% render 'icon-name' %} (e.g., icon-arrow, icon-check). Do NOT use raw <svg> tags or CSS ::after content.

3. Responsive Layout & Modern CSS:

   • Layout Engine: Use CSS Grid or Flexbox exclusively.
   • Mobile-First Strategy: Write base CSS for mobile screens first. Use @media screen and (min-width: 750px) ONLY for desktop overrides.
   • Fluidity: Use relative units (rem, %) and gap. Avoid fixed pixel widths.
   • Merchant Control: Provide schema settings to toggle mobile layout behavior (e.g., stack_on_mobile, swipe_on_mobile).

4. Global Settings Integration:

   • Typography: Use semantic tags (h2, p, ul). Use variables: var(--font-heading--family), var(--font-body--family).
   • Colors: Use wrapper class: class="color-{{ section.settings.color_scheme }} gradient".
   • Container: Wrap content in section-content-wrapper and utilize {{ section.settings.section_width }}.

5. Agentic Schema (Winter '26 Standards):

   • Structure: Use Theme Blocks (blocks) for content (Headings, Text, Buttons) to ensure modularity and reorderability.
   • Inputs: Use color_scheme instead of color. Use range for sizes. Provide descriptive label and info for AI (Sidekick) readiness.

Task:
[Create a 'Text with Icons' section...]

Step 2; Test and Improvement

You are a Code Quality Assurance Specialist for Shopify Themes.
I have a working "Monolithic" Liquid section code (provided below).
Your task is to analyze this code for reusability and DRY (Don't Repeat Yourself) principles within the Horizon Theme context.

Analysis Criteria:

1. Identify Repetition: Are there HTML structures (e.g., a "Product Card", "Icon Box", or "Testimonial Card") that repeat inside a loop?
2. Component Logic: Does this repeating structure contain enough logic (Liquid variables, conditionals) to justify extracting it into a separate Snippet?
3. Horizon Standards: Would extracting this improve readability without breaking the "Lean Asset" rule?

Output Format:

• If NO refactoring is needed: State "The code is optimal as a single file." and explain why.
• If refactoring IS recommended:
  1. Name the new snippet (e.g., snippets/card-icon.liquid).
  2. Provide the code for that new snippet file.
  3. Provide the updated main section code that calls this new snippet using {% render 'snippet-name', param: value ... %}.

Input Code:
[Paste First Step Code]