Pop

İçeriğinizi erişilebilir halde tutmak için tasarlanan minimalist bir temadır. Küçük ve orta büyüklükte envanterlere sahip mağazalar için ideal olan Pop, içeriğinizi anında erişilebilir halde tutan geniş bir kenar çubuğu gezinme menüsüyle tasarlanmıştır.

Pop kullanan örnek online mağaza

Tema düzenleyicisi

Temanızı özelleştirmek için tema düzenleyicisini kullanın. Tema düzenleyicisi araç çubuğu Bölümler'e ve Tema ayarları'na ayrılmıştır.

Bölümler'i ve Tema ayarları'nı gösteren tema düzenleyicisi araç çubuğu

Mağazanızdaki farklı sayfaların içeriğini ve düzenini değiştirmek için bölümleri kullanabilirsiniz. Mağazanızın yazı tiplerini ve renklerini özelleştirmek için tema ayarlarını kullanabilir, sosyal medya bağlantılarınızda ve ödeme ayarlarınızda değişiklik yapabilirsiniz.

Bölümler, online mağazanızdaki farklı sayfaların düzenini belirleyen, özelleştirilebilir içerik bloklarıdır.

  • Ana sayfa bölümleri, ekleyebileceğiniz, yeniden düzenleyebileceğiniz veya kaldırabileceğiniz slayt gösterisi veya bülten kaydı gibi özellikleri içerir. Ana sayfanızda en fazla 25 bölümünüz olabilir.

  • Her sayfa türünün kendi bölümleri vardır. Örneğin, ürün sayfası bölümü online mağazanızdaki her ürün sayfasının düzenini belirler.

  • Sayfa bölümleri her zaman online mağazanızdaki belirli yerlerde bulunur. Bunları özelleştirebilirsiniz ancak yeniden düzenleyemez veya kaldıramazsınız.

  • Her bir tema, online mağazanızın her sayfasında gösterilen üstbilgi ve altbilgi gibi sabit bölümler içerir.

temasının benzersiz bölümler dizisi ve bunların işletmenize uyacak şekilde nasıl özelleştirileceği hakkında bilgi edinebilirsiniz.

Pop aşağıdaki statik bölümleri içerir:

  • Logo ve menü
  • Duyuru çubuğu
  • Altbilgi
  • Ürün sayfaları
  • Koleksiyon sayfaları
  • Koleksiyonlar listesi sayfası
  • Makale

Dinamik bölümler

Ana sayfanızın düzenini özelleştirmek için dinamik bölümler ekleyebilir, bunları yeniden düzenleyebilir ve kaldırabilirsiniz. Her temanın, arasından seçim yapabileceğiniz benzersiz bir dinamik bölümler grubu vardır.

Pop aşağıdaki dinamik bölümleri içerir:

  • Blog gönderileri
  • Koleksiyon listesi
  • Öne çıkan koleksiyon
  • Image with text (Metinli görsel)
  • Slayt gösterisi
  • Öne çıkan ürün
  • Bülten
  • Harita
  • Zengin metin
  • Video
  • Özel HTML

Ürün sayfaları

Ürün sayfası bölümünde, aşağıdaki öğeleri ekleyebilir veya kaldırabilirsiniz:

  • Ürünün markası veya satıcısı
  • Görsel yakınlaştırma
  • Alakalı ürünler
  • Adet seçici
  • Dinamik ödeme düğmesi
  • Sosyal medya paylaşım simgeleri

Ürün sayfalarının ayarlarını düzenlemek için:

  1. Üst çubuktaki açılır menüden Ürün sayfaları'nı seçin.

  2. Bölümler'e tıklayın.

  3. Ürün sayfası'na tıklayın.

  4. Ürünün markasını veya satıcısını göstermek için Show product vendor (Ürün satıcısını göster) seçeneğini işaretleyin. Bir markanın veya satıcının gösterilmesi için ürüne satıcı eklemeniz gerekir.

  5. Müşterilerin, ürün görselinin üzerine gelerek yakınlaştırma yapabilmesini sağlamak için Enable image zoom (Görsel yakınlaştırmayı etkinleştir) seçeneğini işaretleyin.

  6. Sayfanın alt tarafında bir dizi alakalı ürün göstermek için Show related products (Alakalı ürünler göster) seçeneğini işaretleyin. Ürünün ait olduğu koleksiyon, gösterilen alakalı ürünleri belirler. Alakalı ürünlerin gösterilmesi için, ürüne yönelik bir koleksiyon oluşturmanız veya ürünü mevcut bir koleksiyona eklemeniz gerekir. Ürün bir koleksiyona ait değilse alakalı ürün gösterilmez.

  7. Adet seçici göstermek için Show quantity selector (Adet seçici göster) seçeneğini işaretleyin.

  8. Dinamik ödeme düğmesi göstermek için Show dynamic checkout button (Dinamik ödeme düğmesini göster) seçeneğini işaretleyin.

  9. Sosyal medya paylaşım simgeleri göstermek için Enable product sharing (Ürün paylaşımını etkinleştir) seçeneğini işaretleyin.

  10. Kaydet'e tıklayın.

Bülten

Ana sayfanıza bir bülten kaydı bölümü ekleyebilirsiniz. Bu, e-posta ile pazarlama kampanyaları için müşteri e-posta adreslerini toplamanızı sağlar. Shopify blogunda e-posta ile pazarlama hakkında daha fazla bilgi edinebilirsiniz.

Bir web sitesindeki bülten bölümü. Müşterilerin e-posta adresi girebileceği bir alan ve

Ana sayfanıza bülten kaydı bölümü eklemek için:

  1. Pop sayfasını bulun ve Özelleştir'e tıklayın.

  2. Bölümler'e tıklayın.

  3. Bölüm ekle > Bülten'e tıklayın.

  4. Başlık alanına bülten kaydı bölümünüz için bir başlık girin. Varsayılan başlık "Subscribe to our newsletter" (Bültenimize abone olun) şeklindedir.

  5. Subtext (Alt metin) alanına bülten kaydı bölümünüz için bir alt başlık girin. Varsayılan metin "Promotions, new products and sales. Directly to your inbox" (Promosyonlar, yeni ürünler ve satışlar. Hepsi gelen kutunuzda" şeklindedir.

  6. Background color (Arka plan rengi) numune parçasına tıklayıp bir renk seçerek bülten kaydı bölümü için arka plan rengini ayarlayın.

  7. Kaydet'e tıklayın.

Video

Ana sayfanıza YouTube veya Vimeo'da barındırılan bir videoyu ekleyebilirsiniz. Videolar müşterilerinizin katılımını artırabilir ve dikkatlerini işletmenize çeker.

Ana sayfanıza video eklemek için:

  1. Pop sayfasını bulun ve Özelleştir'e tıklayın.

  2. Bölümler'e tıklayın.

  3. Bölüm ekle > Video'ya tıklayın.

  4. Başlık alanına videonuz için bir başlık girin.

  5. Video link (Video bağlantısı) alanına videonuzun paylaşım bağlantısını girin.

    YouTube paylaşım bağlantısı şu şekilde görünür: https://youtu.be/OTJXAUZY9t0. Bu YouTube Yardım makalesinde bir YouTube videosunun paylaşım bağlantısını nasıl kopyalayacağınızı öğrenebilirsiniz.

    Vimeo paylaşım bağlantısı şu şekilde görünür: https://vimeo.com/281332510. Bu Vimeo Help Center makalesinde bir Vimeo videosunun paylaşım bağlantısını nasıl kopyalayacağınızı öğrenebilirsiniz.

  6. Kaydet'e tıklayın.

Özel HTML

Custom HTML (Özel HTML) bölümünde ana sayfanıza yönelik özel içerik oluşturmak için HTML kodunu kullanabilirsiniz. Örneğin, metin bloklarını biçimlendirmek, tablolar oluşturmak veya üçüncü taraf bir web sitesinden içerik eklemek için HTML'yi kullanabilirsiniz.

Ana sayfanıza özel HTML eklemek için:

  1. Pop sayfasını bulun ve Özelleştir'e tıklayın.

  2. Bölümler'e tıklayın.

  3. Bölüm ekle'ye tıklayın.

  4. Advanced layout (Gelişmiş düzen) alanında Custom HTML (Özel HTML) > Ekle'ye tıklayın.

  5. Custom HTML (Özel HTML) seçeneğine tıklayın ve ana sayfanıza eklemek istediğiniz HTML kodunu girin.

  6. Kaydet'e tıklayın.

Tema ayarları Online mağazanızdaki renkleri ve tipografiyi özelleştirmek için tema ayarlarını kullanabilirsiniz. Ayrıca sosyal medya hesaplarınızın bağlantılarını ayarlayabilir, sepet ayarlarınızı düzenleyebilir ve favicon ekleyebilirsiniz.

Pop aşağıdaki tema ayarlarını içerir:

  • Renkler
  • Baskı
  • Favicon
  • Sepet sayfası
  • Sosyal medya
  • Ödeme

Renkler

Online mağazanızın farklı kısımları için renk seçebilirsiniz.

Renk ayarlarınızı özelleştirme

  1. **** temasının yanındaki Özelleştir seçeneğine tıklayın.

  2. Tema ayarları'na tıklayın.

  3. Renkler'e tıklayın.

  4. Her içerik türünde renk seçiciyi kullanmak için renk numune parçasına tıklayın:

    Tema düzenleyicisindeki renk seçici

- Son seçilen alanı, temanız için en son seçtiğiniz renkleri gösterir. - Şu anda kullanılan alanı, temanızın diğer kısımlarında şu anda kullandığınız renkleri gösterir.

Rengi şeffaf olarak ayarlamak için Hiçbiri seçeneğine tıklayın.

  1. Kaydet'e tıklayın.

Baskı

Online mağazanızdaki metinlerin yazı tipi stilini ve boyutunu ayarlayabilirsiniz.

Tipografi ayarlarınızı özelleştirme

  1. **** temasının yanındaki Özelleştir seçeneğine tıklayın.

  2. Tema ayarları'na tıklayın.

  3. Typography (Tipografi) seçeneğine tıklayın.

  4. Her metin türünde, yazı tipi seçiciyi kullanmak için Değiştir'e tıklayın:

    Yazı tipi seçicideki

  5. Arama alanını kullanarak veya Daha fazla yükle seçeneğine dokunarak yazı tiplerini keşfedin.

    Kullanılabilen tüm yazı tiplerini görmek için Shopify'ın yazı tipi kitaplığına bakın.

  6. Kullanmak istediğiniz yazı tipinin adına tıklayın.

  7. Yazı tipini kalın veya italik gibi farklı bir stile dönüştürmek için Regular (Normal) seçeneğine tıklayın. Daha sonra, kullanmak istediğiniz stile ve ardından Seç'e tıklayın:

    Yazı tipi seçicide kullanılabilen yazı tipi genişlikleri dizisi

  8. Kaydet'e tıklayın.

Sosyal medya

Ürünleriniz ve blog gönderileriniz için sosyal medya paylaşım düğmelerinin yanı sıra sosyal medya hesaplarınızın bağlantılarını ekleyebilirsiniz.

Sosyal medya ayarlarını özelleştirmek için:

  1. Pop sayfasını bulun ve Özelleştir'e tıklayın.

  2. Tema ayarları'na tıklayın.

  3. Sosyal medya'ya tıklayın.

  4. Sosyal medya paylaşım görseli yüklemek için Social sharing image (Sosyal medya paylaşım görseli) alanında Görsel seçin'e veya Ücretsiz görselleri keşfedin'e tıklayın.

  5. Sosyal medya hesaplarınızın bağlantılarını eklemek için Sosyal medya hesapları alanında verilen alanlara hesaplarınızın bağlantılarını girin. https://instagram.com/shopify veya https://twitter.com/shopify şeklinde, bağlantıların tamamını girin.

    Sosyal medya hesaplarınızın bağlantıları, online mağazanızın altbilgisinde gösterilir.

  6. Ürünlerinize ve blog gönderilerinize sosyal medya paylaşım düğmeleri eklemek için Social sharing options (Sosyal medya paylaşım seçenekleri) alanında onay kutularının herhangi birini veya tümünü işaretleyin.

    Aşağıdaki paylaşım düğmelerini ekleyebilirsiniz:

- Facebook'ta paylaş - Twitter'da tweet'le - Pinterest'te pin ekle (blog gönderisi paylaşımı için kullanılamaz)

  1. Kaydet'e tıklayın.

Not: Ürün sayfalarında ve blog gönderilerinde sosyal medya paylaşım düğmeleri göstermek için düğmeleri bu sayfalara ilişkin bölümlerde de etkinleştirmeniz gerekir.

Kenar çubuğuna alt menü ekleme

Ana Menünüze açılan menüler eklemek için Gezinme sayfanızda menüler oluşturmanız gerekir. Bu makale, süreç boyunca size yol gösterecektir.

Optimum mağaza logosu boyutu

Pop teması, logonuzu bir kenar çubuğunda gösterdiğinden bu temada en iyi görünecek logo, orantılı olarak kompakt bir logodur. Genişliği fazla ve yüksekliği nispeten az olan banner benzeri logolar bu temada iyi görünmez.

Logonuz için maksimum genişlik 450 piksel, maksimum yükseklik ise 200 pikseldir. Yüklediğiniz logo dosyası, bu kısıtlamalara uyacak şekilde yeniden boyutlandırılır.

İdeal biçim PNG'dir.

Logonuzu mobil cihazlarda daha büyük yapma

Logonuzu herhangi bir düzende daha büyük hale getirmek için, logo dosyasını Shopify'a yüklemeden önce logo grafiğinizin etrafındaki tüm negatif alanları veya saydam pikselleri kırpmanız son derece önemlidir.

Etrafında bol miktarda negatif alan bulunan bir logoyu aşağıda görebilirsiniz:

Aynı logo, tüm negatif alanlar kırpıldıktan sonra şu şekilde görünür:

Kırpılmamış bir logo, Pop temasında kullanıldığında şu şekilde görünür:

Kırpılmış bir logo, Pop temasında kullanıldığında şu şekilde görünür:

Logonuzun, içerdiği negatif alan nedeniyle küçültülmediğini öğrendikten sonra üstbilginizin yüksekliğini ayarlayarak logonuza genişleme alanı sağlayabilirsiniz. Böylece logonuz büyür.

Tema düzenleyicisine gidin ve Header & Navigation (Üstbilgi ve Gezinme) bölümünde "Sizing > Mobile Menu Height" (Boyutlandırma > Mobil Menü Yüksekliği) değerini artırın.

Logonuzu kenar çubuğunda daha büyük yapma

Logonuzu herhangi bir düzende daha büyük hale getirmek için, logo dosyasını Shopify'a yüklemeden önce logo grafiğinizin etrafındaki tüm negatif alanları veya saydam pikselleri kırpmanız son derece önemlidir.

Etrafında bol miktarda negatif alan bulunan bir logoyu aşağıda görebilirsiniz:

Aynı logo, tüm negatif alanlar kırpıldıktan sonra şu şekilde görünür:

Negatif alan bulunan logo, Pop temasına yüklendiğinde şu şekilde görünür:

Kırpılmış bir logo, Pop temasında kullanıldığında şu şekilde görünür:

Logonuzun, içerdiği negatif alan nedeniyle küçültülmediğini öğrendikten sonra kenar çubuğunuzun genişliğini ayarlayarak logonuza genişleme alanı sağlayabilirsiniz. Böylece logonuz büyür.

Tema düzenleyicisine gidin ve Header & Navigation (Üstbilgi ve Gezinme) bölümünde "Sizing > Mobile Menu Height" (Boyutlandırma > Masaüstü Menüsü Yüksekliği) değerini artırın.

Kenar çubuğu logosunun etrafındaki boşlukları azaltma

Logonuzun üstüne ve altına Pop teması tarafından eklenen herhangi bir dolguyu kaldırmadan önce, görselin kendisinden geliyor olabilecek dolguları kırpmanız son derece önemlidir. Logonuzun dosyasını Shopify'a yüklemeden önce logonuzun etrafındaki negatif alanı veya saydam pikselleri kırpmanız gerekir.

Etrafında bol miktarda negatif alan bulunan bir logoyu aşağıda görebilirsiniz:

Aynı logo, negatif alan kırpıldıktan sonra şu şekilde görünür:

Kırpılmamış bir logo, Pop temasında kullanıldığında şu şekilde görünür:

Kırpılmış bir logo, Pop temasında kullanıldığında şu şekilde görünür:

Tema öğelerinize kırpılmış bir logo yükledikten sonra tema düzenleyicisine giderek kenar çubuğunuzun genişliğini ayarlayabilirsiniz. Header & Navigation (Üstbilgi ve Gezinme) bölümünde, "Sizing > Desktop Menu Width" (Boyutlandırma > Masaüstü Menüsü Genişliği) değerini dilediğiniz şekilde düzenleyin.

Desteklenmeyen nihai bir önlem olarak, logonuzun üstündeki ve altındaki dolguyu azaltmak istiyorsanız şu adımları izleyin:

  1. Öğeler bölümünde, tema stil sayfanızı online kod düzenleyicisinde açmak için timber.scss.liquid öğesine tıklayın veya bu URL'ye gidin.

  2. Dosyanın alt kısmına şunu ekleyin:

```sass {% comment %} The following media query function produces this: @media screen and (min-width: 1025px) { ... } Sidebar is only shown when width > 1025 pixels. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Dosyanızı kaydedin.

Ürün sayfasının ayarlarını düzenleme

Ürün sayfası bölümünde, aşağıdaki öğeleri ekleyebilir veya kaldırabilirsiniz:

  • Ürünün markası veya satıcısı
  • Görsel yakınlaştırma
  • Alakalı ürünler
  • Adet seçici
  • Dinamik ödeme düğmesi
  • Sosyal medya paylaşım simgeleri

Ürün sayfalarının ayarlarını düzenlemek için:

  1. Üst çubuktaki açılır menüden Ürün sayfaları'nı seçin.

  2. Bölümler'e tıklayın.

  3. Ürün sayfası'na tıklayın.

  4. Ürünün markasını veya satıcısını göstermek için Show product vendor (Ürün satıcısını göster) seçeneğini işaretleyin. Bir markanın veya satıcının gösterilmesi için ürüne satıcı eklemeniz gerekir.

  5. Müşterilerin, ürün görselinin üzerine gelerek yakınlaştırma yapabilmesini sağlamak için Enable image zoom (Görsel yakınlaştırmayı etkinleştir) seçeneğini işaretleyin.

  6. Sayfanın alt tarafında bir dizi alakalı ürün göstermek için Show related products (Alakalı ürünler göster) seçeneğini işaretleyin. Ürünün ait olduğu koleksiyon, gösterilen alakalı ürünleri belirler. Alakalı ürünlerin gösterilmesi için, ürüne yönelik bir koleksiyon oluşturmanız veya ürünü mevcut bir koleksiyona eklemeniz gerekir. Ürün bir koleksiyona ait değilse alakalı ürün gösterilmez.

  7. Adet seçici göstermek için Show quantity selector (Adet seçici göster) seçeneğini işaretleyin.

  8. Dinamik ödeme düğmesi göstermek için Show dynamic checkout button (Dinamik ödeme düğmesini göster) seçeneğini işaretleyin.

  9. Sosyal medya paylaşım simgeleri göstermek için Enable product sharing (Ürün paylaşımını etkinleştir) seçeneğini işaretleyin.

  10. Kaydet'e tıklayın.

Pop için en iyi ürün görseli türleri

Yüksek çözünürlüklü fotoğraflar, Pop temasında daha şık ve profesyonel görünür. Bu nedenle, en az 1024 genişliğinde ve 1024 piksel yüksekliğinde görseller kullanmanız gerekir. Görsellerin ölçeği gerektiğinde otomatik olarak düşürüldüğünden kalite ne kadar yüksek olursa görseller de o kadar iyi görünür.

Ürün Sayfaları bölümündeki tema düzenleyicisinde etkinleştirebileceğiniz Görsel Yakınlaştırma işlevini kullanıyorsanız yüksek çözünürlüklü fotoğraflar özellikle önem kazanır:

Ürünlerinizin öne çıkan görsellerinin tümü, koleksiyon sayfalarında en iyi şekilde görünmek için aynı genişlik-yükseklik oranına sahip olmalıdır.

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene