Shopify Mağazanıza TikTok Kaydırmalı Video Nasıl Eklenir?

25 Şubat 2025 Emre Şahin

TikTok içeriğinizi Shopify mağazanızda sergilemek mi istiyorsunuz? Doğru yerdesiniz. Bu kılavuzda, mağazanıza sadece birkaç dakika içinde güzel ve duyarlı bir TikTok kaydırmalı video eklemeyi öğreneceksiniz. Paylaşacağımız bilgiler tüm Shopify temalarıyla çalışır ve herhangi bir kodlama bilgisi veya ek uygulama gerektirmez.

Neden TikTok Videolarını Shopify Mağazanıza Eklemelisiniz?

Kuruluma geçmeden önce, mağazanızda TikTok içeriği yayınlamanın neden akıllıca bir hareket olduğunu kısaca ele alalım:

Kullanıcı tarafından oluşturulan içeriği sergileyerek sosyal kanıtı artırın ve dönüşümleri artırın.
Dinamik video içeriğiyle etkileşimi artırın.
Sosyal medya ile e-ticaret varlığınız arasındaki boşluğu kapatın.
Ürünün özelliklerini ve faydalarını özgün içerikle gösterin.
Düzenli olarak güncellenen TikTok içeriğiyle mağazanızı güncel tutun.

Kurulum Talimatları

TikTok karuselini mağazanıza eklemek için şu basit adımları izleyin:

1. Tema Kodunuza Erişim

Shopify yönetici panelinizde Çevrimiçi Mağaza > Temalar'a gidin
Etkin temanızda "Eylemler"e ve ardından "Kodu düzenle"ye tıklayın

2. Bölüm Dosyasını Oluşturun

Bölümler klasöründe “Yeni bölüm ekle”ye tıklayın
Dosyaya isim verin tiktok-carousel.liquid
Aşağıdaki kodu kopyalayıp yapıştırın:

KOD: 👇🏼

{% schema %}
{
  "name": "TikTok Carousel",
  "class": "shopify-section-tiktok-carousel",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "Follow Us On TikTok"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        {
          "value": "text-left",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        },
        {
          "value": "text-right",
          "label": "Right"
        }
      ],
      "default": "text-center"
    }
  ],
  "max_blocks": 10,
  "blocks": [
    {
      "type": "video",
      "name": "TikTok Video",
      "settings": [
        {
          "type": "text",
          "id": "video_url",
          "label": "TikTok Video URL",
          "info": "Paste the full TikTok video URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "TikTok Carousel",
      "blocks": [
        {
          "type": "video"
        },
        {
          "type": "video"
        },
        {
          "type": "video"
        }
      ]
    }
  ]
}
{% endschema %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.min.js" defer="defer"></script>

<style>
.tiktok-carousel {
  padding: 4rem 0;
  background: #fff;
}

.tiktok-carousel__header {
  margin-bottom: 2rem;
}

.tiktok-carousel__title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.tiktok-carousel__container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

.tiktok-carousel__wrapper {
  margin: 0 -1rem;
}

.tiktok-carousel__slide {
  width: 100%;
  padding: 0 1rem;
}

@media screen and (min-width: 768px) {
  .tiktok-carousel__slide {
    width: 50%;
  }
}

@media screen and (min-width: 990px) {
  .tiktok-carousel__slide {
    width: 33.333%;
  }
}

.tiktok-carousel__video-container {
  position: relative;
  padding-bottom: 177.77%; /* TikTok's aspect ratio (9:16) */
  height: 0;
  background: #f4f4f4;
  border-radius: 12px;
  overflow: hidden;
}

.tiktok-carousel__video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.flickity-button {
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #000;
  transition: all 0.3s ease;
}

.flickity-button:hover {
  background: #000;
  color: #fff;
}

.flickity-button-icon {
  fill: currentColor;
}

.flickity-prev-next-button {
  width: 44px;
  height: 44px;
}

.flickity-prev-next-button.previous {
  left: -22px;
}

.flickity-prev-next-button.next {
  right: -22px;
}

.flickity-page-dots {
  bottom: -2.5rem;
}

.flickity-page-dots .dot {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  background: #e5e5e5;
  transition: all 0.3s ease;
}

.flickity-page-dots .dot.is-selected {
  background: #000;
}
</style>

<div class="tiktok-carousel">
  <div class="tiktok-carousel__container">
    {% if section.settings.title != blank %}
      <div class="tiktok-carousel__header {{ section.settings.text_alignment }}">
        <h2 class="tiktok-carousel__title">{{ section.settings.title }}</h2>
      </div>
    {% endif %}

    {% if section.blocks.size > 0 %}
      <div class="tiktok-carousel__wrapper js-tiktok-carousel" data-flickity='{ 
        "cellAlign": "left",
        "contain": true,
        "prevNextButtons": true,
        "pageDots": true,
        "wrapAround": true,
        "autoPlay": 5000,
        "pauseAutoPlayOnHover": true,
        "dragThreshold": 10,
        "adaptiveHeight": false
      }'>
        {% for block in section.blocks %}
          {% if block.settings.video_url != blank %}
            <div class="tiktok-carousel__slide" {{ block.shopify_attributes }}>
              <div class="tiktok-carousel__video-container">
                <iframe
                  src="https://www.tiktok.com/embed/{{ block.settings.video_url | split: '/' | last }}"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen>
                </iframe>
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    {% else %}
      <div class="tiktok-carousel__empty text-center">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
          <path d="M12 8V16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <p>Add TikTok videos using the theme editor</p>
      </div>
    {% endif %}
  </div>
</div>

{% if section.blocks.size > 0 %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.js-tiktok-carousel');
    if (carousel && typeof Flickity === 'function') {
      new Flickity(carousel, JSON.parse(carousel.getAttribute('data-flickity')));
    }
  });
</script>
{% endif %}

3. Bölümü Mağazanıza Ekleyin

Tema özelleştiricisine geri dönün.
Karuseli eklemek istediğiniz sayfayı seçin.
"Bölüm ekle"ye tıklayın.
Listeden “TikTok Carousel”i seçin.

TikTok Carousel'inizi Özelleştirme

Kurulumdan sonra, tema düzenleyicisi aracılığıyla karuseli kolayca özelleştirebilirsiniz:

1. TikTok Videolarınızı Ekleyin

"TikTok Videosu Ekle"ye tıklayın.
TikTok video URL'sini yapıştırın.
Görüntülemek istediğiniz her video için tekrarlayın.

2. Görünümü Özelleştirin

Bölüm başlığını değiştirin.
Metin hizalamasını ayarlayın.
Sürükle ve bırak kullanarak videoları yeniden düzenleyin.
Farklı cihazlarda nasıl göründüğünü önizleyin.

TikTok Carousel'iniz için En İyi Uygulamalar

Yeni TikTok karuselinizden en iyi şekilde yararlanmak için:

En iyi performans gösteren TikTok içeriğinizi seçin.
İçeriğin tazeliğini korumak için videoları düzenli olarak güncelleyin.
Ürün tanıtımlarını yaşam tarzı içeriğiyle birleştirin.
Çok fazla videoyu aynı anda eklemeyerek videoların hızlı yüklenmesini sağlayın.
Döngüyü farklı cihazlarda test edin.
Bölümü ana sayfanıza veya ürün sayfalarınıza stratejik olarak yerleştirin.

Herhangi bir sorunla karşılaşırsanız:

TikTok video URL'lerinizin doğru ve herkese açık olduğunu doğrulayın.
Kod parçacığının tamamını kopyaladığınızdan emin olun.
Temanızın güncel olduğundan emin olun.
Değişiklikler görünmüyorsa tarayıcınızın önbelleğini temizleyin.

Çözüm

Shopify mağazanıza bir TikTok karuseli eklemek, sosyal medya içeriğinizi değerlendirmenin ve alışveriş deneyiminizi geliştirmenin güçlü bir yoludur. Bu blog, TikTok videolarınızı profesyonel ve ilgi çekici bir şekilde sergilemenizi kolaylaştırır.

Bu blog yazımızda bahsedilen hiçbir marka ile #işbirliğimiz yoktur. Şimdiden iyi çalışmalar diliyoruz.. 🧑🏻‍💻 😊

Bloga dön