Shopify için özel tema geliştirme

Özel Tema Geliştirme

Hazır şablona uymak yerine, mağazayı markanıza göre tasarlıyoruz.

Tasarım dilinden kullanıcı akışına, Liquid section yapısından mikro etkileşimlere kadar Shopify mağazanızı bir bütün olarak geliştiriyoruz. Sadece farklı görünen değil, ekibinizin kolayca yönetebileceği ve her ekranda tutarlı çalışan bir deneyim kuruyoruz.

Projemi konuşalım Nasıl çalışıyoruz

Liquid: Shopify'a özel geliştirme
UX: düşünülmüş kullanıcı akışı
Mobil: ekranlar arası tutarlılık
Editör: yönetilebilir section yapısı

b.basefactory / özel geliştirme

SHOPIFY / ÖZEL KOD

basefactory-theme›sections›custom-hero.liquid

01{%- liquid

02 assign custom_theme = 'basefactory custom'

03 assign brand_identity = shop.name

04 assign active_product = product

05 assign theme_accent = settings.accent_color

06 assign visual_style = section.settings.style

07 assign primary_link = section.settings.cta_link

08-%}

10<section class="bf-theme" data-theme="custom">

11 <div class="bf-theme__container">

12 {% if section.settings.eyebrow != blank %}

13 <p class="bf-theme__eyebrow">

14 {{ section.settings.eyebrow | escape }}

15 </p>

16 {% endif %}

17 <div class="bf-theme__content">

18 <h1 class="bf-theme__title">

19 {{ section.settings.heading | escape }}

20 </h1>

21 <p>{{ section.settings.description }}</p>

22 {% if primary_link != blank %}

23 <a href="{{ primary_link }}" class="bf-cta">

24 {{ section.settings.cta_text | escape }}

25 <span aria-hidden="true">↗</span>

26 </a>

27 {% endif %}

28 </div>

29 {% render 'brand-visual',

30 product: active_product,

31 accent: theme_accent

32 %}

33 </div>

34</section>

36{% schema %}

37{ "name": "Basefactory Özel Tema",

38 "settings": [

39 { "type": "text", "id": "heading" },

40 { "type": "color", "id": "accent" }

41 ],

42 "presets": [{ "name": "Özel Bölüm" }]

43}

44{% endschema %}

01basefactory.

02const basefactory = 'original';

03{% render 'basefactory' %}

04basefactory designed to be different

05--brand: basefactory;

06{{ basefactory }}

07basefactory();

08basefactory — sıfırdan

09basefactory.

10const basefactory = 'original';

11{% render 'basefactory' %}

12basefactory designed to be different

13--brand: basefactory;

14{{ basefactory }}

15basefactory();

16basefactory — sıfırdan

17basefactory.

18const basefactory = 'original';

19{% render 'basefactory' %}

20basefactory designed to be different

21--brand: basefactory;

22{{ basefactory }}

23basefactory();

24basefactory — sıfırdan

25basefactory.

26const basefactory = 'original';

27{% render 'basefactory' %}

28basefactory designed to be different

29--brand: basefactory;

30{{ basefactory }}

31basefactory();

32basefactory — sıfırdan

33basefactory.

34const basefactory = 'original';

35{% render 'basefactory' %}

36basefactory designed to be different

37--brand: basefactory;

38{{ basefactory }}

39basefactory();

40basefactory — sıfırdan

41basefactory.

42const basefactory = 'original';

43{% render 'basefactory' %}

44basefactory designed to be different

01:root {

02 --bf-ink: #151b17;

03 --bf-surface: #e8ede4;

04 --bf-accent: #d9fe85;

05 --bf-radius: 28px;

06 --bf-motion: cubic-bezier(.22,1,.36,1);

07}

09.bf-theme {

10 position: relative;

11 overflow: clip;

12 isolation: isolate;

13 background: var(--bf-surface);

14 color: var(--bf-ink);

15}

17.bf-theme__container {

18 width: min(100% - 48px, 1440px);

19 margin-inline: auto;

20 display: grid;

21 grid-template-columns: 1fr 1fr;

22 align-items: center;

23 gap: clamp(24px, 5vw, 96px);

24}

26.bf-theme__title {

27 font-size: clamp(48px, 7vw, 112px);

28 letter-spacing: -.075em;

29 line-height: .98;

30 text-wrap: balance;

31}

33.bf-cta {

34 display: inline-flex;

35 gap: 22px;

36 padding: 18px 26px;

37 border-radius: 999px;

38 background: var(--bf-accent);

39 transition: transform .35s var(--bf-motion);

40}

42.bf-cta:hover {

43 transform: translateY(-4px);

44}

46@media (max-width: 749px) {

47 .bf-theme__container {

48 grid-template-columns: 1fr;

49 gap: 28px;

50 }

51}

01basefactory.

02const basefactory = 'original';

03{% render 'basefactory' %}

04basefactory designed to be different

05--brand: basefactory;

06{{ basefactory }}

07basefactory();

08basefactory — sıfırdan

09basefactory.

10const basefactory = 'original';

11{% render 'basefactory' %}

12basefactory designed to be different

13--brand: basefactory;

14{{ basefactory }}

15basefactory();

16basefactory — sıfırdan

17basefactory.

18const basefactory = 'original';

19{% render 'basefactory' %}

20basefactory designed to be different

21--brand: basefactory;

22{{ basefactory }}

23basefactory();

24basefactory — sıfırdan

25basefactory.

26const basefactory = 'original';

27{% render 'basefactory' %}

28basefactory designed to be different

29--brand: basefactory;

30{{ basefactory }}

31basefactory();

32basefactory — sıfırdan

33basefactory.

34const basefactory = 'original';

35{% render 'basefactory' %}

36basefactory designed to be different

37--brand: basefactory;

38{{ basefactory }}

39basefactory();

40basefactory — sıfırdan

41basefactory.

42const basefactory = 'original';

43{% render 'basefactory' %}

44basefactory designed to be different

45--brand: basefactory;

46{{ basefactory }}

47basefactory();

48basefactory — sıfırdan

49basefactory.

50const basefactory = 'original';

51{% render 'basefactory' %}

01Basefactory original interactions

02const root = document.querySelector('.bf-theme');

03const ease = 'cubic-bezier(.22,1,.36,1)';

04const reduceMotion = window.matchMedia(

05 '(prefers-reduced-motion: reduce)'

06);

08function setupBrandInteractions() {

09 if (!root || reduceMotion.matches) return;

10 const hero = root.querySelector('.bf-theme__title');

11 const actions = root.querySelectorAll('.bf-cta');

13 const reveal = (element, delay = 0) => {

14 element.animate([

15 { opacity: 0, transform: 'translateY(24px)' },

16 { opacity: 1, transform: 'translateY(0)' }

17 ], {

18 duration: 720,

19 delay,

20 easing: ease,

21 fill: 'both'

22 });

23 };

25 if (hero) reveal(hero, 120);

26 actions.forEach((action, index) => {

27 reveal(action, 220 + index * 90);

28 });

29}

31const observer = new IntersectionObserver(

32 (entries) => {

33 entries.forEach(({ target, isIntersecting }) => {

34 if (!isIntersecting) return;

35 target.classList.add('is-visible');

36 observer.unobserve(target);

37 });

38 },

39 { threshold: 0.18 }

40);

42document.querySelectorAll('[data-reveal]')

43 .forEach((element) => observer.observe(element));

45setupBrandInteractions();

01basefactory.

02const basefactory = 'original';

03{% render 'basefactory' %}

04basefactory designed to be different

05--brand: basefactory;

06{{ basefactory }}

07basefactory();

08basefactory — sıfırdan

09basefactory.

10const basefactory = 'original';

11{% render 'basefactory' %}

12basefactory designed to be different

13--brand: basefactory;

14{{ basefactory }}

15basefactory();

16basefactory — sıfırdan

17basefactory.

18const basefactory = 'original';

19{% render 'basefactory' %}

20basefactory designed to be different

21--brand: basefactory;

22{{ basefactory }}

23basefactory();

24basefactory — sıfırdan

25basefactory.

26const basefactory = 'original';

27{% render 'basefactory' %}

28basefactory designed to be different

29--brand: basefactory;

30{{ basefactory }}

31basefactory();

32basefactory — sıfırdan

33basefactory.

34const basefactory = 'original';

35{% render 'basefactory' %}

36basefactory designed to be different

37--brand: basefactory;

38{{ basefactory }}

39basefactory();

40basefactory — sıfırdan

41basefactory.

42const basefactory = 'original';

43{% render 'basefactory' %}

44basefactory designed to be different

45--brand: basefactory;

Liquid UTF-8BASEFACTORY ✳

TASARIMI BİZ ÇİZERİZ. KODU DA BİZ YAZARIZ.KODUN ÜZERİNE GEL ↗KOD · BASEFACTORY ↗

Markanıza özel tasarımb.Sıfırdan Shopify Liquidb.Özgün mikro etkileşimlerb.Mobil öncelikli deneyimb.Esnek ve yönetilebilir bölümlerb.Özel ürün sayfalarıb.Performans odaklı altyapıb.Her detayı düşünülmüş temab.

Tema bileşenleri

Mağazanızın her bölümünü
yeniden düşünüyoruz.

Bir tema yalnızca ana sayfadan ibaret değil. Ürün anlatımından koleksiyon gezintisine, mobil menüden sepete kadar her parçayı markanızın satış ve içerik ihtiyaçlarına göre geliştiriyoruz.

HERO

Markaya özel giriş alanı

Hazır bir banner değil; ürünün, tipografinin ve mesajın tek bir hikâyeye dönüştüğü özgün bir açılış.

MOBİL

Mobil navigasyon

Dokunma alanları, menü hiyerarşisi ve sayfalar arası geçişler telefon ekranı için ayrı ele alınır.

KOLEKSİYON

Akıllı ürün listeleri

Filtre, sıralama, ürün kartı ve varyant gösterimi alışveriş kararını kolaylaştıracak şekilde tasarlanır.

ÜRÜN

Ürün detay sayfası

Beden, renk, görseller, ürün bilgisi ve sepete ekleme akışı aynı sistemin parçaları olarak kurulur.

SEPET

Sepet deneyimi

Sepete ekleme geri bildirimi, özet alanı ve mobil kullanım; gereksiz adımlar olmadan tasarlanır.

EDİTÖR

Yönetilebilir section'lar

Başlık, görsel, düzen ve aralıklar tema editöründen güncellenir; her küçük değişiklik için kod gerekmez.

DETAY

Özgün mikro etkileşimler

Hover, geçiş ve hareketler marka karakterine hizmet eder; hız ve erişilebilirlik gözetilir.

Geliştirme kapsamı

Tasarımın arkasında
gerçek bir sistem var.

Markanızın görünümünü tarif eden kararları bileşenlere dönüştürüyoruz. Tasarımla kod aynı ekipte ilerliyor; farklı cihazlarda ve tema editöründe tutarlı çalışan bir yapı teslim ediyoruz.

Projemi konuşalım

Tasarım sistemi

Tipografi, renk, ölçek, boşluk ve bileşen kurallarını baştan tanımlarız. Sayfanın her yerinde aynı dil konuşulur.

Özel Liquid section'lar

Mağazanızın gerektirdiği bölümleri bağımsız, düzenlenebilir ve tekrar kullanılabilir şekilde geliştiririz.

Mobil deneyim

Mobil ekranı küçültülmüş masaüstü olarak görmeyiz. Menü, kartlar, görseller ve dokunmatik etkileşimler ayrı çalışılır.

Ürün ve koleksiyon akışı

Varyantlar, filtreler, beden rehberi ve alışveriş kararını etkileyen detaylar ürün yapısına göre tasarlanır.

Geçişler ve etkileşimler

Hareket, hover ve sayfa geçişlerini ölçülü kullanırız. Performansı veya kullanımı zorlaştıran gösterişten kaçınırız.

Performans ve teslim

Gereksiz kodları azaltır, görselleri doğru yükler, temel erişilebilirliği ve editör kullanımını kontrol ederek teslim ederiz.

Proje haritası

Bir temayı
hangi sırayla geliştiriyoruz?

Her projenin süresi ve kapsamı farklıdır. Buradaki sekiz adım haftalık teslim vaadi değil; tasarımdan yayına kadar takip ettiğimiz iş akışını gösterir.

Marka ve ihtiyaç keşfiKimlik, müşteri, ürün yapısı ve mevcut mağaza

Keşif

Sayfa ve deneyim haritasıNavigasyon, içerik hiyerarşisi ve ana akışlar

Görsel sistemTipografi, renk, ölçüler ve bileşen seti

Tasarım

Liquid ve tema iskeletiSection, snippet ve tema ayarları

Kod

Ürün ve koleksiyon sayfalarıVaryantlar, bilgi alanları ve gezinme

Ticaret

Mobil ve etkileşimlerDokunmatik davranışlar ve geçişler

Mobil

Test ve düzeltmelerCihaz, bağlantı, içerik ve performans kontrolleri

Kalite

Editör devri ve yayına hazırlıkKullanım anlatımı, onay ve yayın kontrolü

Teslim

Bu şema, sabit bir hafta takvimi değildir. Ürün sayısı, entegrasyonlar, onay döngüleri ve özel geliştirme kapsamına göre süre ve adımlar birlikte netleştirilir.

KeşifBaşlangıç

Markanızı ve mağazanızı tanıyoruz

Mevcut mağaza, ürün yapısı, hedef müşteri, içerik ve görsel kimlik üzerinden neyin yeniden tasarlanacağını birlikte belirliyoruz.

Marka ve hedef analiziMevcut tema incelemesiİhtiyaç listesi

KapsamPlanlama

Sınırları ve öncelikleri netleştiriyoruz

Hangi sayfa ve section'ların geliştirileceğini, hangi işlevlerin gerekli olduğunu ve editörden nelerin yönetileceğini kararlaştırıyoruz.

Sayfa listesiÖzel fonksiyonlarTeslim kapsamı

TasarımOnay süreci

Tasarım dilini birlikte kuruyoruz

Tipografi, renk, aralık, ürün kartı ve etkileşim detaylarını örnek ekranlarla netleştiriyoruz. Kodlamaya karar verilmiş bir yönle giriyoruz.

Görsel sistem Masaüstü · mobil Tasarım onayları

GeliştirmeUygulama

Shopify temasını kodluyoruz

Section ve snippet yapısını Liquid, CSS ve JavaScript ile kuruyoruz. Ürün, koleksiyon ve sayfa şablonlarını gerçek içerikle düzenliyoruz.

Liquid bileşenleriTema ayarlarıÜrün akışları

KontrolKalite

Gerçek kullanımda test ediyoruz

Mobil ve masaüstünde gezinme, varyant seçimi, bağlantılar, performans ve içerik yönetimini kontrol edip gerekli düzeltmeleri yapıyoruz.

Cihaz kontrolleriKullanılabilirlikHata düzeltmeleri

TeslimYayına hazırlık

Editörü size devrediyoruz

Tema kullanımını anlatıyor, içerik yönetimini teslim ediyor ve yayın öncesi son kontrolleri birlikte tamamlıyoruz.

Editör anlatımıYayın kontrol listesiDevir notları

Teknik mimari

Güzel görünenin
arkası da sağlam olmalı.

Görsel tasarım, Liquid bileşenleri ve tema editörü aynı sistemde buluşur. Yeni bir kampanya sayfası eklerken ya da ürün içeriği değiştirirken tasarımın dağılmaması için bu yapıyı kuruyoruz.

Bileşen mimarisi. Her section kendi işini yapar; ortak tasarım kuralları tekrar kullanım ve bakım kolaylığı sağlar.
Editörden yönetim. Önemli içerik ve görünüm kararları mümkün olduğunda tema ayarlarından değiştirilebilir.
Duyarlı düzen. Masaüstü, tablet ve mobil ekranlar için farklı içerik ve etkileşim ihtiyaçları gözetilir.
Performans dengesi. Animasyon ve görseller etkisiyle birlikte yükleme maliyeti açısından da değerlendirilir.
Kod sahipliği. Geliştirilen tema, sözleşmedeki teslim kapsamı ve ilgili lisans koşulları çerçevesinde mağazanızda yönetilir.

Teknik kapsamı konuşalım

Tasarım sistemiTipografi ve bileşen dili

Liquid + CSS + JSÖzgün tema yapısı

Shopify tema editörüYönetilebilir deneyim

Sayfa şablonlarıTL

Dinamik içeriklerTL

Marka deneyimiTek sistem

Birlikte çalışan sistem

Kontrol sizde

Tasarımı birlikte kurarız, ama yönetimi size bırakırız. Bölümler, içerik ve tema ayarları markanızın kontrolünde kalır.

Projemizi konuşalım Nasıl çalışıyoruz

Sık karşılaşılan sorunlar

Güzel görünen bir tema
neden yetmeyebilir?

Bir mağazayı zorlaştıran sorunlar çoğu zaman görsel tasarımdan değil; tutarsız bileşenlerden, karmaşık yönetimden ve test edilmemiş davranışlardan çıkar.

SorunBirbirinden kopuk tasarım parçaları

EtkisiBaşlıklar, renkler ve aralıklar sayfadan sayfaya değişir.

YaklaşımımızOrtak tasarım sistemi oluştururuz.

SorunMobilin sonradan düşünülmesi

EtkisiMenü, filtre ve sepet telefonda kullanımı zorlaştırır.

YaklaşımımızMobil akışı baştan tasarlarız.

SorunHer küçük düzenlemede kod ihtiyacı

Etkisiİçerik güncellemesi için sürekli geliştiriciye ihtiyaç olur.

YaklaşımımızSection ve blokları yönetilebilir kurarız.

SorunGereksiz uygulama ve script yükü

EtkisiÇakışan kod ve fazla istek sayfayı yavaşlatabilir.

YaklaşımımızYükü analiz eder, gereksizleri azaltırız.

SorunÜrün sayfasında belirsizlik

EtkisiBeden, varyant ve teslimat bilgisi kaybolur.

YaklaşımımızBilgi hiyerarşisini ürün tipine göre kurarız.

SorunTest edilmeden yayın

EtkisiYeni tema cihaz ve uygulamalarda beklenmedik davranabilir.

YaklaşımımızTaslakta gezinti ve satın alma akışını kontrol ederiz.

SorunSadece görsele odaklanmak

EtkisiEtkileyici ilk ekran sonraki sayfalarda tutarsızlaşır.

YaklaşımımızKimlik, kullanım ve altyapıyı birlikte geliştiririz.

Birbirini tamamlayan hizmetler

Bir marka yalnızca
temadan ibaret değil.

Kimlik, mağaza deneyimi ve büyüme stratejisi aynı hikâyenin parçaları. Özel temayla birlikte düşünülmesi gereken diğer çalışmalarımıza da göz atın.

Shopify

Pazaryerinden Markaya

Bir not bırakalım

İyi bir tema, güzel görünmekle yetinmez.

Markanızın nasıl göründüğünü, müşterinin nasıl gezindiğini ve ekibinizin içeriği nasıl yönettiğini aynı anda düşünür.

Özel temamı konuşalım

Tasarım da kod da
aynı masada.

Bir tema fikri, böyle başlar.

Marka ekibi: Merhaba, mağazamız için daha özgün bir tema istiyoruz.

Marka ekibi: Ürün sayfamız ve mobil menümüz bize özel olabilir mi?

Marka ekibi: İçerikleri sonra kendimiz değiştirebilir miyiz?

Basefactory: Merhaba! Önce ürün ve marka yapınızı birlikte inceleyelim.

Basefactory: Elbette. Uygun alanları tema editöründen yönetilebilir kurabiliriz.

Örnek proje görüşmesi

Markanıza özel
bir Shopify teması

Projeyi konuşalım

İlk görüşmede ihtiyacı, kapsamı ve doğru başlangıç noktasını birlikte netleştirelim.

Özel tema ile hazır tema arasındaki fark nedir?

Hazır tema önceden tanımlanmış tasarım ve bileşenler üzerinden şekillenir. Özel temada görsel dil, sayfa yapısı ve Liquid bileşenleri markanızın ihtiyaçlarına göre geliştirilir. Hangi parçaların sıfırdan kodlanacağı kapsamda netleşir.

Mevcut Shopify mağazam için özel tema yapılabilir mi?

Evet. Ürün, koleksiyon, uygulama ve mevcut işlevleri inceleyip yeni temayı ayrı bir taslakta hazırlayabiliriz. Geçiş öncesinde etkilenebilecek tüm alanları kontrol ederiz.

Tema geliştirme ne kadar sürer?

Tek bir standart süre yok. Sayfa sayısı, özel fonksiyonlar, entegrasyonlar, içerik hazırlığı ve onay döngüleri süreyi belirler. Kapsamı netleştirdiğimizde aşamalı bir plan oluştururuz.

Tema mobil uyumlu olur mu?

Mobil menü, ürün kartları, varyant seçimi, filtreler ve dokunmatik etkileşimleri ayrıca tasarlıyoruz. Yayına hazırlıkta farklı ekranlarda temel işlevleri test ediyoruz.

Metinleri ve görselleri kendim güncelleyebilir miyim?

Uygun içerikleri Shopify tema editöründeki section, blok ve tema ayarlarıyla yönetilebilir kuruyoruz. Yapısal veya özel işlev değişikliklerinde kod müdahalesi gerekebilir; bunu teslimde açıklıyoruz.

Ürün sayfası ve sepet çalışmaları dahil mi?

Dahil edilebilir. Ürün sayfası, beden rehberi, varyant arayüzü, sepet ve koleksiyon filtreleri gibi modülleri teklif kapsamına göre kararlaştırırız.

Animasyonlar mağazayı yavaşlatır mı?

Aşırı hareket performansı etkileyebilir. Bu nedenle animasyonları ölçülü kullanır, mobil yükü ve azaltılmış hareket tercihini gözetiriz. Kesin bir hız puanı sözü vermiyoruz.

SEO ve erişilebilirlik de düşünülüyor mu?

Semantik başlıklar, mobil düzen, görsel alternatifleri ve temel klavye kullanımı gibi teknik ayrıntıları ele alıyoruz. Kapsamlı SEO stratejisi ve bağımsız erişilebilirlik denetimi ayrıca planlanır.

Shopify uygulamalarım çalışmaya devam eder mi?

Mevcut uygulamaları başta listeler, tema ile etkileşen kısımlarını taslakta test ederiz. Üçüncü taraf uygulamaların sınırlamaları ve ek geliştirme gereksinimleri ayrıca değerlendirilir.

Tema kodları kimin oluyor?

Teslim edilen dosyaların kullanım ve erişim koşulları proje sözleşmesinde belirlenir. Üçüncü taraf uygulama, font ve lisanslı varlıkların kendi koşulları geçerlidir. Bu sınırları başlamadan netleştiririz.

Yayından sonra destek var mı?

Yayın sonrası destek, bakım ve yeni özellik geliştirme kapsamı teklifte tanımlanır. Tema editörü kullanımı ve devredilen bileşenleri yönetmeniz için temel açıklamalar hazırlanır.

Başlamadan önce

Önce neye ihtiyacınız olduğunu birlikte anlayalım. Sonra mağazanıza özel doğru sistemi tasarlayalım.

Projeyi konuşalım Çalışma sürecimiz

Bir sonraki adım

Markanıza yakışan
temayı birlikte yapalım.

Mağazanızın bugün nasıl çalıştığını, nerede zorlandığınızı ve hangi sayfa ya da özelliklerin size özel olması gerektiğini konuşalım. Başlamadan önce kapsamı netleştirelim.

Projemi anlatayım Nasıl çalışıyoruz

Özel tema projenizi konuşmak için buradayız

Mail: hello@basefactory.co
Telefon: +90 850 972 72 72

Özel Tema Geliştirme