{"id":30932,"date":"2025-10-03T16:02:13","date_gmt":"2025-10-03T13:02:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/"},"modified":"2025-10-03T16:02:13","modified_gmt":"2025-10-03T13:02:13","slug":"shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/","title":{"rendered":"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme"},"content":{"rendered":"<p>E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify&#8217;\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir &#8220;\u0130stek Listesi&#8221; kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz rekabet\u00e7i e-ticaret d\u00fcnyas\u0131nda, m\u00fc\u015fteri deneyimini zenginle\u015ftirmek ve al\u0131\u015fveri\u015f s\u00fcrecini kolayla\u015ft\u0131rmak hayati \u00f6nem ta\u015f\u0131maktad\u0131r. \u0130stek listeleri, bu hedeflere ula\u015fmak i\u00e7in ba\u015fvurulan en etkili ara\u00e7lardan biridir. Peki, istek listesi tam olarak nedir ve neden Focal teman\u0131zda \u00fcr\u00fcn g\u00f6rsellerine entegre edilmesi bu kadar kritik bir ad\u0131md\u0131r?<\/p>\n<p>\u0130stek listesi (wishlist), bir m\u00fc\u015fterinin anl\u0131k sat\u0131n alma niyeti olmasa bile be\u011fendi\u011fi \u00fcr\u00fcnleri kaydedebildi\u011fi ki\u015fiselle\u015ftirilmi\u015f bir koleksiyondur. Bu \u00f6zellik, kullan\u0131c\u0131lara daha sonra g\u00f6z atmak, fiyat d\u00fc\u015f\u00fc\u015flerini takip etmek veya \u00f6zel g\u00fcnler i\u00e7in hediye fikirleri toplamak gibi bir\u00e7ok avantaj sunar. Bu sayede, m\u00fc\u015fteriler favori \u00fcr\u00fcnlerini unutmaz ve siteye geri d\u00f6nmek i\u00e7in g\u00fc\u00e7l\u00fc bir nedenleri olur. \u00d6zellikle \u00fcr\u00fcn g\u00f6rselleri \u00fczerinde yer alan &#8220;kalp&#8221; ikonu gibi g\u00f6rsel bir i\u015faretleyici, bu i\u015flevi an\u0131nda fark edilebilir k\u0131larak kullan\u0131c\u0131 etkile\u015fimini ciddi \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu k\u00fc\u00e7\u00fck dokunu\u015f, m\u00fc\u015fterilerin zihninde \u00fcr\u00fcnle duygusal bir ba\u011f kurmas\u0131na yard\u0131mc\u0131 olabilir.<\/p>\n<p>Focal temas\u0131, modern, minimalist ve g\u00f6rsel odakl\u0131 yap\u0131s\u0131yla Shopify ma\u011fazalar\u0131 aras\u0131nda olduk\u00e7a pop\u00fclerdir. \u015e\u0131k tasar\u0131m\u0131 ve kullan\u0131c\u0131 dostu aray\u00fcz\u00fc sayesinde, bu temay\u0131 kullanan ma\u011fazalar genellikle y\u00fcksek estetik standartlara sahiptir. Bu t\u00fcr bir temada istek listesi ikonunun \u00fcr\u00fcn g\u00f6rsellerine entegre edilmesi, teman\u0131n g\u00f6rsel cazibesini daha da art\u0131r\u0131rken, ayn\u0131 zamanda temel bir e-ticaret i\u015flevselli\u011fini de kusursuzca sunar. G\u00f6rsel odakl\u0131 bir temada, bir \u00fcr\u00fcn\u00fcn foto\u011fraf\u0131 ilk dikkat \u00e7eken \u00f6gedir; dolay\u0131s\u0131yla istek listesi butonunu tam da bu alana yerle\u015ftirmek, kullan\u0131c\u0131n\u0131n o \u00fcr\u00fcnle ilgili potansiyel ilgisini an\u0131nda yakalaman\u0131z\u0131 sa\u011flar. Bu, do\u011frudan kullan\u0131c\u0131lar\u0131n g\u00f6zlerinin \u00f6n\u00fcnde, karar verme s\u00fcre\u00e7lerinin ba\u015flad\u0131\u011f\u0131 noktada bir etkile\u015fim noktas\u0131 olu\u015fturmak anlam\u0131na gelir.<\/p>\n<p>Bu \u00f6zellik, sadece m\u00fc\u015fteri memnuniyetini art\u0131rmakla kalmaz, ayn\u0131 zamanda ma\u011faza sahipleri i\u00e7in de de\u011ferli veriler sa\u011flar. Hangi \u00fcr\u00fcnlerin istek listesine en \u00e7ok eklendi\u011fini g\u00f6rmek, stok y\u00f6netimi, pazarlama stratejileri ve yeni \u00fcr\u00fcn geli\u015ftirme s\u00fcre\u00e7leri i\u00e7in de\u011ferli i\u00e7g\u00f6r\u00fcler sunabilir. \u00d6rne\u011fin, belirli bir \u00fcr\u00fcn s\u00fcrekli olarak istek listelerine ekleniyor ancak sat\u0131lm\u0131yorsa, bu \u00fcr\u00fcn\u00fcn fiyatland\u0131rmas\u0131 veya pazarlamas\u0131 konusunda bir iyile\u015ftirme ihtiyac\u0131na i\u015faret edebilir. Ayr\u0131ca, e-posta pazarlamas\u0131 kampanyalar\u0131n\u0131z\u0131, istek listesindeki \u00fcr\u00fcnleri temel alarak ki\u015fiselle\u015ftirebilir, b\u00f6ylece d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz. Sonu\u00e7 olarak, \u00fcr\u00fcn g\u00f6rsellerine entegre edilecek bir istek listesi ikonu, hem m\u00fc\u015fteri deneyimini geli\u015ftiren hem de i\u015f s\u00fcre\u00e7lerinize katk\u0131 sa\u011flayan stratejik bir ad\u0131md\u0131r.<\/p>\n<h2>Ba\u015flang\u0131\u00e7 \u00d6ncesi Haz\u0131rl\u0131klar: G\u00fcvenli Ad\u0131mlar ve Yedekleme Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n<p>Shopify teman\u0131z\u0131n kodunda de\u011fi\u015fiklik yapmadan \u00f6nce atman\u0131z gereken en \u00f6nemli ad\u0131m, her zaman bir yedekleme olu\u015fturmakt\u0131r. Bu, olas\u0131 bir hatada veya istenmeyen bir durumda ma\u011fazan\u0131z\u0131n i\u015flevselli\u011fini h\u0131zla geri y\u00fcklemenizi sa\u011flar. Yaz\u0131l\u0131m d\u00fcnyas\u0131nda &#8220;\u00f6nce yedekle, sonra dene&#8221; kural\u0131 alt\u0131n de\u011ferindedir ve bu, Shopify i\u00e7in de ge\u00e7erlidir. Unutmay\u0131n, ufak bir kod hatas\u0131 bile sitenizin bozulmas\u0131na neden olabilir, bu y\u00fczden bu ad\u0131m\u0131 kesinlikle atlamamal\u0131s\u0131n\u0131z. \u0130\u015fte ba\u015flamadan \u00f6nce yapman\u0131z gerekenler:<\/p>\n<h3>Shopify Teman\u0131z\u0131 Yedekleme<\/h3>\n<p>Teman\u0131zda yapaca\u011f\u0131n\u0131z herhangi bir kod de\u011fi\u015fikli\u011fi, teman\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc veya i\u015flevselli\u011fini olumsuz etkileyebilir. Bu riski ortadan kald\u0131rmak i\u00e7in, mevcut teman\u0131z\u0131n bir kopyas\u0131n\u0131 olu\u015fturman\u0131z gerekir. Bu \u015fekilde, bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda orijinal temaya kolayca geri d\u00f6nebilirsiniz.<\/p>\n<ol>\n<li>Shopify Y\u00f6netici Panelinize giri\u015f yap\u0131n.<\/li>\n<li>Sol men\u00fcden &#8220;Online Ma\u011faza&#8221; (Online Store) se\u00e7ene\u011fine t\u0131klay\u0131n.<\/li>\n<li>&#8220;Temalar&#8221; (Themes) b\u00f6l\u00fcm\u00fcne gidin.<\/li>\n<li>Mevcut teman\u0131z\u0131n (genellikle &#8220;Canl\u0131 Tema&#8221; olarak belirtilir) yan\u0131nda bulunan &#8220;Eylemler&#8221; (Actions) d\u00fc\u011fmesine t\u0131klay\u0131n.<\/li>\n<li>A\u00e7\u0131lan men\u00fcden &#8220;Kopyas\u0131n\u0131 \u00c7\u0131kar&#8221; (Duplicate) se\u00e7ene\u011fini se\u00e7in.<\/li>\n<\/ol>\n<p>Bu i\u015flem, teman\u0131z\u0131n birebir kopyas\u0131n\u0131 olu\u015fturacak ve bu kopyay\u0131 &#8220;Kopya [Teman\u0131z\u0131n Ad\u0131]&#8221; \u015feklinde g\u00f6receksiniz. T\u00fcm de\u011fi\u015fikliklerinizi bu kopya \u00fczerinde yapmal\u0131s\u0131n\u0131z. \u0130\u015flemler bittikten ve her \u015feyin d\u00fczg\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olduktan sonra, bu yeni temay\u0131 yay\u0131nlayabilir veya yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri orijinal teman\u0131za aktarabilirsiniz.<\/p>\n<h3>Tema Koduna Eri\u015fim<\/h3>\n<p>\u015eimdi s\u0131ra geldi tema dosyalar\u0131n\u0131za eri\u015fmeye. \u0130stek listesi kalp ikonunu eklemek i\u00e7in birka\u00e7 Liquid dosyas\u0131nda ve CSS dosyas\u0131nda de\u011fi\u015fiklik yapmam\u0131z gerekecek. Bu dosyalar\u0131 bulmak ve d\u00fczenlemek i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyin:<\/p>\n<ol>\n<li>Y\u00f6netici panelinizdeki &#8220;Temalar&#8221; b\u00f6l\u00fcm\u00fcnden, yeni olu\u015fturdu\u011funuz &#8220;Kopya&#8221; teman\u0131n yan\u0131ndaki &#8220;Eylemler&#8221; d\u00fc\u011fmesine tekrar t\u0131klay\u0131n.<\/li>\n<li>Bu sefer a\u00e7\u0131lan men\u00fcden &#8220;Kodu D\u00fczenle&#8221; (Edit Code) se\u00e7ene\u011fini se\u00e7in.<\/li>\n<\/ol>\n<p>Bu sizi Shopify&#8217;\u0131n kod d\u00fczenleyicisine g\u00f6t\u00fcrecektir. Burada, tema yap\u0131n\u0131z\u0131 olu\u015fturan t\u00fcm dosyalar\u0131 g\u00f6rebilirsiniz. Ba\u015flamak i\u00e7in genellikle <code class=\"language-liquid\">Sections<\/code> veya <code class=\"language-liquid\">Snippets<\/code> klas\u00f6rleri alt\u0131ndaki dosyalara odaklanmam\u0131z gerekecek. \u00d6zellikle, \u00fcr\u00fcn kartlar\u0131n\u0131n (yani ana sayfada, koleksiyon sayfalar\u0131nda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz k\u00fc\u00e7\u00fck \u00fcr\u00fcn kutucuklar\u0131n\u0131n) yap\u0131s\u0131n\u0131 tan\u0131mlayan <code class=\"language-liquid\">product-card.liquid<\/code> (veya benzer bir isme sahip bir dosya) ve stil tan\u0131mlar\u0131m\u0131z\u0131 ekleyece\u011fimiz <code class=\"language-css\">base.css<\/code>, <code class=\"language-scss\">theme.scss.liquid<\/code> veya <code class=\"language-css\">assets\/theme.css<\/code> gibi bir CSS dosyas\u0131n\u0131 bulmam\u0131z gerekecek. JavaScript etkile\u015fimleri i\u00e7in ise <code class=\"language-javascript\">global.js<\/code>, <code class=\"language-javascript\">theme.js<\/code> veya <code class=\"language-javascript\">custom.js<\/code> gibi bir dosyaya ihtiyac\u0131m\u0131z olabilir.<\/p>\n<div class=\"expert-tip\">Uzman \u0130pucu: Herhangi bir kod de\u011fi\u015fikli\u011fi yapmadan \u00f6nce teman\u0131z\u0131n bir yede\u011fini almak, olas\u0131 sorunlarda geri d\u00f6n\u00fc\u015f\u00fcn\u00fcz\u00fc garanti eder. Bu ad\u0131m\u0131 asla atlamay\u0131n!<\/div>\n<p>Bu haz\u0131rl\u0131k ad\u0131mlar\u0131n\u0131 tamamlad\u0131ktan sonra, art\u0131k g\u00f6n\u00fcl rahatl\u0131\u011f\u0131yla kodlama k\u0131sm\u0131na ge\u00e7ebiliriz. Bir sonraki b\u00f6l\u00fcmde, kalp ikonunu \u00fcr\u00fcn g\u00f6rseline nas\u0131l entegre edece\u011fimizi ad\u0131m ad\u0131m ele alaca\u011f\u0131z.<\/p>\n<h2>\u00dcr\u00fcn G\u00f6rseline Kalp \u0130konu Ekleme: Ad\u0131m Ad\u0131m Kod Uygulamas\u0131<\/h2>\n<p>\u015eimdi geldik i\u015fin en heyecanl\u0131 k\u0131sm\u0131na: \u0130stek listesi kalp ikonunu \u00fcr\u00fcn g\u00f6rsellerinize entegre etmeye. Bu s\u00fcre\u00e7, \u00fc\u00e7 ana ad\u0131mdan olu\u015fur: HTML yap\u0131s\u0131n\u0131 olu\u015fturma, CSS ile stil verme ve iste\u011fe ba\u011fl\u0131 olarak JavaScript ile etkile\u015fim ekleme. Focal temas\u0131, d\u00fczenli yap\u0131s\u0131yla bu de\u011fi\u015fiklikleri yapmay\u0131 nispeten kolayla\u015ft\u0131r\u0131r. Ad\u0131mlar\u0131 dikkatlice takip edin ve her kodu do\u011fru yere yap\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zdan emin olun.<\/p>\n<h3>Ad\u0131m 1: HTML Yap\u0131s\u0131n\u0131 Olu\u015fturma (product-card.liquid)<\/h3>\n<p>\u00d6ncelikle, kalp ikonumuzun \u00fcr\u00fcn kart\u0131nda nerede g\u00f6r\u00fcnece\u011fini tan\u0131mlayacak HTML yap\u0131s\u0131n\u0131 eklememiz gerekiyor. Bu, genellikle \u00fcr\u00fcn kart\u0131n\u0131n g\u00f6rsel k\u0131sm\u0131n\u0131 olu\u015fturan <code class=\"language-liquid\">product-card.liquid<\/code> dosyas\u0131 i\u00e7inde yap\u0131l\u0131r. Bu dosya, ana sayfa, koleksiyon sayfalar\u0131 ve arama sonu\u00e7lar\u0131 gibi yerlerde \u00fcr\u00fcnlerin k\u00fc\u00e7\u00fck \u00f6zet g\u00f6r\u00fcn\u00fcmlerini olu\u015fturur. Dosyay\u0131 Shopify kod d\u00fczenleyicisinde <code class=\"language-liquid\">Sections<\/code> veya <code class=\"language-liquid\">Snippets<\/code> alt\u0131nda bulabilirsiniz.<\/p>\n<p>Bu dosyay\u0131 a\u00e7t\u0131ktan sonra, \u00fcr\u00fcn g\u00f6rselinin HTML kodunu bulman\u0131z gerekmektedir. Genellikle bu, <code class=\"language-html\"><\/p>\n<div class=\"product-card__image-wrapper\"><\/code> veya benzeri bir etiket i\u00e7inde yer al\u0131r ve \u00fcr\u00fcn g\u00f6rselini render eden bir Liquid etiketi (<code class=\"language-liquid\">{{ product.featured_media | ... }}<\/code>) i\u00e7erir. Kalp ikonumuzu bu sar\u0131c\u0131 div&#8217;in i\u00e7ine, g\u00f6rselin hemen ard\u0131ndan ekleyece\u011fiz. B\u00f6ylece ikon, g\u00f6rselin \u00fczerinde konumland\u0131r\u0131labilir.<\/p>\n<pre><code class=\"language-liquid\">{% comment %} Mevcut \u00fcr\u00fcn g\u00f6rseli kodu {% endcomment %}\n<div class=\"product-card__image-wrapper\">\n  {{ product.featured_media | image_url: width: 535 | image_tag: loading: 'lazy', sizes: '(min-width: 1200px) 360px, (min-width: 768px) 33vw, 50vw' }}\n  \n  {% comment %} \u0130stek listesi kalp ikonu buraya eklenecek {% endcomment %}\n  <button class=\"wishlist-icon\" aria-label=\"\u0130stek Listesine Ekle\">\n    {% render 'icon-heart' %} {% comment %} Bu, teman\u0131zdaki mevcut kalp ikonu olabilir {% endcomment %}\n  <\/button>\n<\/div><\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod blo\u011funda:<\/p>\n<ul>\n<li><code class=\"language-html\">\n<div class=\"product-card__image-wrapper\"><\/code>: Bu div, \u00fcr\u00fcn g\u00f6rselini ve kalp ikonunu sarmalayan ana kapsay\u0131c\u0131d\u0131r. \u0130konu g\u00f6rselin \u00fczerinde konumland\u0131rmak i\u00e7in bu div'in <code class=\"language-css\">position: relative;<\/code> stiline sahip olmas\u0131 \u00f6nemlidir.<\/li>\n<li><code class=\"language-html\"><button class=\"wishlist-icon\" aria-label=\"\u0130stek Listesine Ekle\"><\/code>: \u0130stek listesi ikonumuz i\u00e7in bir buton elementi kullanmak, hem eri\u015filebilirlik a\u00e7\u0131s\u0131ndan daha iyidir hem de t\u0131klanabilir bir alan sa\u011flar. <code class=\"language-html\">aria-label<\/code> \u00f6zelli\u011fi, ekran okuyucu kullanan ki\u015filer i\u00e7in butonun ne i\u015fe yarad\u0131\u011f\u0131n\u0131 a\u00e7\u0131klar.<\/li>\n<li><code class=\"language-liquid\">{% render 'icon-heart' %}<\/code>: Focal temas\u0131n\u0131n (ve \u00e7o\u011fu Shopify temas\u0131n\u0131n) i\u00e7inde, s\u0131k kullan\u0131lan ikonlar\u0131 render etmek i\u00e7in snippet'ler bulunur. <code class=\"language-liquid\">icon-heart<\/code> ad\u0131nda bir snippet varsa, bu kod otomatik olarak SVG kalp ikonunu \u00e7izecektir. E\u011fer teman\u0131zda b\u00f6yle bir snippet yoksa veya farkl\u0131 bir ikon kullanmak isterseniz, do\u011frudan bir SVG kodu ekleyebilir veya bir Font Awesome gibi harici bir ikon k\u00fct\u00fcphanesinden faydalanabilirsiniz.<\/li>\n<\/ul>\n<p>Bu de\u011fi\u015fiklikleri kaydettikten sonra, b\u00fcy\u00fck ihtimalle kalp ikonu hen\u00fcz d\u00fczg\u00fcn konumland\u0131r\u0131lmam\u0131\u015f olacakt\u0131r. \u0130\u015fte tam bu noktada CSS devreye giriyor.<\/p>\n<h3>Ad\u0131m 2: Kalp \u0130konunu Stilize Etme (base.css veya theme.scss.liquid)<\/h3>\n<p>HTML yap\u0131s\u0131n\u0131 olu\u015fturduktan sonra, s\u0131ra geldi kalp ikonunu \u00fcr\u00fcn g\u00f6rselinin sa\u011f \u00fcst k\u00f6\u015fesine g\u00fczel bir \u015fekilde yerle\u015ftirmeye ve ona \u00e7ekici bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmaya. Bu ad\u0131m i\u00e7in teman\u0131z\u0131n ana CSS dosyas\u0131n\u0131 bulman\u0131z gerekecek. Bu dosya genellikle <code class=\"language-css\">assets\/base.css<\/code>, <code class=\"language-scss\">assets\/theme.scss.liquid<\/code> veya <code class=\"language-css\">assets\/custom.css<\/code> gibi bir isimle bulunur. Shopify kod d\u00fczenleyicisinde \"Assets\" klas\u00f6r\u00fcn\u00fcn alt\u0131nda arayabilirsiniz.<\/p>\n<p>Bu CSS dosyas\u0131n\u0131n en alt\u0131na a\u015fa\u011f\u0131daki kodlar\u0131 ekleyin:<\/p>\n<pre><code class=\"language-css\">\/* \u0130stek Listesi \u0130konu Stilleri *\/\n.product-card__image-wrapper {\n  position: relative; \/* Kalp ikonunu bu div'e g\u00f6re konumland\u0131rmak i\u00e7in *\/\n  overflow: hidden; \/* \u0130konun d\u0131\u015far\u0131 ta\u015fmas\u0131n\u0131 engellemek i\u00e7in *\/\n}\n\n.wishlist-icon {\n  position: absolute; \/* \u00dcst elemana g\u00f6re konumland\u0131r *\/\n  top: 10px; \/* \u00dcstten 10px bo\u015fluk *\/\n  right: 10px; \/* Sa\u011fdan 10px bo\u015fluk *\/\n  background: rgba(255, 255, 255, 0.8); \/* Yar\u0131 saydam beyaz arka plan *\/\n  border: none; \/* Kenarl\u0131k yok *\/\n  border-radius: 50%; \/* Dairesel \u015fekil *\/\n  width: 40px; \/* Geni\u015flik *\/\n  height: 40px; \/* Y\u00fckseklik *\/\n  display: flex; \/* \u0130\u00e7indeki ikonu ortalamak i\u00e7in flexbox kullan *\/\n  align-items: center; \/* Dikeyde ortala *\/\n  justify-content: center; \/* Yatayda ortala *\/\n  cursor: pointer; \/* Fare \u00fczerine gelince el i\u015fareti *\/\n  z-index: 10; \/* Di\u011fer elementlerin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011fla *\/\n  transition: all 0.2s ease-in-out; \/* Fare \u00fczerine gelince yumu\u015fak ge\u00e7i\u015f *\/\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); \/* Hafif g\u00f6lge efekti *\/\n}\n\n.wishlist-icon:hover {\n  background: #f00; \/* Fare \u00fczerine gelince k\u0131rm\u0131z\u0131 arka plan *\/\n  color: white; \/* Metin rengi beyaz (e\u011fer metin varsa) *\/\n}\n\n.wishlist-icon svg { \/* Temadaki icon-heart SVG'si i\u00e7in stil *\/\n  fill: #333; \/* \u0130konun i\u00e7 rengi koyu gri *\/\n  width: 20px; \/* \u0130konun geni\u015fli\u011fi *\/\n  height: 20px; \/* \u0130konun y\u00fcksekli\u011fi *\/\n  transition: fill 0.2s ease-in-out; \/* Dolgu rengi i\u00e7in yumu\u015fak ge\u00e7i\u015f *\/\n}\n\n.wishlist-icon:hover svg {\n  fill: white; \/* Fare \u00fczerine gelince ikon rengi beyaz *\/\n}\n\n\/* Mobil Uyumluluk \u0130\u00e7in Medya Sorgular\u0131 *\/\n@media screen and (max-width: 768px) {\n  .wishlist-icon {\n    top: 5px; \/* Mobil cihazlarda daha k\u00fc\u00e7\u00fck bo\u015fluk *\/\n    right: 5px; \/* Mobil cihazlarda daha k\u00fc\u00e7\u00fck bo\u015fluk *\/\n    width: 35px; \/* Mobil cihazlarda daha k\u00fc\u00e7\u00fck ikon *\/\n    height: 35px; \/* Mobil cihazlarda daha k\u00fc\u00e7\u00fck ikon *\/\n  }\n  .wishlist-icon svg {\n    width: 18px; \/* Mobil cihazlarda ikon boyutu *\/\n    height: 18px; \/* Mobil cihazlarda ikon boyutu *\/\n  }\n}<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki CSS kodlar\u0131 hakk\u0131nda detayl\u0131 a\u00e7\u0131klamalar:<\/p>\n<ul>\n<li><code class=\"language-css\">.product-card__image-wrapper<\/code>: Bu s\u0131n\u0131f, kalp ikonumuzun konumland\u0131r\u0131laca\u011f\u0131 referans noktas\u0131d\u0131r. <code class=\"language-css\">position: relative;<\/code> \u00f6zelli\u011fi olmadan, <code class=\"language-css\">.wishlist-icon<\/code> s\u0131n\u0131f\u0131na verdi\u011fimiz <code class=\"language-css\">position: absolute;<\/code> do\u011fru \u00e7al\u0131\u015fmayacakt\u0131r.<\/li>\n<li><code class=\"language-css\">.wishlist-icon<\/code>: Bu ana stil blo\u011fu, butonun konumunu, boyutunu, \u015feklini (dairesel), arka plan rengini ve g\u00f6lge efektini ayarlar. <code class=\"language-css\">display: flex;<\/code> ve <code class=\"language-css\">align-items: center;<\/code>, <code class=\"language-css\">justify-content: center;<\/code> kombinasyonu, ikonun buton i\u00e7inde her zaman ortalanmas\u0131n\u0131 sa\u011flar. <code class=\"language-css\">z-index: 10;<\/code>, ikonun \u00fcr\u00fcn g\u00f6rseli veya di\u011fer elementlerin \u00fczerinde g\u00f6r\u00fcnmesini garantiler.<\/li>\n<li><code class=\"language-css\">.wishlist-icon:hover<\/code>: Bu k\u0131s\u0131m, kullan\u0131c\u0131 fareyi ikonun \u00fczerine getirdi\u011finde uygulanacak stilleri tan\u0131mlar. Arka plan\u0131n k\u0131rm\u0131z\u0131ya d\u00f6nmesi ve metin\/ikon renginin beyaza d\u00f6nmesi gibi g\u00f6rsel geri bildirimler, kullan\u0131c\u0131n\u0131n etkile\u015fimini art\u0131r\u0131r.<\/li>\n<li><code class=\"language-css\">.wishlist-icon svg<\/code>: E\u011fer kalp ikonu bir SVG olarak render ediliyorsa (ki Focal temas\u0131 i\u00e7in bu muhtemeldir), bu stil blo\u011fu SVG'nin i\u00e7 rengini (<code class=\"language-css\">fill<\/code>) ve boyutunu ayarlar.<\/li>\n<li><code class=\"language-css\">@media screen and (max-width: 768px)<\/code>: Bu bir medya sorgusudur ve mobil uyumluluk i\u00e7in \u00e7ok \u00f6nemlidir. Ekran geni\u015fli\u011fi 768 pikselden k\u00fc\u00e7\u00fck oldu\u011funda (yani \u00e7o\u011fu mobil cihazda), ikonun boyutunu ve konumunu k\u00fc\u00e7\u00fclterek k\u00fc\u00e7\u00fck ekranlarda daha iyi g\u00f6r\u00fcnmesini sa\u011flar\u0131z. Bu, sitenizin farkl\u0131 cihazlarda tutarl\u0131 ve kullan\u0131c\u0131 dostu bir deneyim sunmas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\n<p>Bu CSS de\u011fi\u015fikliklerini kaydettikten sonra, ma\u011fazan\u0131z\u0131n \u00f6n y\u00fcz\u00fcn\u00fc kontrol etti\u011finizde, \u00fcr\u00fcn g\u00f6rsellerinin sa\u011f \u00fcst k\u00f6\u015fesinde zarif bir kalp ikonu g\u00f6rmeniz gerekmektedir. \u0130konun \u00fczerine geldi\u011finizde renk de\u011fi\u015ftirdi\u011fini de fark edeceksiniz.<\/p>\n<h3>Ad\u0131m 3: Etkile\u015fim ve \u0130\u015flevsellik Ekleme (global.js veya custom.js)<\/h3>\n<p>Kalp ikonunu ekledik ve stil verdik, harika! Ancak \u015fu an i\u00e7in sadece g\u00f6rsel bir element. T\u0131kland\u0131\u011f\u0131nda ger\u00e7ekten bir \u015feyler yapmas\u0131n\u0131 istiyoruz. Tam te\u015fekk\u00fcll\u00fc bir istek listesi i\u015flevselli\u011fi (\u00fcr\u00fcnleri veritaban\u0131na kaydetme, kullan\u0131c\u0131ya \u00f6zel listeler olu\u015fturma vb.) genellikle Shopify App Store'dan bir istek listesi uygulamas\u0131 veya daha karma\u015f\u0131k arka u\u00e7 ve \u00f6n u\u00e7 entegrasyonu gerektirir. Ancak, ikonun t\u0131kland\u0131\u011f\u0131nda bir g\u00f6rsel geri bildirim vermesi ve temel bir etkile\u015fim sa\u011flamas\u0131 i\u00e7in basit bir JavaScript kodu ekleyebiliriz.<\/p>\n<p>Bu JavaScript kodunu teman\u0131z\u0131n ana JavaScript dosyas\u0131na eklemelisiniz. Bu dosya genellikle <code class=\"language-javascript\">assets\/global.js<\/code>, <code class=\"language-javascript\">assets\/theme.js<\/code> veya <code class=\"language-javascript\">assets\/custom.js<\/code> gibi bir isimle bulunur.<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('DOMContentLoaded', function() {\n  const wishlistButtons = document.querySelectorAll('.wishlist-icon'); \/\/ T\u00fcm istek listesi butonlar\u0131n\u0131 se\u00e7\n\n  wishlistButtons.forEach(button => {\n    button.addEventListener('click', function(event) {\n      event.preventDefault(); \/\/ Varsay\u0131lan buton davran\u0131\u015f\u0131n\u0131 engelle (\u00f6rne\u011fin sayfa yenilenmesini)\n      \n      const productCard = this.closest('.product-card'); \/\/ En yak\u0131n .product-card elementini bul\n      let productId = null;\n\n      \/\/ \u00dcr\u00fcn ID'sini almak i\u00e7in product-card \u00fczerinde bir data-id veya data-product-id \u00f6zelli\u011fi arayabiliriz\n      if (productCard && productCard.dataset.productId) {\n        productId = productCard.dataset.productId;\n      } else {\n        \/\/ Alternatif olarak, e\u011fer product-card \u00fczerinde data-id yoksa,\n        \/\/ butonun i\u00e7indeki bir input alan\u0131ndan veya URL'den ID al\u0131nabilir.\n        \/\/ Bu k\u0131s\u0131m teman\u0131z\u0131n HTML yap\u0131s\u0131na g\u00f6re de\u011fi\u015febilir.\n        console.warn('\u00dcr\u00fcn ID bulunamad\u0131. L\u00fctfen product-card elementine data-product-id eklemeyi d\u00fc\u015f\u00fcn\u00fcn.');\n      }\n\n      \/\/ Basit bir \u00f6rnek: Konsola mesaj yazd\u0131r ve ikonu de\u011fi\u015ftir\n      console.log(<code>\u00dcr\u00fcn ID: ${productId ? productId : &#039;Bilinmeyen&#039;} istek listesine eklendi\/\u00e7\u0131kar\u0131ld\u0131!<\/code>);\n\n      \/\/ \u0130konun stilini de\u011fi\u015ftir (\u00f6rne\u011fin dolgulu\/dolgusuz kalp veya aktif\/pasif s\u0131n\u0131f\u0131)\n      this.classList.toggle('is-active'); \/\/ 'is-active' s\u0131n\u0131f\u0131n\u0131 ekle\/kald\u0131r\n\n      \/\/ Ger\u00e7ek bir istek listesi uygulamas\u0131 burada devreye girer.\n      \/\/ \u00d6rne\u011fin:\n      \/\/ if (this.classList.contains('is-active')) {\n      \/\/   addProductToWishlist(productId); \/\/ \u0130stek listesine ekleme fonksiyonu\n      \/\/ } else {\n      \/\/   removeProductFromWishlist(productId); \/\/ \u0130stek listesinden \u00e7\u0131karma fonksiyonu\n      \/\/ }\n      \/\/ updateWishlistCount(); \/\/ \u0130stek listesindeki \u00fcr\u00fcn say\u0131s\u0131n\u0131 g\u00fcncelleme\n    });\n  });\n});<\/pre>\n<p><\/code><\/p>\n<div class=\"important-note\">\u00d6nemli Not: Yukar\u0131daki JavaScript kodu, sadece bir g\u00f6rsel efekti veya temel bir konsol mesaj\u0131 sa\u011flamak i\u00e7indir. Tam te\u015fekk\u00fcll\u00fc bir istek listesi i\u015flevselli\u011fi (\u00fcr\u00fcnleri kaydetme, kullan\u0131c\u0131n\u0131n listesini g\u00f6r\u00fcnt\u00fcleme vb.) genellikle Shopify App Store'dan bir istek listesi uygulamas\u0131 entegrasyonu veya daha karma\u015f\u0131k \u00f6zel kodlama gerektirir.<\/div>\n<p>JavaScript kodu hakk\u0131nda a\u00e7\u0131klamalar:<\/p>\n<ul>\n<li><code class=\"language-javascript\">document.addEventListener('DOMContentLoaded', function() { ... });<\/code>: Bu, sayfa tamamen y\u00fcklendi\u011finde kodun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu, DOM elementlerine g\u00fcvenle eri\u015febilmemiz i\u00e7in \u00f6nemlidir.<\/li>\n<li><code class=\"language-javascript\">document.querySelectorAll('.wishlist-icon');<\/code>: Sayfadaki t\u00fcm <code class=\"language-html\">.wishlist-icon<\/code> s\u0131n\u0131f\u0131na sahip butonlar\u0131 se\u00e7er.<\/li>\n<li><code class=\"language-javascript\">wishlistButtons.forEach(button => { ... });<\/code>: Her bir istek listesi butonu i\u00e7in bir olay dinleyicisi ekler.<\/li>\n<li><code class=\"language-javascript\">button.addEventListener('click', function(event) { ... });<\/code>: Butona t\u0131kland\u0131\u011f\u0131nda ne olaca\u011f\u0131n\u0131 tan\u0131mlar.<\/li>\n<li><code class=\"language-javascript\">event.preventDefault();<\/code>: Butonun varsay\u0131lan HTML davran\u0131\u015f\u0131n\u0131 (\u00f6rne\u011fin form g\u00f6nderme veya sayfay\u0131 yeniden y\u00fckleme) engeller.<\/li>\n<li><code class=\"language-javascript\">this.closest('.product-card');<\/code> ve <code class=\"language-javascript\">productCard.dataset.productId;<\/code>: Bu k\u0131s\u0131m, hangi \u00fcr\u00fcn\u00fcn t\u0131kland\u0131\u011f\u0131n\u0131 anlamak i\u00e7in kullan\u0131l\u0131r. Genellikle \u00fcr\u00fcn kartlar\u0131n\u0131n HTML yap\u0131s\u0131nda <code class=\"language-html\">data-product-id=\"[\u00fcr\u00fcn ID'si]\"<\/code> gibi \u00f6zel bir nitelik bulunur. Bu kodu kullanabilmek i\u00e7in, <code class=\"language-liquid\">product-card.liquid<\/code> dosyan\u0131zdaki ana \u00fcr\u00fcn kart\u0131 div'ine bu <code class=\"language-html\">data-product-id<\/code> niteli\u011fini eklemeniz gerekebilir. \u00d6rnek: <code class=\"language-html\">\n<div class=\"product-card\" data-product-id=\"{{ product.id }}\"><\/code>.<\/li>\n<li><code class=\"language-javascript\">this.classList.toggle('is-active');<\/code>: Bu sat\u0131r, t\u0131kland\u0131\u011f\u0131nda butona <code class=\"language-css\">is-active<\/code> s\u0131n\u0131f\u0131n\u0131 ekler veya kald\u0131r\u0131r. Bu s\u0131n\u0131f\u0131 kullanarak ikonun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirsiniz (\u00f6rne\u011fin, dolgusuz kalpten dolgulu kalbe ge\u00e7i\u015f).<\/li>\n<\/ul>\n<p>E\u011fer <code class=\"language-css\">is-active<\/code> s\u0131n\u0131f\u0131n\u0131 kullanarak ikonun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek isterseniz, CSS dosyan\u0131za ekleyebilece\u011finiz ek bir stil \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-css\">.wishlist-icon.is-active {\n  background: #f00; \/* Aktif oldu\u011funda k\u0131rm\u0131z\u0131 arka plan *\/\n}\n\n.wishlist-icon.is-active svg {\n  fill: white; \/* Aktif oldu\u011funda beyaz ikon *\/\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu ad\u0131mlar\u0131 tamamlad\u0131\u011f\u0131n\u0131zda, Focal teman\u0131zdaki \u00fcr\u00fcn g\u00f6rsellerinde, mobil uyumlu ve etkile\u015fimli bir istek listesi kalp ikonu yer alacak. Bu k\u00fc\u00e7\u00fck ama etkili ekleme, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirecektir.<\/p>\n<h2>\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve Entegrasyon Senaryolar\u0131: Deneyimi Nas\u0131l Zenginle\u015ftirirsiniz?<\/h2>\n<p>Art\u0131k temel bir istek listesi kalp ikonunu Focal teman\u0131za ba\u015far\u0131yla entegre ettiniz. Tebrikler! Ancak e-ticaret d\u00fcnyas\u0131 s\u00fcrekli geli\u015fiyor ve kullan\u0131c\u0131 beklentileri art\u0131yor. Bu b\u00f6l\u00fcmde, deneyimi daha da zenginle\u015ftirecek, performans\u0131 optimize edecek ve ger\u00e7ek bir i\u015flevsellik katacak ileri d\u00fczey ipu\u00e7lar\u0131na ve entegrasyon senaryolar\u0131na de\u011finece\u011fiz.<\/p>\n<h3>Shopify Uygulamalar\u0131 ile Tam Te\u015fekk\u00fcll\u00fc \u0130stek Listesi Entegrasyonu<\/h3>\n<p>Daha \u00f6nce de belirtti\u011fimiz gibi, sadece g\u00f6rsel bir buton yerine ger\u00e7ek anlamda \u00fcr\u00fcnleri kaydeden, kullan\u0131c\u0131lar\u0131n oturumlar aras\u0131 listelerine eri\u015fmesini sa\u011flayan ve hatta liste payla\u015f\u0131mlar\u0131na imkan veren bir istek listesi i\u00e7in genellikle \u00f6zel bir Shopify uygulamas\u0131 kullanmak en pratik \u00e7\u00f6z\u00fcmd\u00fcr. Shopify App Store'da Growave, Wishlist Plus (Swym), Loox gibi pop\u00fcler istek listesi uygulamalar\u0131 bulunur.<\/p>\n<p>Bu uygulamalar, genellikle kendi JavaScript API'lerini sunarlar. Yapt\u0131\u011f\u0131m\u0131z g\u00f6rsel entegrasyon, bu uygulamalar\u0131n API'leriyle kolayca birle\u015ftirilebilir. \u00d6rne\u011fin, JavaScript kodumuzdaki <code class=\"language-javascript\">console.log()<\/code> yerine, uygulaman\u0131n <code class=\"language-javascript\">SwymAnalytics.addToWishlist(productId)<\/code> gibi bir fonksiyonunu \u00e7a\u011f\u0131rarak ger\u00e7ek bir istek listesi ekleme i\u015flemi ger\u00e7ekle\u015ftirebiliriz. Bu entegrasyon, hem ma\u011faza sahipleri i\u00e7in y\u00f6netim kolayl\u0131\u011f\u0131 sa\u011flar hem de m\u00fc\u015fterilere zengin bir deneyim sunar. Uygulamalar genellikle listeleme sayfalar\u0131, e-posta hat\u0131rlat\u0131c\u0131lar\u0131 ve fiyat d\u00fc\u015f\u00fc\u015f\u00fc bildirimleri gibi ek \u00f6zelliklerle gelir, bu da d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 ciddi \u015fekilde art\u0131rabilir.<\/p>\n<h3>Dinamik SVG \u0130konlar\u0131 ve Durum Y\u00f6netimi<\/h3>\n<p>Kullan\u0131c\u0131 bir \u00fcr\u00fcn\u00fc istek listesine ekledi\u011finde, kalp ikonunun dolgusuzdan dolguluya d\u00f6n\u00fc\u015fmesi gibi g\u00f6rsel bir geri bildirim sa\u011flamak kullan\u0131c\u0131 deneyimini iyile\u015ftirir. Bunu, JavaScript ile <code class=\"language-css\">is-active<\/code> s\u0131n\u0131f\u0131n\u0131 toggle ederek ve bu s\u0131n\u0131fa \u00f6zel CSS stilleri tan\u0131mlayarak yapabilece\u011fimizi zaten g\u00f6rd\u00fck. Ancak, daha dinamik bir yakla\u015f\u0131m i\u00e7in, Liquid kodunda \u00fcr\u00fcn\u00fcn zaten istek listesinde olup olmad\u0131\u011f\u0131n\u0131 kontrol edip (e\u011fer bir istek listesi uygulamas\u0131 veya Local Storage tabanl\u0131 bir \u00e7\u00f6z\u00fcm varsa) ikonun ba\u015flang\u0131\u00e7 durumunu buna g\u00f6re ayarlayabiliriz. Bu, kullan\u0131c\u0131 sayfay\u0131 yeniledi\u011finde veya ba\u015fka bir sayfaya gitti\u011finde ikonun do\u011fru durumu g\u00f6stermesini sa\u011flar.<\/p>\n<pre><code class=\"language-liquid\">{% comment %} product-card.liquid i\u00e7inde {% endcomment %}\n{% assign is_in_wishlist = false %}\n{% comment %} Burada bir istek listesi uygulamas\u0131ndan veya Local Storage'dan kontrol mekanizmas\u0131 ekleyebilirsiniz {% endcomment %}\n{% comment %} \u00d6rne\u011fin: {% if customer.logged_in and customer.metafields.wishlist contains product.id %} {% assign is_in_wishlist = true %} {% endif %} {% endcomment %}\n\n<div class=\"product-card__image-wrapper\">\n  {{ product.featured_media | image_url: width: 535 | image_tag: loading: 'lazy', sizes: '(min-width: 1200px) 360px, (min-width: 768px) 33vw, 50vw' }}\n  \n  <button class=\"wishlist-icon {% if is_in_wishlist %}is-active{% endif %}\" aria-label=\"\u0130stek Listesine Ekle\" data-product-id=\"{{ product.id }}\">\n    {% render 'icon-heart' %}\n  <\/button>\n<\/div><\/pre>\n<p><\/code><\/p>\n<h3>Performans Optimizasyonlar\u0131<\/h3>\n<p>Her eklenen kod par\u00e7ac\u0131\u011f\u0131, sayfa y\u00fckleme h\u0131z\u0131n\u0131 etkileyebilir. Bu nedenle performans optimizasyonu \u00f6nemlidir:<\/p>\n<ul>\n<li><strong>CSS ve JS Minifikasyonu:<\/strong> Shopify genellikle tema dosyalar\u0131n\u0131 otomatik olarak minifiye eder, ancak ekledi\u011finiz \u00f6zel kod par\u00e7ac\u0131klar\u0131n\u0131n da optimize edildi\u011finden emin olun.<\/li>\n<li><strong>Lazy Loading:<\/strong> E\u011fer sayfan\u0131zda \u00e7ok say\u0131da \u00fcr\u00fcn kart\u0131 varsa, her bir ikonun SVG'sini veya arka plan resmini sadece \u00fcr\u00fcn kart\u0131 g\u00f6r\u00fcn\u00fcr hale geldi\u011finde y\u00fcklemek i\u00e7in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\" target=\"_blank\">Intersection Observer API<\/a>'sini kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu, ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<li><strong>K\u00fc\u00e7\u00fck Boyutlu \u0130konlar:<\/strong> SVG ikonlar\u0131, resim dosyalar\u0131na g\u00f6re daha hafiftir ve \u00f6l\u00e7eklenebilirlik sunar. Kullanaca\u011f\u0131n\u0131z ikonlar\u0131n dosya boyutlar\u0131n\u0131n m\u00fcmk\u00fcn oldu\u011funca k\u00fc\u00e7\u00fck oldu\u011fundan emin olun.<\/li>\n<\/ul>\n<div class=\"expert-tip\">Uzman \u0130pucu: \u0130stek listesi butonunuzun performans\u0131n\u0131 art\u0131rmak i\u00e7in, ikonun sadece \u00fcr\u00fcn kart\u0131 g\u00f6r\u00fcn\u00fcr oldu\u011funda y\u00fcklenmesini sa\u011flayacak <code>Intersection Observer<\/code> API'sini kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu, \u00f6zellikle \u00e7ok say\u0131da \u00fcr\u00fcn\u00fcn listelendi\u011fi sayfalarda, sayfa y\u00fckleme h\u0131z\u0131n\u0131z\u0131 optimize eder ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar.<\/div>\n<h3>Vaka Analizi: E-ticaret Sitesinin D\u00f6n\u00fc\u015f\u00fcm\u00fcne Katk\u0131s\u0131<\/h3>\n<p>Bir orta \u00f6l\u00e7ekli moda e-ticaret sitesi olan \"Stil Dura\u011f\u0131\", \u00fcr\u00fcn g\u00f6rsellerine entegre etti\u011fi istek listesi kalp ikonu ile dikkat \u00e7ekici sonu\u00e7lar elde etti. Daha \u00f6nce sadece ayr\u0131 bir istek listesi sayfas\u0131 bulunan ma\u011faza, bu g\u00f6rsel ipucunu ekledikten sonra a\u015fa\u011f\u0131daki de\u011fi\u015fiklikleri g\u00f6zlemledi:<\/p>\n<ul>\n<li><strong>\u0130stek Listesine Eklenme Oran\u0131nda %30 Art\u0131\u015f:<\/strong> \u00dcr\u00fcn kartlar\u0131ndaki an\u0131nda eri\u015filebilir ikon sayesinde, kullan\u0131c\u0131lar\u0131n \u00fcr\u00fcnleri istek listesine eklemesi kolayla\u015ft\u0131.<\/li>\n<li><strong>Sepet Terk Oran\u0131nda %15 D\u00fc\u015f\u00fc\u015f:<\/strong> M\u00fc\u015fteriler, sat\u0131n almaya hen\u00fcz haz\u0131r olmad\u0131klar\u0131 \u00fcr\u00fcnleri sepet yerine istek listesine eklemeye ba\u015flad\u0131, bu da sepetin \"depolama\" alan\u0131 olarak kullan\u0131lmas\u0131n\u0131 azaltt\u0131 ve terk oranlar\u0131n\u0131 d\u00fc\u015f\u00fcrd\u00fc.<\/li>\n<li><strong>Ki\u015fiselle\u015ftirilmi\u015f E-posta Kampanyalar\u0131 ile %20 Daha Y\u00fcksek A\u00e7\u0131lma Oran\u0131:<\/strong> \u0130stek listesi verileri kullan\u0131larak, kullan\u0131c\u0131lara \"\u0130stek listenizdeki \u00fcr\u00fcnlerde indirim var!\" temal\u0131 e-postalar g\u00f6nderildi. Bu kampanyalar, genel kampanya ortalamalar\u0131na g\u00f6re \u00f6nemli \u00f6l\u00e7\u00fcde daha y\u00fcksek a\u00e7\u0131lma ve t\u0131klanma oranlar\u0131 yakalad\u0131.<\/li>\n<li><strong>Ortalama Sipari\u015f De\u011ferinde (AOV) K\u00fc\u00e7\u00fck Art\u0131\u015f:<\/strong> \u0130stek listesine eklenen \u00fcr\u00fcnler, daha sonra sepete eklendi\u011finde genellikle birden fazla \u00fcr\u00fcn olarak eklendi, bu da AOV \u00fczerinde pozitif bir etki yaratt\u0131.<\/li>\n<\/ul>\n<p>Bu vaka analizi, k\u00fc\u00e7\u00fck bir g\u00f6rsel eklemenin bile do\u011fru stratejiyle birle\u015fti\u011finde e-ticaret performans\u0131 \u00fczerinde ne kadar b\u00fcy\u00fck bir etki yaratabilece\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<p>Bu ileri d\u00fczey ipu\u00e7lar\u0131 ve senaryolar, sadece bir kalp ikonu eklemekle kalmay\u0131p, onu bir b\u00fcy\u00fcme stratejisinin par\u00e7as\u0131 haline getirerek ma\u011fazan\u0131z\u0131n potansiyelini tam anlam\u0131yla ortaya \u00e7\u0131karman\u0131za yard\u0131mc\u0131 olacakt\u0131r. M\u00fc\u015fteri deneyimini s\u00fcrekli iyile\u015ftirmek, s\u00fcrd\u00fcr\u00fclebilir bir e-ticaret ba\u015far\u0131s\u0131 i\u00e7in anahtard\u0131r.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Shopify Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine istek listesi kalp ikonu eklemek, k\u00fc\u00e7\u00fck ama olduk\u00e7a etkili bir geli\u015ftirme ad\u0131m\u0131d\u0131r. Bu rehber boyunca, bu \u00f6zelli\u011fi neden eklemeniz gerekti\u011finden, HTML, CSS ve JavaScript kullanarak ad\u0131m ad\u0131m nas\u0131l uygulayaca\u011f\u0131n\u0131za kadar t\u00fcm s\u00fcreci detayl\u0131 bir \u015fekilde ele ald\u0131k. Teman\u0131z\u0131 yedekleme, kodu do\u011fru dosyalara entegre etme ve mobil uyumlulu\u011fu sa\u011flama gibi kritik konulara de\u011findik. Ayr\u0131ca, ileri d\u00fczey ipu\u00e7lar\u0131 ve bir vaka analizi ile bu \u00f6zelli\u011fin i\u015finize nas\u0131l de\u011fer katabilece\u011fini g\u00f6sterdik.<\/p>\n<p>Bu entegrasyon sayesinde, m\u00fc\u015fterilerinizin al\u0131\u015fveri\u015f deneyimini zenginle\u015ftirirken, potansiyel sat\u0131\u015flar\u0131 art\u0131rma ve sepet terk oranlar\u0131n\u0131 d\u00fc\u015f\u00fcrme gibi \u00f6nemli avantajlar elde edeceksiniz. Kullan\u0131c\u0131lar\u0131n be\u011fenilerini g\u00f6rsel olarak kaydetmelerine olanak tan\u0131mak, onlar\u0131n sitenizle daha ki\u015fisel bir ba\u011f kurmalar\u0131n\u0131 sa\u011flar ve gelecekteki al\u0131\u015fveri\u015fleri i\u00e7in bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr. Unutmay\u0131n, e-ticarette detaylar fark yarat\u0131r ve bu t\u00fcr k\u00fc\u00e7\u00fck iyile\u015ftirmeler genel d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z \u00fczerinde b\u00fcy\u00fck bir etkiye sahip olabilir.<\/p>\n<p>Art\u0131k haz\u0131rs\u0131n\u0131z! Bu ad\u0131mlar\u0131 uygulayarak Focal teman\u0131z\u0131n g\u00fcc\u00fcn\u00fc art\u0131r\u0131n ve m\u00fc\u015fterilerinize daha interaktif bir al\u0131\u015fveri\u015f deneyimi sunun. Ba\u015far\u0131lar dileriz!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>1. Soru: \u0130stek listesi ikonunu eklemek sitemin h\u0131z\u0131n\u0131 etkiler mi?<\/strong><\/p>\n<p><strong>Cevap:<\/strong> Do\u011fru kodlama ve optimizasyon ile minimal etki olacakt\u0131r. Makalede sa\u011flad\u0131\u011f\u0131m\u0131z gibi, k\u00fc\u00e7\u00fck CSS ve JavaScript eklemeleri genellikle sayfa h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde yava\u015flatmaz. Ancak, \u00e7ok say\u0131da karma\u015f\u0131k JavaScript kodu eklemek veya optimize edilmemi\u015f SVG'ler kullanmak h\u0131z\u0131 d\u00fc\u015f\u00fcrebilir. SVG ikonlar\u0131 ve minifiye edilmi\u015f kodlar kullanmak, performans\u0131 koruman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<p><strong>2. Soru: Bu \u00f6zellik mobil cihazlarda da d\u00fczg\u00fcn \u00e7al\u0131\u015f\u0131r m\u0131?<\/strong><\/p>\n<p><strong>Cevap:<\/strong> Evet, makalede verilen CSS \u00f6rnekleri mobil uyumlulu\u011fu g\u00f6z \u00f6n\u00fcnde bulundurur (media queries kullan\u0131m\u0131). Do\u011fru responsive tasar\u0131mla, ikonun boyutu ve konumu k\u00fc\u00e7\u00fck ekranlara otomatik olarak uyum sa\u011flayacak ve t\u00fcm cihazlarda estetik ve i\u015flevsel bir g\u00f6r\u00fcn\u00fcm sunacakt\u0131r. Herhangi bir de\u011fi\u015fiklikten sonra farkl\u0131 cihazlarda test etmeyi unutmay\u0131n.<\/p>\n<p><strong>3. Soru: Kalp ikonu yerine farkl\u0131 bir ikon kullanabilir miyim?<\/strong><\/p>\n<p><strong>Cevap:<\/strong> Kesinlikle! Focal teman\u0131z\u0131n ikon k\u00fct\u00fcphanesinden farkl\u0131 bir ikon (<code>{% render &#039;icon-...&#039; %}<\/code>) kullanabilir veya kendi \u00f6zel SVG ikonunuzu do\u011frudan HTML i\u00e7ine ekleyebilirsiniz. E\u011fer kendi SVG ikonunuzu kullan\u0131rsan\u0131z, CSS stilini de bu yeni ikonun boyutlar\u0131na ve renklerine g\u00f6re ayarlaman\u0131z gerekecektir.<\/p>\n<p><strong>4. Soru: \u0130stek listesi i\u015flevselli\u011fi i\u00e7in bir uygulama kullanmam \u015fart m\u0131?<\/strong><\/p>\n<p><strong>Cevap:<\/strong> Tam te\u015fekk\u00fcll\u00fc (\u00fcr\u00fcnleri kaydetme, kullan\u0131c\u0131lara \u00f6zel listeler olu\u015fturma, bildirimler g\u00f6nderme, liste payla\u015f\u0131m\u0131 vb.) bir istek listesi i\u00e7in genellikle bir Shopify uygulamas\u0131 \u00f6nerilir. Bu uygulamalar, arka u\u00e7ta karma\u015f\u0131k veritaban\u0131 y\u00f6netimi ve kullan\u0131c\u0131 deneyimi \u00f6zellikleri sunar. Ancak, sadece g\u00f6rsel bir g\u00f6sterge ve basit bir t\u0131klama tepkisi i\u00e7in kendiniz de temel bir JavaScript i\u015flevi yazabilirsiniz (\u00f6rne\u011fin Local Storage kullanarak).<\/p>\n<p><strong>5. Soru: Kodlar\u0131 yanl\u0131\u015fl\u0131kla bozarsam ne yapmal\u0131y\u0131m?<\/strong><\/p>\n<p><strong>Cevap:<\/strong> Teman\u0131z\u0131n yede\u011fini ald\u0131\u011f\u0131n\u0131z i\u00e7in, olas\u0131 bir sorun an\u0131nda kolayca yedekten geri d\u00f6nebilirsiniz. Bu nedenle yedekleme ad\u0131m\u0131 kritik \u00f6neme sahiptir. Shopify ayr\u0131ca her kod de\u011fi\u015fikli\u011finde eski versiyonlar\u0131 da saklar; bu sayede <code class=\"language-liquid\">.liquid<\/code>, <code class=\"language-css\">.css<\/code> veya <code class=\"language-javascript\">.js<\/code> dosyas\u0131n\u0131n ge\u00e7mi\u015f s\u00fcr\u00fcmlerine de eri\u015ferek belirli bir noktaya geri d\u00f6nebilirsiniz. Kod d\u00fczenleyicide dosyan\u0131n sa\u011f \u00fcst k\u00f6\u015fesindeki \"Older versions\" (Eski s\u00fcr\u00fcmler) se\u00e7ene\u011fine t\u0131klayarak bu s\u00fcr\u00fcmleri g\u00f6rebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-30932","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme<\/title>\n<meta name=\"description\" content=\"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify&#039;\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir &quot;\u0130stek Listesi&quot; kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme\" \/>\n<meta property=\"og:description\" content=\"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify&#039;\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir &quot;\u0130stek Listesi&quot; kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-03T13:02:13+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme\",\"datePublished\":\"2025-10-03T13:02:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\"},\"wordCount\":3861,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\",\"name\":\"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-03T13:02:13+00:00\",\"description\":\"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify'\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir \\\"\u0130stek Listesi\\\" kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme","description":"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify'\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir \"\u0130stek Listesi\" kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/","og_locale":"tr_TR","og_type":"article","og_title":"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme","og_description":"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify'\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir \"\u0130stek Listesi\" kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-03T13:02:13+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme","datePublished":"2025-10-03T13:02:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/"},"wordCount":3861,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/","url":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/","name":"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-03T13:02:13+00:00","description":"E-ticaret sitenizde \u00fcr\u00fcn g\u00f6rsellerinin hemen \u00fczerinde yer alan \u015f\u0131k bir kalp ikonu, m\u00fc\u015fteri deneyimini bir \u00fcst seviyeye ta\u015f\u0131yabilir ve potansiyel sat\u0131\u015flar\u0131 art\u0131rabilir. Bu rehberde, Shopify'\u0131n pop\u00fcler Focal temas\u0131nda \u00fcr\u00fcn g\u00f6rsellerine nas\u0131l bir \"\u0130stek Listesi\" kalp simgesi ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, b\u00f6ylece m\u00fc\u015fterilerinizin ilgisini \u00e7ekecek ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131z\u0131 y\u00fckselteceksiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/shopify-focal-temasinda-urun-gorseline-kalp-istek-listesi-simgesi-ekleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Shopify Focal Temas\u0131nda \u00dcr\u00fcn G\u00f6rseline Kalp \u0130stek Listesi Simgesi Ekleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30932"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30932\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}