En este tutorial te enseño a agregar videos de tiktok gratis en tu tienda de Shopify, sin necesidad de gastar dinero en aplicaciones ni programar código técnico.
Copia y pega este código a continuación en una sección de «liquid personalizado» en tu tienda de Shopify tal y como se explica en el video más adelante:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TikTok Video Viewer</title>
<style>
.slider-containerv8 {
position: relative;
width: 100%;
overflow-x: scroll;
display: flex;
align-items: center;
scroll-snap-type: x mandatory;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0px 10px;
}
.sliderv8 {
display: flex;
gap: 10px;
scroll-snap-type: x mandatory;
}
.slidev8 {
flex: 0 0 60%;
max-width: 360px;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
@media screen and (min-width: 769px){
.slidev8 {
flex: 0 0 50%;
max-width: 260px;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
}
.tiktok-videov8 {
width: 100%;
height: auto;
aspect-ratio: 9 / 16;
border-radius: 10px;
display: block;
}
.play-buttonv8,
.pause-buttonv8 {
position: absolute;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
cursor: pointer;
z-index: 10;
}
.play-buttonv8 {
display: flex;
margin-left: 2px;
}
.pause-buttonv8 {
display: none;
opacity: 1;
transition: opacity 0.5s ease;
}
.pause-buttonv8.hiddenv8 {
opacity: 0;
}
.slider-containerv8::-webkit-scrollbar {
height: 10px;
}
.slider-containerv8::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 10px;
}
.slider-containerv8::-webkit-scrollbar-track {
background: #ddd;
}
.with-borderv8 {
padding: 4px;
border-radius: 10px;
background: linear-gradient(0deg, #fe2d52, #28ffff);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const slides = document.querySelectorAll(".slidev8");
slides.forEach(slide => {
const playButton = slide.querySelector(".play-buttonv8");
const pauseButton = slide.querySelector(".pause-buttonv8");
const video = slide.querySelector("video");
// Configurar autoplay en silencio y en loop
video.muted = true;
video.loop = true;
video.autoplay = true;
let hidePauseButtonTimeout;
const showPauseButton = () => {
pauseButton.classList.remove("hiddenv8");
clearTimeout(hidePauseButtonTimeout);
hidePauseButtonTimeout = setTimeout(() => {
pauseButton.classList.add("hiddenv8");
}, 1000);
};
playButton.addEventListener("click", () => {
// Pausar otros videos con sonido
document.querySelectorAll("video").forEach(v => {
if (v !== video) {
v.muted = true;
const parentSlide = v.closest(".slidev8");
const playBtn = parentSlide.querySelector(".play-buttonv8");
const pauseBtn = parentSlide.querySelector(".pause-buttonv8");
playBtn.style.display = "flex";
pauseBtn.style.display = "none";
}
});
// Activar sonido del video seleccionado
video.muted = false;
video.play();
video.classList.add("playingv8");
playButton.style.display = "none";
pauseButton.style.display = "flex";
showPauseButton();
});
pauseButton.addEventListener("click", () => {
// Silenciar pero seguir reproduciendo
video.muted = true;
video.classList.remove("playingv8");
playButton.style.display = "flex";
pauseButton.style.display = "none";
});
video.addEventListener("mousemove", showPauseButton);
video.addEventListener("click", showPauseButton);
// Evento para cuando el video comienza a reproducirse con sonido
video.addEventListener("volumechange", () => {
if (!video.muted) {
playButton.style.display = "none";
pauseButton.style.display = "flex";
showPauseButton();
} else {
playButton.style.display = "flex";
pauseButton.style.display = "none";
}
});
});
});
</script>
</head>
<body>
<div class="slider-containerv8">
<div class="sliderv8">
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/ab68e4607beb4c459c19be3af968ed80.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src= "https://cdn.shopify.com/videos/c/o/v/ff0302b856f0474f92cddeb801a0c1a9.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/39159fa338734e18af6a82e7f51b759e.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/905e3e9d16db4eb3aaf20ffd726448cd.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/4819786db3ac4123ba7d3c58952b7abc.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/c0c1b86509764e618ec0c459a1740c8d.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/2be83500014240c6a2d463ebb0ad94e9.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
<div class="slidev8">
<div class = "with-borderv8">
<video class = "tiktok-videov8">
<source src="https://cdn.shopify.com/videos/c/o/v/79855bef58f04d2d9c213f8efc0dbf39.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="pause-buttonv8 hiddenv8">❚❚</div>
<div class="play-buttonv8">▷</div>
</div>
</div>
</div>
</body>
</html>¿Cómo agrego este carrusel de videos de TikTok a mi tienda de Shopify?
¿Cómo personalizo esta sección y agrego los videos de mi producto?
Para modificar los videos que aparecen en este carrusel, debes seguir los siguientes pasos:
- Selecciona y descarga 8 videos de TikTok de tu interés. Para descargar los videos sin marca de agua, puedes usar Tikdownloader.
- Una vez descargados los 8 videos, debes subirlos a tu tienda de Shopify en Media > Archivos.
- Copia el código más de más arriba y pégalo en un archivo de Word, bloc de notas o una nota rápida.
- Luego de subidos los videos, debes copiar la URL de cada uno y modificar el código pegado en el Word.
- Modifica la línea de código donde aparece:
- <source src=»https://cdn.shopify.com/videos/c/o/v/ab68e4607beb4c459c19be3af968ed80.mp4″ type=»video/mp4″>
Your browser does not support the video tag.
- <source src=»https://cdn.shopify.com/videos/c/o/v/ab68e4607beb4c459c19be3af968ed80.mp4″ type=»video/mp4″>
- Cambia el la URL: https://cdn.shopify.com/videos/c/o/v/ab68e4607beb4c459c19be3af968ed80.mp4 por la URL del primer video.
- Repite este paso reemplazando las 8 URL de los videos que subiste con las 8 lineas de código similares entre sí.
- Por último, luego de modificadas todas las líneas de código con las nuevas URL de tus videos, copia el código completo y pégalo en una sección o bloque de liquid personalizado como indica el video más arriba. Listo! ya tienes tu carrusel de TikTok personalizado.
¿Cómo conseguir más códigos para personalizar mi tienda de Shopify?
Si te gustó este código y quieres conseguir más, puedes acceder al Pack 100 Códigos Liquid para Shopify con un tremendo descuento sólo por ser mi seguidor!
¿Qué es el Pack de 100 Códigos Liquid para Shopify?
Este exclusivo pack 100 códigos Shopify continen más de 100 códigos Liquid diseñados para mejorar la funcionalidad y apariencia de tu tienda Shopify. Totalmente personalizables, rápidos y compatibles con dispositivos móviles y cualquier tema, estos códigos te permitirán:
- Personalizar tu tienda: Ajusta cada detalle para reflejar tu marca única.
- Mejorar la experiencia del usuario (UX): Ofrece una navegación intuitiva y atractiva.
- Aumentar la tasa de conversión +3% (CRO): Convierte más visitantes en clientes satisfechos. 📈
🎁 BONUSES
BONUS 1
✅ Checklist Ecommerce para optimización de tasa de conversión ($17 USD) INCLUIDO: Lista de más de 120 puntos claves para que mejores y optimices la tasa de conversión de tu Ecommerce.
BONUS 2
✅ Video Turtorial Pack 100 Códigos Liquids para Shopify ($17 USD) INCLUIDO: Video para que aprendas a incluír los codigos liquid personalizados en tu pagina de producto de Shoppify.
BONUS 3
✅ Acceso a Curso de Conversión en Shopify ($37 USD) INCLUIDO: Casi 2 horas de video para que aprendas a convertir más con tu tienda en línea.