¿Qué sección agregarás a
tu tienda Shopify hoy?
Ctrl K
Desplázate para ver más categorías
Pedido por WhatsApp
Sección de prueba social estilo chat de WhatsApp con testimonios de clientes y botón de pedido directo.
<div class="wa-v3-wrapper">
<div class="wa-v3-header">
<h2 class="wa-v3-title" style="color: {{ title_color | default: "#25d366" }};">{{ title_text | default: "Real Customer Feedback" }}</h2>
<p class="wa-v3-subtitle" style="color: {{ subtitle_color | default: "#666" }};">{{ subtitle_text | default: "See what our customers have to say about the setup and usage of the Glow Board." }}</p>
</div>
<div class="wa-v3-grid">
<div class="wa-v3-card">
<div class="wa-v3-card-header" style="background: {{ header_bg | default: "#25d366" }};">
<div class="wa-v3-user">
<div class="wa-v3-avatar">{{ customer_1_initials | default: "SJ" }}</div>
<div class="wa-v3-meta">
<span class="wa-v3-name">{{ customer_1_name | default: "Sarah Jenkins" }}</span>
<span class="wa-v3-online">{{ online_text | default: "Online" }}</span>
</div>
</div>
<div class="wa-v3-icon">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="WhatsApp" role="img" viewBox="0 0 512 512" width="28" height="28">
<rect width="512" height="512" rx="15%" fill="#25d366"></rect>
<path fill="#25d366" stroke="#ffffff" stroke-width="26" d="M123 393l14-65a138 138 0 1150 47z"></path>
<path fill="#ffffff" d="M308 273c-3-2-6-3-9 1l-12 16c-3 2-5 3-9 1-15-8-36-17-54-47-1-4 1-6 3-8l9-14c2-2 1-4 0-6l-12-29c-3-8-6-7-9-7h-8c-2 0-6 1-10 5-22 22-13 53 3 73 3 4 23 40 66 59 32 14 39 12 48 10 11-1 22-10 27-19 1-3 6-16 2-18"></path>
</svg>
</div>
</div>
<div class="wa-v3-chat" style="background: {{ chat_bg | default: "#e5ddd5" }};">
<div class="wa-v3-msg guest">{{ customer_1_msg_1 | default: "Hi! Is the Glow Board easy to set up? I'm getting it for my kids." }}</div>
<div class="wa-v3-msg admin">{{ customer_1_msg_2 | default: "Hi Sarah! It's super easy. You just place it on the stand included in the box." }}</div>
<div class="wa-v3-msg guest">{{ customer_1_msg_3 | default: "Awesome, it'll look great in their playroom. Thanks!" }}</div>
</div>
</div>
<div class="wa-v3-card">
<div class="wa-v3-card-header" style="background: {{ header_bg | default: "#25d366" }};">
<div class="wa-v3-user">
<div class="wa-v3-avatar">{{ customer_2_initials | default: "MS" }}</div>
<div class="wa-v3-meta">
<span class="wa-v3-name">{{ customer_2_name | default: "Michael Smith" }}</span>
<span class="wa-v3-online">{{ online_text | default: "Online" }}</span>
</div>
</div>
<div class="wa-v3-icon">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="WhatsApp" role="img" viewBox="0 0 512 512" width="28" height="28">
<rect width="512" height="512" rx="15%" fill="#25d366"></rect>
<path fill="#25d366" stroke="#ffffff" stroke-width="26" d="M123 393l14-65a138 138 0 1150 47z"></path>
<path fill="#ffffff" d="M308 273c-3-2-6-3-9 1l-12 16c-3 2-5 3-9 1-15-8-36-17-54-47-1-4 1-6 3-8l9-14c2-2 1-4 0-6l-12-29c-3-8-6-7-9-7h-8c-2 0-6 1-10 5-22 22-13 53 3 73 3 4 23 40 66 59 32 14 39 12 48 10 11-1 22-10 27-19 1-3 6-16 2-18"></path>
</svg>
</div>
</div>
<div class="wa-v3-chat" style="background: {{ chat_bg | default: "#e5ddd5" }};">
<div class="wa-v3-msg guest">{{ customer_2_msg_1 | default: "Do the markers actually glow that bright in the light?" }}</div>
<div class="wa-v3-msg admin">{{ customer_2_msg_2 | default: "Yes! The 7 different colors create a vibrant glow on the board." }}</div>
<div class="wa-v3-msg guest">{{ customer_2_msg_3 | default: "Looks cool! Very eye-catching for my store front." }}</div>
</div>
</div>
<div class="wa-v3-card">
<div class="wa-v3-card-header" style="background: {{ header_bg | default: "#25d366" }};">
<div class="wa-v3-user">
<div class="wa-v3-avatar">{{ customer_3_initials | default: "ED" }}</div>
<div class="wa-v3-meta">
<span class="wa-v3-name">{{ customer_3_name | default: "Emily Davis" }}</span>
<span class="wa-v3-online">{{ online_text | default: "Online" }}</span>
</div>
</div>
<div class="wa-v3-icon">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="WhatsApp" role="img" viewBox="0 0 512 512" width="28" height="28">
<rect width="512" height="512" rx="15%" fill="#25d366"></rect>
<path fill="#25d366" stroke="#ffffff" stroke-width="26" d="M123 393l14-65a138 138 0 1150 47z"></path>
<path fill="#ffffff" d="M308 273c-3-2-6-3-9 1l-12 16c-3 2-5 3-9 1-15-8-36-17-54-47-1-4 1-6 3-8l9-14c2-2 1-4 0-6l-12-29c-3-8-6-7-9-7h-8c-2 0-6 1-10 5-22 22-13 53 3 73 3 4 23 40 66 59 32 14 39 12 48 10 11-1 22-10 27-19 1-3 6-16 2-18"></path>
</svg>
</div>
</div>
<div class="wa-v3-chat" style="background: {{ chat_bg | default: "#e5ddd5" }};">
<div class="wa-v3-msg guest">{{ customer_3_msg_1 | default: "Is it easy to erase? Does it leave any stains?" }}</div>
<div class="wa-v3-msg admin">{{ customer_3_msg_2 | default: "It wipes clean instantly with the special cloth provided. No ghosting at all!" }}</div>
<div class="wa-v3-msg guest">{{ customer_3_msg_3 | default: "Perfect, that means I can reuse it over and over. 👍" }}</div>
</div>
</div>
</div>
<div class="wa-v3-stock-status">
<p><span>{{ stock_text | default: "Hurry! Only 7 items left in stock!" }}</span></p>
</div>
<div class="wa-v3-footer">
{% assign phone_number = whatsapp_phone | default: '15551234567' %}
{% assign message_text = whatsapp_message | default: 'I want to place an order.' %}
{% assign encoded_message = message_text | url_encode %}
<a href="https://wa.me/{{ phone_number }}?text={{ encoded_message }}" class="wa-v3-button wa-shimmer-btn" target="_blank" style="background-color: {{ button_bg | default: "#25d366" }};">
<svg class="wa-btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.031 2C6.502 2 2 6.502 2 12.031c0 1.772.463 3.511 1.349 5.045L2.066 22l5.01-1.312a9.987 9.987 0 004.955 1.317c5.529 0 10.031-4.502 10.031-10.031S17.56 2 12.031 2zm0 18.352c-1.526 0-3.023-.401-4.358-1.165l-.312-.179-3.216.843.858-3.133-.198-.315A8.31 8.31 0 013.662 12.03c0-4.613 3.756-8.369 8.369-8.369 4.613 0 8.369 3.756 8.369 8.369 0 4.613-3.756 8.369-8.369 8.369zm4.554-6.264c-.249-.125-1.478-.729-1.707-.813-.229-.083-.396-.125-.562.125-.167.249-.646.812-.792.979-.146.166-.292.187-.542.062-.249-.125-1.053-.388-2.006-1.238-.739-.659-1.239-1.471-1.385-1.721-.146-.249-.016-.383.109-.508.113-.112.25-.291.375-.437.125-.146.167-.249.25-.416.083-.166.042-.312-.021-.437-.062-.125-.562-1.354-.77-1.854-.203-.487-.407-.421-.562-.429h-.479c-.167 0-.437.062-.667.312-.229.25-.875.854-.875 2.083 0 1.229.895 2.416 1.021 2.583.125.167 1.76 2.687 4.265 3.77 2.504 1.083 2.504.722 2.962.679.458-.042 1.478-.604 1.687-1.187.208-.583.208-1.083.146-1.187-.062-.104-.229-.167-.479-.291z"/>
</svg>
{{ button_text | default: "Order via WhatsApp" }}
</a>
</div>
</div>
<style>
.wa-v3-wrapper, .wa-v3-wrapper * { box-sizing: border-box !important; }
.wa-v3-wrapper { width: 100% !important; padding: 40px 0 !important; overflow: hidden !important; margin: 0 auto !important; }
.wa-v3-header { text-align: center !important; margin-bottom: 30px !important; padding: 0 20px !important; }
.wa-v3-title { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; font-weight: 700 !important; margin-bottom: 10px !important; line-height: 1.2 !important; }
.wa-v3-subtitle { font-size: 1rem !important; line-height: 1.4 !important; }
.wa-v3-grid { display: flex !important; gap: 24px !important; overflow-x: auto !important; padding: 10px 20px 30px !important; justify-content: center !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
.wa-v3-grid::-webkit-scrollbar { display: none !important; }
.wa-v3-card { flex: 0 0 300px !important; background: #fff !important; border-radius: 20px !important; box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; scroll-snap-align: center !important; }
.wa-v3-card-header { padding: 12px 15px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; color: #fff !important; }
.wa-v3-user { display: flex !important; align-items: center !important; gap: 10px !important; }
.wa-v3-avatar { width: 38px !important; height: 38px !important; background: rgba(255,255,255,0.2) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: 13px !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.wa-v3-meta { display: flex !important; flex-direction: column !important; }
.wa-v3-name { font-weight: 600 !important; font-size: 14px !important; line-height: 1.2 !important; }
.wa-v3-online { font-size: 11px !important; opacity: 0.9 !important; }
.wa-v3-chat { padding: 20px 15px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; flex-grow: 1 !important; min-height: 260px !important; }
.wa-v3-msg { padding: 10px 14px !important; font-size: 13px !important; line-height: 1.4 !important; max-width: 85% !important; border-radius: 12px !important; position: relative !important; word-wrap: break-word !important; box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important; }
.guest { background: #fff !important; align-self: flex-start !important; border-top-left-radius: 0 !important; color: #000 !important; }
.admin { background: #dcf8c6 !important; align-self: flex-end !important; border-top-right-radius: 0 !important; color: #000 !important; }
.wa-v3-stock-status { text-align: center !important; margin-bottom: 12px !important; padding: 0 20px !important; }
.wa-v3-stock-status p { color: #000000 !important; font-size: 0.85rem !important; opacity: 0.8 !important; margin: 0 !important; letter-spacing: 0.2px !important; }
.wa-v3-stock-status span { font-weight: 600 !important; }
@keyframes wa-sweep {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
@keyframes wa-pulse {
0% { transform: scale(1); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2); }
50% { transform: scale(1.03); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); }
100% { transform: scale(1); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2); }
}
.wa-v3-footer { display: flex !important; justify-content: center !important; padding: 0 20px !important; width: 100% !important; }
.wa-shimmer-btn {
position: relative !important;
overflow: hidden !important;
animation: wa-pulse 2s infinite ease-in-out !important;
}
.wa-shimmer-btn::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
height: 100% !important;
width: 150px !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
animation: wa-sweep 2.5s infinite !important;
transform: skewX(-20deg) !important;
}
.wa-v3-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
color: #fff !important;
padding: 18px 25px !important;
border-radius: 50px !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
width: 100% !important;
max-width: 500px !important;
text-align: center !important;
transition: all 0.3s ease !important;
}
.wa-btn-icon {
width: 24px !important;
height: 24px !important;
fill: currentColor !important;
}
.wa-v3-button:hover { transform: scale(1.05) !important; filter: brightness(1.1) !important; }
@media (max-width: 990px) { .wa-v3-grid { justify-content: flex-start !important; padding-left: 20px !important; } }
@media (max-width: 480px) {
.wa-v3-card { flex: 0 0 85% !important; max-width: 300px !important; }
.wa-v3-header { margin-bottom: 20px !important; }
}
</style>Comentarios Flotantes
Comentarios animados de clientes. Muestra participación activa de la comunidad.
{% style %}
.floating-comments-wrapper {
overflow-x: auto;
padding: 20px 10px;
-webkit-overflow-scrolling: touch;
}
.floating-comments {
display: flex;
gap: 20px;
padding: 10px;
justify-content: {{ alignment | default: "flex-start" }};
}
@media (max-width: 768px) {
.floating-comments {
justify-content: flex-start !important;
}
}
.floating-comment-box {
flex: 0 0 300px;
background: white;
border-radius: 15px;
padding: 15px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
animation: float-animation 4s ease-in-out infinite;
}
.floating-comment-box:nth-child(2) { animation-delay: 1s; }
.floating-comment-box:nth-child(3) { animation-delay: 2s; }
.floating-comment-box:nth-child(4) { animation-delay: 3s; }
.comment-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.comment-header img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.comment-name { font-weight: bold; font-size: 16px; }
.comment-time { color: gray; font-size: 12px; }
.comment-text { font-size: 14px; line-height: 1.5; margin: 10px 0; }
.comment-actions { display: flex; align-items: center; margin: 10px 0; }
.reactions { display: flex; align-items: center; margin-right: 15px; }
.reactions span { font-size: 16px; margin-left: -10px; }
.reactions span:first-child { margin-left: 0; }
.comment-count { font-size: 14px; margin-left: auto; }
.comment-footer {
border-top: 1px solid #e0e0e0;
margin-top: 10px;
padding-top: 10px;
display: flex;
justify-content: space-between;
font-size: 14px;
color: gray;
}
@keyframes float-animation {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.floating-comments-wrapper::-webkit-scrollbar { display: none; }
{% endstyle %}
<div class="floating-comments-wrapper">
<div class="floating-comments">
<!-- Comment 1 -->
<div class="floating-comment-box">
<div class="comment-header">
<img src="{{ comment1_avatar | default: "https://randomuser.me/api/portraits/men/1.jpg" }}" alt="{{ comment1_name | default: "John Doe" }}">
<div class="comment-meta">
<div class="comment-name">{{ comment1_name | default: "John Doe" }}</div>
<div class="comment-time">{{ comment1_time | default: "5h ago" }}</div>
</div>
</div>
<div class="comment-text">{{ comment1_text | default: "This product is fantastic! It has really made a positive difference in my daily routine." }}</div>
<div class="comment-actions">
<div class="reactions">
<span>👍</span>
<span>❤️</span>
<span>😮</span>
</div>
<div class="comment-count">5 Comments</div>
</div>
<div class="comment-footer">
<div>Like</div>
<div>Comment</div>
<div>Share</div>
</div>
</div>
<!-- Comment 2 -->
<div class="floating-comment-box">
<div class="comment-header">
<img src="{{ comment2_avatar | default: "https://randomuser.me/api/portraits/women/1.jpg" }}" alt="{{ comment2_name | default: "Jane Smith" }}">
<div class="comment-meta">
<div class="comment-name">{{ comment2_name | default: "Jane Smith" }}</div>
<div class="comment-time">{{ comment2_time | default: "5h ago" }}</div>
</div>
</div>
<div class="comment-text">{{ comment2_text | default: "This product has changed my life! I cannot believe how effective it is. 🌟" }}</div>
<div class="comment-actions">
<div class="reactions">
<span>👍</span>
<span>❤️</span>
<span>😮</span>
</div>
<div class="comment-count">5 Comments</div>
</div>
<div class="comment-footer">
<div>Like</div>
<div>Comment</div>
<div>Share</div>
</div>
</div>
<!-- Comment 3 -->
<div class="floating-comment-box">
<div class="comment-header">
<img src="{{ comment3_avatar | default: "https://randomuser.me/api/portraits/men/2.jpg" }}" alt="{{ comment3_name | default: "Michael Johnson" }}">
<div class="comment-meta">
<div class="comment-name">{{ comment3_name | default: "Michael Johnson" }}</div>
<div class="comment-time">{{ comment3_time | default: "5h ago" }}</div>
</div>
</div>
<div class="comment-text">{{ comment3_text | default: "Absolutely love it! It is a game changer. 🔥" }}</div>
<div class="comment-actions">
<div class="reactions">
<span>👍</span>
<span>❤️</span>
<span>😮</span>
</div>
<div class="comment-count">5 Comments</div>
</div>
<div class="comment-footer">
<div>Like</div>
<div>Comment</div>
<div>Share</div>
</div>
</div>
<!-- Comment 4 -->
<div class="floating-comment-box">
<div class="comment-header">
<img src="{{ comment4_avatar | default: "https://randomuser.me/api/portraits/women/2.jpg" }}" alt="{{ comment4_name | default: "Emily Davis" }}">
<div class="comment-meta">
<div class="comment-name">{{ comment4_name | default: "Emily Davis" }}</div>
<div class="comment-time">{{ comment4_time | default: "5h ago" }}</div>
</div>
</div>
<div class="comment-text">{{ comment4_text | default: "Highly recommend! Great quality and performance. 👍" }}</div>
<div class="comment-actions">
<div class="reactions">
<span>👍</span>
<span>❤️</span>
<span>😮</span>
</div>
<div class="comment-count">5 Comments</div>
</div>
<div class="comment-footer">
<div>Like</div>
<div>Comment</div>
<div>Share</div>
</div>
</div>
</div>
</div>Antes/Después 2
Transformación antes/después de doble carril con divisor brillante y elementos fluidos.
{% assign before_label = before_label | default: 'Before' %}
{% assign after_label = after_label | default: 'After' %}
{% assign background_gradient = background_gradient | default: '#FFF4F4' %}
{% assign divider_color = divider_color | default: '#8E1919' %}
{% assign divider_shadow_color = divider_shadow_color | default: '#8E1919' %}
{% assign label_before_bg = label_before_bg | default: '#8E1919' %}
{% assign label_after_bg = label_after_bg | default: '#8E1919' %}
{% assign label_before_color = label_before_color | default: 'white' %}
{% assign label_after_color = label_after_color | default: 'white' %}
{% assign slider_height = slider_height | default: '400px' %}
{% assign mobile_slider_height = mobile_slider_height | default: '300px' %}
{% assign item_size = item_size | default: '200px' %}
{% assign item_radius = item_radius | default: '15px' %}
{% assign gap = gap | default: '20px' %}
{% assign animation_duration = animation_duration | default: '20' %}
{% assign before_1 = before_image_1 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_7.png?v=1754843291' %}
{% assign before_2 = before_image_2 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_9.png?v=1754843291' %}
{% assign before_3 = before_image_3 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_10.png?v=1754843291' %}
{% assign before_4 = before_image_4 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_8.png?v=1754843290' %}
{% assign before_5 = before_image_5 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_6.png?v=1754843224' %}
{% assign after_1 = after_image_1 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_12.png?v=1754843557' %}
{% assign after_2 = after_image_2 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_11.png?v=1754843557' %}
{% assign after_3 = after_image_3 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_14.png?v=1754843557' %}
{% assign after_4 = after_image_4 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_12.png?v=1754843557' %}
{% assign after_5 = after_image_5 | default: 'https://cdn.shopify.com/s/files/1/0637/5781/1919/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_13.png?v=1754843556' %}
<style>
.transformation-container * { margin: 0; padding: 0; box-sizing: border-box; }
.transformation-container {
background: {{ background_gradient }};
min-height: auto; display: block;
overflow: hidden; position: relative;
margin: 0; padding: 0;
}
.transformation-wrapper { width: 100%; max-width: 100%; padding: 0 20px; margin: 0; }
.transformation-slider { position: relative; width: 100%; height: {{ slider_height }}; background: transparent;
overflow: hidden;
--step: calc({{ item_size }} + {{ gap }});
}
.transformation-side { position: absolute; width: 50%; height: 100%; overflow: hidden; }
.transformation-before { left: 0; background: transparent; }
.transformation-after { right: 0; background: transparent; }
.transformation-divider { position: absolute; left: 50%; top: 20%; width: 4px; height: 60%;
background: {{ divider_color }}; transform: translateX(-50%);
z-index: 10; box-shadow: 0 0 20px {{ divider_shadow_color }}; }
.transformation-label { position: absolute; top: 20px; padding: 10px 30px; border-radius: 50px; font-weight: bold; font-size: 1.1em;
text-transform: uppercase; letter-spacing: 2px; z-index: 5; }
.transformation-label-before { left: 30px; background: {{ label_before_bg }}; color: {{ label_before_color }}; }
.transformation-label-after { right: 30px; background: {{ label_after_bg }}; color: {{ label_after_color }}; }
.transformation-track { display: flex; position: absolute; top: 50%; left: 0; gap: {{ gap }}; animation-timing-function: linear; animation-iteration-count: infinite; transform: translate(-50%, -50%); }
.transformation-before .transformation-track { animation: transformationFlowRight {{ animation_duration }}s linear infinite; }
.transformation-after .transformation-track { animation: transformationFlowRight {{ animation_duration }}s linear infinite; }
@keyframes transformationFlowRight { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(0, -50%); } }
.transformation-item { flex-shrink: 0; width: {{ item_size }}; height: {{ item_size }}; border-radius: {{ item_radius }}; overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.3s ease; position: relative; display: flex; align-items: center; justify-content: center; font-size: 3em; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.transformation-item:hover { transform: scale(1.05); }
.transformation-item img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.transformation-before .transformation-item { background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%); }
.transformation-after .transformation-item { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
@media (max-width: 768px) {
.transformation-slider { height: {{ mobile_slider_height }}; --step: calc(({{ item_size }} * 0.75) + {{ gap }}); }
.transformation-item { width: calc({{ item_size }} * 0.75); height: calc({{ item_size }} * 0.75); }
.transformation-label { font-size: 0.9em; padding: 8px 20px; }
}
</style>
<div class="transformation-container">
<div class="transformation-wrapper">
<div class="transformation-slider">
<div class="transformation-side transformation-before">
<div class="transformation-label transformation-label-before">{{ before_label }}</div>
<div class="transformation-track">
<div class="transformation-item"><img src="{{ before_1 }}" alt="Before 1" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_2 }}" alt="Before 2" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_3 }}" alt="Before 3" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_4 }}" alt="Before 4" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_5 }}" alt="Before 5" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_1 }}" alt="Before 1 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_2 }}" alt="Before 2 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_3 }}" alt="Before 3 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_4 }}" alt="Before 4 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ before_5 }}" alt="Before 5 repeat" loading="lazy"></div>
</div>
</div>
<div class="transformation-divider"></div>
<div class="transformation-side transformation-after">
<div class="transformation-label transformation-label-after">{{ after_label }}</div>
<div class="transformation-track">
<div class="transformation-item"><img src="{{ after_1 }}" alt="After 1" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_2 }}" alt="After 2" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_3 }}" alt="After 3" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_4 }}" alt="After 4" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_5 }}" alt="After 5" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_1 }}" alt="After 1 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_2 }}" alt="After 2 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_3 }}" alt="After 3 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_4 }}" alt="After 4 repeat" loading="lazy"></div>
<div class="transformation-item"><img src="{{ after_5 }}" alt="After 5 repeat" loading="lazy"></div>
</div>
</div>
</div>
</div>
</div>Tarjetas de Producto Hero
Sección hero animada con 4 tarjetas de producto con calificaciones, descripciones y botones de CTA.
<div class="flavor-section">
<div class="flavor-header">
<h2 class="flavor-title">
<span class="word-wrapper">
<span class="char" style="--i: 1">S</span>
<span class="char" style="--i: 2">H</span>
<span class="char" style="--i: 3">O</span>
<span class="char" style="--i: 4">P</span>
</span>
<span class="word-wrapper">
<span class="char" style="--i: 5">O</span>
<span class="char" style="--i: 6">U</span>
<span class="char" style="--i: 7">R</span>
</span>
<span class="word-wrapper">
<span class="char" style="--i: 8">W</span>
<span class="char" style="--i: 9">O</span>
<span class="char" style="--i: 10">R</span>
<span class="char" style="--i: 11">L</span>
<span class="char" style="--i: 12">D</span>
<span class="char" style="--i: 13">'</span>
<span class="char" style="--i: 14">S</span>
</span>
<span class="word-wrapper">
<span class="char" style="--i: 15">B</span>
<span class="char" style="--i: 16">E</span>
<span class="char" style="--i: 17">S</span>
<span class="char" style="--i: 18">T</span>
</span>
<span class="word-wrapper">
<span class="char" style="--i: 19">M</span>
<span class="char" style="--i: 20">I</span>
<span class="char" style="--i: 21">L</span>
<span class="char" style="--i: 22">K</span>
</span>
</h2>
<p class="flavor-subtext">Our chocolate milk won 67 global awards for its insane flavor.</p>
</div>
<div class="flavor-grid">
<div class="flavor-card card-chocolate">
<div class="img-box">
<img src="https://cdn.shopify.com/s/files/1/0984/0548/2788/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_2000_x_1440_piksel_1800_x_2000_piksel.png?v=1769959374" alt="Chocolate" class="p-img">
</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span>4.9/5 | Loved by 367k</span>
</div>
<h3>Chocolate</h3>
<p class="desc">Made with rare ethically sourced Ghana cocoa. <strong>It's insane!</strong></p>
<a href="#" class="buy-btn btn-chocolate">GRAB YOURS</a>
</div>
<div class="flavor-card card-strawberry">
<div class="img-box">
<img src="https://cdn.shopify.com/s/files/1/0984/0548/2788/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_2000_x_1440_piksel_1800_x_2000_piksel_1.png?v=1769959401" alt="Strawberry" class="p-img">
</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span>4.9/5 | Loved by 367k</span>
</div>
<h3>Strawberry</h3>
<p class="desc">Made with 100% alpine strawberries. <strong>Literal perfection.</strong></p>
<a href="#" class="buy-btn btn-strawberry">GRAB YOURS</a>
</div>
<div class="flavor-card card-cookies">
<div class="img-box">
<img src="https://cdn.shopify.com/s/files/1/0984/0548/2788/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_2000_x_1440_piksel_1800_x_2000_piksel_2.png?v=1769959438" alt="Cookies" class="p-img">
</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span>4.9/5 | Loved by 367k</span>
</div>
<h3>Cookies</h3>
<p class="desc">Loaded with hand-crumbled cocoa wafers. <strong>Pure madness.</strong></p>
<a href="#" class="buy-btn btn-cookies">GRAB YOURS</a>
</div>
<div class="flavor-card card-vanilla">
<div class="img-box">
<img src="https://cdn.shopify.com/s/files/1/0984/0548/2788/files/input_kopyasi_2000_x_2000_px_2000_x_1800_piksel_2000_x_1440_piksel_1800_x_2000_piksel_3.png?v=1769959435" alt="Vanilla" class="p-img">
</div>
<div class="rating">
<span class="stars">★★★★★</span>
<span>4.9/5 | Loved by 367k</span>
</div>
<h3>Vanilla</h3>
<p class="desc">Made with 100% Madagascar vanilla. <strong>Total mayhem.</strong></p>
<a href="#" class="buy-btn btn-vanilla">GRAB YOURS</a>
</div>
</div>
</div>
<style>
.flavor-section {
padding: 60px 20px;
background: #fdfaf5;
text-align: center;
overflow-x: hidden;
}
.flavor-header { margin-bottom: 40px; }
.flavor-title {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
font-weight: 900;
color: #2b2b2b;
text-transform: uppercase;
line-height: 1.1;
margin: 0 auto 15px;
max-width: 1000px;
}
.word-wrapper {
display: flex;
margin-right: 12px;
}
.word-wrapper:last-child { margin-right: 0; }
.char {
display: block;
opacity: 0;
animation: flavor-type 6s infinite;
animation-delay: calc(var(--i) * 0.05s);
font-size: 54px;
}
@keyframes flavor-type {
0% { opacity: 0; transform: scale(1.1); }
5%, 65% { opacity: 1; transform: scale(1); }
75%, 100% { opacity: 0; }
}
.flavor-subtext {
font-size: 16px;
line-height: 1.5;
color: #555;
max-width: 700px;
margin: 0 auto;
}
.flavor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 40px auto 0;
}
.flavor-card {
border-radius: 25px;
padding: 30px 20px;
border: 4px dashed transparent;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.flavor-card:hover { transform: translateY(-8px); }
.card-chocolate { background: #f3e5d8; border-color: #8b5a2b; color: #8b5a2b; }
.card-chocolate h3 { font-size: 32px; }
.card-chocolate .rating { font-size: 13px; }
.card-chocolate .desc { font-size: 14px; }
.card-chocolate .buy-btn { font-size: 16px; }
.card-strawberry { background: #ffe4e9; border-color: #e91e63; color: #e91e63; }
.card-strawberry h3 { font-size: 32px; }
.card-strawberry .rating { font-size: 13px; }
.card-strawberry .desc { font-size: 14px; }
.card-strawberry .buy-btn { font-size: 16px; }
.card-cookies { background: #e1f5fe; border-color: #03a9f4; color: #03a9f4; }
.card-cookies h3 { font-size: 32px; }
.card-cookies .rating { font-size: 13px; }
.card-cookies .desc { font-size: 14px; }
.card-cookies .buy-btn { font-size: 16px; }
.card-vanilla { background: #f9f1b9; border-color: #d4af37; color: #d4af37; }
.card-vanilla h3 { font-size: 32px; }
.card-vanilla .rating { font-size: 13px; }
.card-vanilla .desc { font-size: 14px; }
.card-vanilla .buy-btn { font-size: 16px; }
.img-box { height: 180px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
.p-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rating {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
color: inherit;
}
.stars {
font-size: 16px;
}
.flavor-card h3 {
font-weight: 900;
margin: 5px 0 15px;
text-transform: uppercase;
}
.desc { min-height: 45px; margin-bottom: 25px; color: #333; line-height: 1.4; flex-grow: 1;}
.buy-btn {
display: block;
width: 100%;
padding: 16px 0;
border-radius: 12px;
text-decoration: none;
font-weight: 900;
text-transform: uppercase;
color: white;
letter-spacing: 0.5px;
}
.btn-chocolate { background: #8b5a2b; }
.btn-strawberry { background: #e91e63; }
.btn-cookies { background: #03a9f4; }
.btn-vanilla { background: #d4af37; }
@media (max-width: 1100px) {
.flavor-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
max-width: 850px;
}
}
@media (max-width: 550px) {
.flavor-grid { grid-template-columns: 1fr; max-width: 380px;}
.flavor-section { padding: 40px 15px; }
.flavor-title { font-size: 32px; }
.flavor-card h3 { font-size: 28px; }
}
@media (max-width: 768px) {
.char {
font-size: 32px;
}
}
</style>Hero Pro
Sección hero premium con imagen de fondo borrosa, insignias de características y botones de CTA duales.
<section class="hero-container">
{%- assign desktop_bg = bg_image | default: 'https://cdn.shopify.com/s/files/1/0984/0548/2788/files/Gemini_Generated_Image_43boyk43boyk43bo.png?v=1771242127' -%}
{%- assign mobile_bg = bg_image_mobile | default: 'https://cdn.shopify.com/s/files/1/0984/0548/2788/files/Gemini_Generated_Image_43boyk43boyk43bo.png?v=1771242127' -%}
<picture class="hero-bg-picture">
<source media="(max-width: 768px)" srcset="{{ mobile_bg }}">
<img src="{{ desktop_bg }}" class="hero-bg-image" alt="{{ bg_image_alt | default: "Hero Background" }}">
</picture>
<div class="hero-blur-overlay"></div>
<div class="hero-content">
{%- unless show_sale_badge == false -%}
<div class="sale-badge">{{ sale_badge_text | default: "Now on Sale" }}</div>
{%- endunless -%}
<h1 class="hero-title">{{ title_part1 | default: "Reduce stress." }} <em>{{ title_part2 | default: "Sleep peacefully." }}</em></h1>
{%- unless show_review_badge == false -%}
<div class="review-badge">
<span class="stars">{{ stars | default: "★★★★★" }}</span>
<span class="review-text">{{ review_text | default: "4.8/5 based on 115,130 reviews" }}</span>
</div>
{%- endunless -%}
{%- unless show_features == false -%}
<div class="feature-row">
<div class="feature-item">
<svg class="check-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
{{ feature1 | default: "Balance nervous system" }}
</div>
<div class="feature-item">
<svg class="check-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
{{ feature2 | default: "Instant pain relief" }}
</div>
<div class="feature-item">
<svg class="check-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
{{ feature3 | default: "Clinically tested" }}
</div>
</div>
{%- endunless -%}
<div class="hero-btns">
<a href="{{ shop_link | default: "/collections/all" }}" class="btn btn-shop">{{ shop_text | default: "SHOP NOW" }}</a>
<a href="{{ learn_link | default: "/pages/about" }}" class="btn btn-learn">{{ learn_text | default: "LEARN MORE" }}</a>
</div>
{%- unless show_guarantee == false -%}
<div class="guarantee">
<svg class="check-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
{{ guarantee_text | default: "30-Day Money-Back Guarantee" }}
</div>
{%- endunless -%}
</div>
</section>
{% style %}
.hero-container {
position: relative;
width: 100%;
min-height: {{ min_height | default: "700px" }};
display: flex;
align-items: center;
overflow: hidden;
background-color: {{ container_bg | default: "#0d1520" }};
}
.hero-bg-picture {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Akıllı Blur Katmanı */
.hero-blur-overlay {
position: absolute;
inset: 0;
z-index: 2;
backdrop-filter: blur({{ blur_amount | default: "25px" }});
-webkit-backdrop-filter: blur({{ blur_amount | default: "25px" }});
background: {{ overlay_color | default: "#239ad659" }};
-webkit-mask-image: linear-gradient(to right, black 20%, transparent 65%);
mask-image: linear-gradient(to right, black 20%, transparent 65%);
}
.hero-content {
position: relative;
z-index: 3;
padding: {{ content_padding | default: "60px 8%" }};
max-width: {{ content_max_width | default: "900px" }};
color: {{ text_color | default: "#ffffff" }};
}
.sale-badge {
background: {{ badge_bg | default: "#ffffff33" }};
padding: 6px 14px;
border-radius: {{ badge_border_radius | default: "20px" }};
font-size: {{ badge_font_size | default: "11px" }};
font-weight: 700;
text-transform: uppercase;
display: inline-block;
margin-bottom: 25px;
}
.hero-title {
font-size: {{ title_font_size | default: "68px" }};
line-height: 1.1;
margin-bottom: 25px;
font-weight: 700;
color: {{ title_color | default: "#ffffff" }};
}
/* İnce, italik ve açık mavi vurgu */
.hero-title em {
font-style: italic;
font-weight: 100;
color: {{ em_color | default: "#8cd7ff" }};
}
.review-badge {
background: {{ review_badge_bg | default: "#ffffff1f" }};
padding: 10px 18px;
border-radius: 100px;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 30px;
border: 1px solid {{ review_badge_border | default: "#ffffff26" }};
}
.stars { color: white; font-size: {{ stars_font_size | default: "14px" }}; letter-spacing: 2px; white-space: nowrap; }
.review-text { font-size: {{ review_text_size | default: "13px" }}; white-space: nowrap; opacity: 0.95; }
.feature-row {
display: flex;
gap: 25px;
margin-bottom: 35px;
font-size: {{ feature_font_size | default: "15px" }};
color: {{ feature_color | default: "#ffffff" }};
}
.feature-item { display: flex; align-items: center; gap: 8px; }
.check-icon-svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-btns { display: flex; gap: 15px; margin-bottom: 25px; }
.btn {
height: {{ btn_height | default: "58px" }};
display: flex;
align-items: center;
justify-content: center;
border-radius: {{ btn_border_radius | default: "10px" }};
text-decoration: none;
font-weight: 700;
font-size: {{ btn_font_size | default: "16px" }};
padding: 0 45px;
}
.btn-shop {
background: {{ btn_shop_bg | default: "#239ad6" }};
color: {{ btn_shop_color | default: "white" }};
min-width: 200px;
}
.btn-learn {
background: {{ btn_learn_bg | default: "#0d1520" }};
color: {{ btn_learn_color | default: "white" }};
border: 1px solid {{ btn_learn_border | default: "#ffffff1a" }};
min-width: 180px;
}
.guarantee {
display: flex;
align-items: center;
gap: 8px;
font-size: {{ guarantee_font_size | default: "14px" }};
color: {{ guarantee_color | default: "#ffffff" }};
opacity: 0.9;
}
/* --- MOBİL ÖZEL DÜZENLEME --- */
@media (max-width: 768px) {
.hero-container { min-height: 100vh; align-items: flex-end; }
.hero-blur-overlay {
-webkit-mask-image: linear-gradient(to top, black 35%, transparent 75%);
mask-image: linear-gradient(to top, black 35%, transparent 75%);
}
.hero-content { padding: 40px 20px; text-align: center; width: 100%; padding-bottom: 60px; }
/* Mobil başlık boyutu */
.hero-title { font-size: {{ title_font_size_mobile | default: "32px" }}; margin-bottom: 20px; }
.review-badge {
padding: 8px 15px;
gap: 8px;
margin: 0 auto 25px auto;
}
.stars { font-size: 12px; }
.review-text { font-size: 12px; }
/* 2+1 Dizilimi */
.feature-row {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
gap: 12px 20px;
margin-bottom: 30px;
font-size: 13px;
}
.feature-item:last-child {
grid-column: span 2;
justify-self: center;
}
.hero-btns { flex-direction: column; }
.btn { width: 100%; }
.guarantee { justify-content: center; }
}
{% endstyle %}Widget de Compra Social
Prueba social premium con contador de compras animado e imágenes de perfil. Muestra actividad de compra en tiempo real.
<div class="ratingWidget_Wp76Nm">
<div class="profileImages_Qw59Br">
<img src="{{ profile_1_image | default: "https://randomuser.me/api/portraits/men/1.jpg" }}" alt="{{ profile_1_alt | default: "Profile 1" }}">
<img src="{{ profile_2_image | default: "https://randomuser.me/api/portraits/women/1.jpg" }}" alt="{{ profile_2_alt | default: "Profile 2" }}">
<img class="uniqueReviewImage_Tz89Lp" src="{{ profile_3_image | default: "https://i.hizliresim.com/je7b0fg.jpg" }}" alt="{{ profile_3_alt | default: "Profile 3" }}">
<div class="nameAndVerified_Xz24Ft">
<span>{{ featured_name | default: "Burkisoy" }} and <span id="purchase-count">{{ initial_count | default: "470" }}</span> {{ purchase_text | default: "people purchased" }}</span>
</div>
</div>
</div>
<style>
.ratingWidget_Wp76Nm {
display: flex;
align-items: center;
font-family: {{ font_family | default: 'Arial, sans-serif' }};
padding: {{ widget_padding | default: '0' }};
margin: {{ widget_margin | default: '0' }};
}
.profileImages_Qw59Br {
display: flex;
align-items: center;
margin-right: {{ images_margin_right | default: '20px' }};
}
.profileImages_Qw59Br img {
width: {{ image_size | default: "30px" }};
height: {{ image_size | default: "30px" }};
border-radius: {{ image_border_radius | default: '50%' }};
margin-right: {{ image_overlap | default: "-10px" }};
border: {{ image_border_width | default: "2px" }} solid {{ image_border_color | default: "white" }};
transition: transform 0.2s ease;
}
.profileImages_Qw59Br img:hover {
transform: {{ hover_transform | default: 'scale(1.1)' }};
z-index: 10;
position: relative;
}
.nameAndVerified_Xz24Ft {
display: flex;
align-items: center;
margin-left: {{ text_margin_left | default: '15px' }};
font-size: {{ text_font_size | default: "12px" }};
color: {{ text_color | default: "#333" }};
}
#purchase-count {
font-weight: {{ count_font_weight | default: "bold" }};
color: {{ count_color | default: "#000000" }};
font-size: {{ count_font_size | default: "14px" }};
transition: all 0.3s ease;
}
.count-update {
animation: pulse-count 0.5s ease-in-out;
}
@keyframes pulse-count {
0% { transform: scale(1); }
50% { transform: scale(1.1); color: {{ pulse_color | default: "#007bff" }}; }
100% { transform: scale(1); }
}
</style>
<script>
let purchaseCount = {{ initial_count | default: "470" }};
const purchaseCountElement = document.getElementById("purchase-count");
function updatePurchaseCount() {
let incrementAmount = Math.floor(Math.random() * {{ max_increment | default: "3" }}) + {{ min_increment | default: "1" }};
purchaseCount += incrementAmount;
// Add animation class
purchaseCountElement.classList.add('count-update');
purchaseCountElement.textContent = purchaseCount;
// Remove animation class after animation completes
setTimeout(() => {
purchaseCountElement.classList.remove('count-update');
}, 500);
const nextUpdateDelay = Math.floor(Math.random() * {{ max_delay | default: "6000" }}) + {{ min_delay | default: "2000" }};
setTimeout(updatePurchaseCount, nextUpdateDelay);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', updatePurchaseCount);
} else {
updatePurchaseCount();
}
</script>Estadísticas de Satisfacción
Estadísticas profesionales de satisfacción con métricas de datos convincentes para generar confianza del cliente.
<!-- Satisfaction Section -->
<section style="padding: 48px 16px;background: linear-gradient(180deg,#2c2c2c,#1e1e1e);color:#ffffff">
<div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px">
<!-- Sol Başlık -->
<div style="flex:1 1 40%;min-width:280px">
<h2 style="font-size:40px;font-weight:700;margin:0">
satisfaction <span style="font-style:italic;color:#cab749">you can trust.</span>
</h2>
<p style="margin-top:16px;font-size:18px">We have the data to prove our product works.</p>
</div>
<!-- Sağ İstatistikler -->
<div style="flex:1 1 50%;min-width:280px">
<!-- 1. satır -->
<div style="display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,0.2);padding:16px 0">
<p style="font-size:48px;font-weight:700;color:#cab749;margin:0;min-width:120px">86k+</p>
<p style="margin:0;font-size:16px">Customers have been relieved of their neck and back pain.</p>
</div>
<!-- 2. satır -->
<div style="display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,0.2);padding:16px 0">
<p style="font-size:48px;font-weight:700;color:#cab749;margin:0;min-width:120px">91%</p>
<p style="margin:0;font-size:16px">Reported less neck and back pain within 4 weeks.</p>
</div>
<!-- 3. satır -->
<div style="display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,0.2);padding:16px 0">
<p style="font-size:48px;font-weight:700;color:#cab749;margin:0;min-width:120px">34 of</p>
<p style="margin:0;font-size:16px">Customers reported immediate back pain relief.</p>
</div>
</div>
</div>
</section>Estadísticas de Clientes
Muestra estadísticas de satisfacción del cliente con gráficos de progreso animados.
<div class="customer-stats-container">
<h2 class="customer-stats-title">{{ title | default: "Customer Stats" }}</h2>
<div class="customer-stats-item">
<div class="customer-stats-chart" data-target="{{ stat1_percentage | default: "85" }}">
<div class="customer-stats-percentage">0%</div>
</div>
<p class="customer-stats-text">{{ stat1_text | default: "Said this improved their workflow" }}</p>
</div>
<div class="customer-stats-item">
<div class="customer-stats-chart" data-target="{{ stat2_percentage | default: "92" }}">
<div class="customer-stats-percentage">0%</div>
</div>
<p class="customer-stats-text">{{ stat2_text | default: "Felt more confident using the product" }}</p>
</div>
<div class="customer-stats-item">
<div class="customer-stats-chart" data-target="{{ stat3_percentage | default: "76" }}">
<div class="customer-stats-percentage">0%</div>
</div>
<p class="customer-stats-text">{{ stat3_text | default: "Would recommend to a friend" }}</p>
</div>
</div>
{% style %}
.customer-stats-container {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: stretch;
max-width: 600px;
margin: auto;
padding: 20px;
background: {{ background_color | default: "#ffffff" }};
border-radius: {{ border_radius | default: "8px" }};
}
.customer-stats-title {
font-weight: 600;
font-size: 24px;
text-align: center;
color: {{ title_color | default: "#333333" }};
margin: 0 0 20px 0;
}
.customer-stats-item {
display: flex;
align-items: center;
gap: 15px;
border-bottom: 1px solid {{ border_color | default: "#ddd" }};
padding: 20px 0;
}
.customer-stats-item:last-child {
border-bottom: none;
}
.customer-stats-chart {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
{{ chart_color_start | default: "#1cbcc3" }} 0%,
{{ chart_color_middle | default: "#4abf8f" }} calc(var(--percentage, 0%) / 2),
{{ chart_color_end | default: "#66bb6a" }} var(--percentage, 0%),
{{ chart_background | default: "#ccc" }} 0%
);
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.customer-stats-chart::after {
content: "";
position: absolute;
top: 11%;
left: 11%;
width: 78%;
height: 78%;
background: {{ chart_inner_background | default: "#ffffff" }};
border-radius: 50%;
z-index: 0;
}
.customer-stats-percentage {
font-size: 18px;
font-weight: bold;
z-index: 1;
color: {{ percentage_color | default: "#333333" }};
}
.customer-stats-text {
font-size: 16px;
font-weight: 500;
line-height: 1.4;
margin: 0;
color: {{ text_color | default: "#333333" }};
}
@media (max-width: 600px) {
.customer-stats-chart {
width: 65px;
height: 65px;
}
.customer-stats-percentage {
font-size: 16px;
}
.customer-stats-text {
font-size: 14px;
}
}
{% endstyle %}
<script>
function animatePercentage(chart) {
let percentageText = chart.querySelector('.customer-stats-percentage');
let targetValue = parseInt(chart.getAttribute('data-target'));
let current = 0;
function updateChart() {
if (current <= targetValue) {
chart.style.setProperty('--percentage', current + '%');
percentageText.innerText = current + '%';
current++;
requestAnimationFrame(updateChart);
}
}
updateChart();
}
function handleScroll() {
const charts = document.querySelectorAll('.customer-stats-chart');
const windowHeight = window.innerHeight;
charts.forEach((chart) => {
const chartTop = chart.getBoundingClientRect().top;
if (chartTop < windowHeight - 100 && !chart.classList.contains('animated')) {
animatePercentage(chart);
chart.classList.add('animated');
}
});
}
window.addEventListener('scroll', handleScroll);
document.addEventListener('DOMContentLoaded', handleScroll);
</script>
Desplazar Arriba
Botón flotante de volver arriba. Mejora la navegación en páginas de producto largas.
<div class="page-width container center-button">
<button class="scroll-top-the-top" onclick="scrollToTop()">{{ button_text | default: "Scroll to the top" }}</button>
</div>
<style>
.scroll-top-the-top {
width: max-content;
margin: auto;
margin-top: {{ margin_top | default: "10px" }};
padding: {{ padding | default: "10px" }};
color: {{ text_color | default: "#ffffff" }};
border-radius: {{ border_radius | default: "8px" }};
background-color: {{ button_color | default: "#1cbcc3" }};
border: 1px solid {{ border_color | default: "#2e2f3c" }};
cursor: pointer;
transition: all 0.3s ease;
}
.scroll-top-the-top:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.center-button {
justify-content: center;
display: flex;
}
</style>
<script>
function scrollToTop() {
const duration = {{ scroll_duration | default: "1000" }};
const start = window.pageYOffset;
const end = 0;
const distance = end - start;
const startTime = performance.now();
function easeInOutQuad(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
function animateScroll() {
const currentTime = performance.now();
const timeElapsed = currentTime - startTime;
window.scroll(0, easeInOutQuad(timeElapsed, start, distance, duration));
if (timeElapsed < duration) {
requestAnimationFrame(animateScroll);
} else {
window.scroll(0, end);
}
}
requestAnimationFrame(animateScroll);
}
</script>Insignia Social 2
Insignias de redes sociales mejoradas con múltiples plataformas. Validación social completa.
<link rel="preload" as="image" href="{{ icon_url | default: "https://img.icons8.com/?size=100&id=32323&format=png&color=000000" }}"/>
<div style="
margin-top: {{ margin_top | default: "0.25rem" }};
margin-bottom: {{ margin_bottom | default: "0.25rem" }};
width: 100%
">
<div style="
display: flex;
align-items: center;
justify-content: {{ alignment | default: "center" }};
width: 100%;
gap: {{ gap | default: "8px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "14px" }}
">
<img
src="{{ icon_url | default: "https://img.icons8.com/?size=100&id=32323&format=png&color=000000" }}"
alt="Social"
style="
height: {{ icon_size | default: "20px" }};
width: {{ icon_size | default: "20px" }};
filter: {{ icon_filter | default: "none" }}
"
/>
<span style="color: {{ text_color | default: "#000000" }}">
{{ text | default: "As seen on Instagram" }}
</span>
</div>
</div>Insignia Social
Muestra conteos de seguidores de redes sociales. Validación externa que genera confianza.
<link rel="preload" as="image" href="{{ icon_url | default: "https://img.icons8.com/?size=100&id=118640&format=png&color=000000" }}"/>
<div style="
margin-top: {{ margin_top | default: "0.25rem" }};
margin-bottom: {{ margin_bottom | default: "0.25rem" }};
width: 100%
">
<div style="
display: flex;
align-items: center;
justify-content: {{ alignment | default: "center" }};
width: 100%;
gap: {{ gap | default: "8px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "14px" }}
">
<img
src="{{ icon_url | default: "https://img.icons8.com/?size=100&id=118640&format=png&color=000000" }}"
alt="Social"
style="
height: {{ icon_size | default: "20px" }};
width: {{ icon_size | default: "20px" }};
filter: {{ icon_filter | default: "none" }}
"
/>
<span style="color: {{ text_color | default: "#000000" }}">
{{ text | default: "As seen on TikTok" }}
</span>
</div>
</div>Reseñas Flotantes
Notificaciones de reseñas flotantes animadas. Capta la atención con prueba social.
<div style="background: {{ background_color | default: "#f8f8f8" }}; padding: {{ container_padding | default: "40px 20px" }}; font-family: {{ font_family | default: "-apple-system, BlinkMacSystemFont, sans-serif" }};">
<div style="display: flex; flex-wrap: wrap; gap: {{ gap | default: "16px" }}; justify-content: center;">
<div style="display: contents;">
<!-- Review 1 -->
<div class="review-box" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 0s;">
<img src="{{ avatar_1 | default: "https://randomuser.me/api/portraits/women/1.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_1 | default: "The perfect fall slippers!" }}</span>
</div>
<!-- Review 2 -->
<div class="review-box" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 2.6s;">
<img src="{{ avatar_2 | default: "https://randomuser.me/api/portraits/women/2.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_2 | default: "My new favorite pair of shoes!" }}</span>
</div>
<!-- Review 3 -->
<div class="review-box" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 1.4s;">
<img src="{{ avatar_3 | default: "https://randomuser.me/api/portraits/women/3.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_3 | default: "A MUST buy for fall!" }}</span>
</div>
<!-- Review 4 -->
<div class="review-box" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 3.8s;">
<img src="{{ avatar_4 | default: "https://randomuser.me/api/portraits/men/4.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_4 | default: "10/10 Worth every penny" }}</span>
</div>
<!-- Review 5 -->
<div class="review-box" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 0.8s;">
<img src="{{ avatar_5 | default: "https://randomuser.me/api/portraits/women/5.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_5 | default: "I absolutely love them!" }}</span>
</div>
<!-- Review 6 - Hidden on mobile -->
<div class="review-box hide-on-mobile" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 5s;">
<img src="{{ avatar_6 | default: "https://randomuser.me/api/portraits/women/6.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_6 | default: "Stylish and super comfy!" }}</span>
</div>
<!-- Review 7 - Hidden on mobile -->
<div class="review-box hide-on-mobile" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 1.2s;">
<img src="{{ avatar_7 | default: "https://randomuser.me/api/portraits/men/7.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_7 | default: "OMG! Best autumn shoe!" }}</span>
</div>
<!-- Review 8 - Hidden on mobile -->
<div class="review-box hide-on-mobile" style="background: {{ review_bg | default: "white" }}; border-radius: {{ border_radius | default: "24px" }}; padding: {{ review_padding | default: "16px 20px" }}; width: 100%; max-width: {{ review_max_width | default: "300px" }}; box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.05)" }}; display: flex; align-items: center; gap: {{ avatar_gap | default: "12px" }}; opacity: 0; animation: shakeIn 12s infinite ease-in-out; animation-delay: 4.6s;">
<img src="{{ avatar_8 | default: "https://randomuser.me/api/portraits/women/8.jpg" }}" style="width: {{ avatar_size | default: "40px" }}; height: {{ avatar_size | default: "40px" }}; border-radius: 9999px; border: {{ avatar_border | default: "2px solid #fbc02d" }};">
<span style="font-size: {{ text_size | default: "14px" }}; color: {{ text_color | default: "#333" }};">{{ text_8 | default: "Perfect for comfort!" }}</span>
</div>
</div>
</div>
<style>
@keyframes shakeIn {
0% { opacity: 0; transform: scale(0.9) rotate(0deg); }
10% { opacity: 1; transform: scale(1.05) rotate(2deg); }
15% { transform: scale(0.98) rotate(-2deg); }
20% { transform: scale(1) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translateY(-10px); }
}
@media (min-width: 640px) {
.review-box {
width: calc(50% - 12px) !important;
}
}
@media (min-width: 900px) {
.review-box {
width: calc(33.333% - 12px) !important;
}
}
@media (max-width: 639px) {
.hide-on-mobile {
display: none !important;
}
}
</style>
</div>Personas Viendo
Display de actividad de visitantes en vivo. Prueba social en tiempo real que crea FOMO.
<div class="watching-box">
<div class="watching-icon">
<div class="circle">
<div class="inner-circle"></div>
</div>
</div>
<span class="watching-text">
<strong>{{ people_count | default: "154" }} People</strong> {{ watching_text | default: "are watching this product" }}
</span>
</div>
{% style %}
.watching-box {
display: flex;
align-items: center;
background: {{ background_color | default: "#ffffff" }};
padding: {{ padding | default: "6px 12px" }};
border-radius: {{ border_radius | default: "16px" }};
box-shadow: {{ box_shadow | default: "0px 2px 6px rgba(0, 0, 0, 0.1)" }};
font-size: {{ font_size | default: "14px" }};
color: {{ text_color | default: "#333" }};
font-weight: 400;
max-width: fit-content;
margin: auto;
}
.watching-icon {
display: flex;
align-items: center;
margin-right: {{ icon_margin | default: "6px" }};
}
.circle {
width: {{ circle_size | default: "16px" }};
height: {{ circle_size | default: "16px" }};
border-radius: 50%;
border: 2px solid {{ circle_color | default: "#8dc3e6" }};
display: flex;
align-items: center;
justify-content: center;
animation: pulse 1.5s infinite;
}
.inner-circle {
width: {{ inner_circle_size | default: "8px" }};
height: {{ inner_circle_size | default: "8px" }};
border-radius: 50%;
background: {{ circle_color | default: "#8dc3e6" }};
animation: pulse-inner 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes pulse-inner {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.watching-text {
font-size: {{ font_size | default: "14px" }};
color: {{ text_color | default: "#333" }};
}
.watching-text strong {
font-weight: bold;
}
{% endstyle %}Insignia Más Vendido
Marca artículos populares con etiquetas de más vendido. Valida la elección del cliente.
<div style="
background-color: {{ background_color | default: "#f4f4f4" }};
border-radius: {{ border_radius | default: "30px" }};
padding: {{ padding | default: "6px 16px" }};
display: flex;
align-items: center;
box-shadow: {{ box_shadow | default: "0 4px 10px rgba(0,0,0,0.08)" }};
max-width: fit-content;
font-family: {{ font_family | default: "Arial, sans-serif" }};
">
<div style="
background-color: {{ icon_bg_color | default: "#fff" }};
border-radius: 50%;
width: {{ icon_container_size | default: "26px" }};
height: {{ icon_container_size | default: "26px" }};
display: flex;
align-items: center;
justify-content: center;
margin-right: {{ icon_margin | default: "8px" }};
box-shadow: {{ icon_shadow | default: "0 2px 4px rgba(0,0,0,0.1)" }};
">
<img src="{{ icon_url | default: "https://img.icons8.com/fluency-systems-filled/24/fa314a/fire-element.png" }}" alt="Fire Icon" style="
width: {{ icon_size | default: "16px" }};
height: {{ icon_size | default: "16px" }};
">
</div>
<div style="
font-size: {{ font_size | default: "14px" }};
color: {{ text_color | default: "#000" }};
">
<span style="
color: {{ highlight_color | default: "#e53935" }};
font-weight: {{ highlight_weight | default: "bold" }};
">{{ highlight_text | default: "Best Seller" }}</span>{{ separator | default: " - " }}{{ sales_text | default: "Over 500 sold this week!" }}
</div>
</div>Texto Degradado
Efectos de texto degradado llamativos. Hace que los titulares destaquen y llamen la atención.
<div class="container page-width">
<h2 class="gradient-title">
{{ title_text | default: "Gradient text title goes here" }}
</h2>
</div>
<style>
:root {
--gradient-color-1: {{ gradient_color_1 | default: "#1cbcc3" }};
--gradient-color-2: {{ gradient_color_2 | default: "#4abf8f" }};
--gradient-angle: {{ gradient_angle | default: "45deg" }};
--title-font-size: {{ title_font_size | default: "25px" }};
}
.gradient-title {
background-image: linear-gradient(var(--gradient-angle), var(--gradient-color-1), var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-2) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: {{ font_weight | default: "900" }};
text-align: {{ text_alignment | default: "center" }};
font-size: var(--title-font-size);
padding: {{ padding | default: "20px 0" }};
margin: {{ margin | default: "0" }};
}
.container.page-width {
max-width: {{ container_width | default: "1200px" }};
margin: 0 auto;
padding: {{ container_padding | default: "0 20px" }};
}
@media (max-width: 768px) {
.gradient-title {
text-align: {{ mobile_text_alignment | default: "left" }} !important;
}
}
</style>Insignia de Actividad del Cliente
Muestra acciones de clientes en tiempo real. Prueba social en vivo que fomenta las compras.
<div style="
background-color: {{ background_color | default: "#fdf3e8" }};
border-radius: {{ border_radius | default: "20px" }};
display: flex;
align-items: center;
padding: {{ padding | default: "8px 15px" }};
max-width: {{ max_width | default: "400px" }};
box-shadow: {{ box_shadow | default: "0 2px 6px rgba(0,0,0,0.1)" }};
margin: 0 auto;
justify-content: {{ alignment | default: "flex-start" }};
">
<style>
@media (max-width: 768px) {
div {
justify-content: {{ mobile_alignment | default: "flex-start" }} !important;
}
}
</style>
<!-- Profile Images -->
<div style="display: flex; margin-right: {{ images_margin_right | default: "15px" }};">
<img src="{{ profile_image_1 | default: "https://randomuser.me/api/portraits/women/1.jpg" }}" style="
width: {{ profile_image_size | default: "35px" }};
height: {{ profile_image_size | default: "35px" }};
border-radius: 50%;
border: {{ profile_image_border | default: "2px solid white" }};
margin-left: {{ profile_image_offset | default: "-8px" }};
z-index: 5;
" />
<img src="{{ profile_image_2 | default: "https://randomuser.me/api/portraits/women/2.jpg" }}" style="
width: {{ profile_image_size | default: "35px" }};
height: {{ profile_image_size | default: "35px" }};
border-radius: 50%;
border: {{ profile_image_border | default: "2px solid white" }};
margin-left: {{ profile_image_offset | default: "-8px" }};
z-index: 4;
" />
<img src="{{ profile_image_3 | default: "https://randomuser.me/api/portraits/men/3.jpg" }}" style="
width: {{ profile_image_size | default: "35px" }};
height: {{ profile_image_size | default: "35px" }};
border-radius: 50%;
border: {{ profile_image_border | default: "2px solid white" }};
margin-left: {{ profile_image_offset | default: "-8px" }};
z-index: 3;
" />
<img src="{{ profile_image_4 | default: "https://randomuser.me/api/portraits/men/4.jpg" }}" style="
width: {{ profile_image_size | default: "35px" }};
height: {{ profile_image_size | default: "35px" }};
border-radius: 50%;
border: {{ profile_image_border | default: "2px solid white" }};
margin-left: {{ profile_image_offset | default: "-8px" }};
z-index: 2;
" />
<img src="{{ profile_image_5 | default: "https://randomuser.me/api/portraits/women/5.jpg" }}" style="
width: {{ profile_image_size | default: "35px" }};
height: {{ profile_image_size | default: "35px" }};
border-radius: 50%;
border: {{ profile_image_border | default: "2px solid white" }};
margin-left: {{ profile_image_offset | default: "-8px" }};
z-index: 1;
" />
</div>
<!-- Text Content -->
<div>
<div style="
font-weight: bold;
font-size: {{ title_font_size | default: "14px" }};
color: {{ title_color | default: "#000" }};
">{{ title_text | default: "Limited Stock!" }}</div>
<div style="
font-size: {{ subtitle_font_size | default: "12px" }};
color: {{ subtitle_color | default: "#333" }};
">{{ subtitle_text | default: "Bought 160 Times Today" }}</div>
</div>
</div>Notificación Popular
Muestra ventanas emergentes de compras recientes. Crea FOMO y valida decisiones de compra.
<div class="popular-notification">
<div class="icon-wrapper">
{{ notification_icon | default: "👀" }}
</div>
<div>
{{ notification_text_start | default: "Popular product! In the last 24 hours," }}
<span class="highlighted-number" id="view-count">
{{ notification_count | default: "6,269 people" }}
</span>
{{ notification_text_end | default: "viewed it!" }}
</div>
{% style %}
:root {
--font-family: {{ notification_font_family | default: 'Arial, sans-serif' }};
--font-size: {{ notification_font_size | default: "14px" }};
--text-color: {{ notification_text_color | default: "#333" }};
--icon-size: {{ icon_size | default: "24px" }};
--highlight-color: {{ highlight_color | default: "#5f4b8b" }};
--font-weight-highlight: {{ highlight_weight | default: "bold" }};
--animation-duration: {{ animation_duration | default: "1.5s" }};
--padding: {{ notification_padding | default: "10px" }};
--border-radius: {{ notification_radius | default: "5px" }};
--background-color: {{ background_color | default: "#ffffff" }};
--box-shadow: {{ box_shadow | default: "0 1px 2px rgba(0, 0, 0, 0.05)" }};
}
.popular-notification {
font-family: var(--font-family);
font-size: var(--font-size);
color: var(--text-color);
display: flex;
align-items: center;
padding: var(--padding);
border-radius: var(--border-radius);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
}
.icon-wrapper {
margin-right: 8px;
font-size: var(--icon-size);
animation: bounce-icon var(--animation-duration) infinite;
}
.highlighted-number {
color: var(--highlight-color);
font-weight: var(--font-weight-highlight);
}
@keyframes bounce-icon {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
{% endstyle %}
</div>
<script>
function animateValue(id, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const value = Math.floor(progress * (end - start) + start).toLocaleString();
document.getElementById(id).innerText = `${value} people`;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
document.addEventListener("DOMContentLoaded", function() {
animateValue("view-count", 0, {{ notification_animated_number | default: 6269 }}, {{ animation_duration_ms | default: 5000 }});
});
</script>Pestañas
Organiza la información del producto en pestañas. Diseño limpio que mejora la experiencia del usuario.
<div class="tabs-container">
<div class="tabs-header">
<div class="tab-item active" onclick="showTabContent(this, 'tab1')">
{{ tab_1_title | default: "Tab 1" }}
</div>
<div class="tab-item" onclick="showTabContent(this, 'tab2')">
{{ tab_2_title | default: "Tab 2" }}
</div>
<div class="tab-item" onclick="showTabContent(this, 'tab3')">
{{ tab_3_title | default: "Tab 3" }}
</div>
</div>
<div id="tab1" class="tab-content active">
<p>{{ tab_1_content | default: "Content for Tab 1 goes here." }}</p>
</div>
<div id="tab2" class="tab-content">
<p>{{ tab_2_content | default: "Content for Tab 2 goes here." }}</p>
</div>
<div id="tab3" class="tab-content">
<p>{{ tab_3_content | default: "Content for Tab 3 goes here." }}</p>
</div>
{% style %}
:root {
--tab-font-size: {{ tab_font_size | default: "13px" }};
--tab-font-weight: {{ tab_font_weight | default: "bold" }};
--tab-text-color: {{ tab_text_color | default: "#ffffff" }};
--tab-background-color: {{ tab_background_color | default: "#1cbcc3" }};
--tab-active-text-color: {{ tab_active_text_color | default: "#1b3a57" }};
--tab-active-background-color: {{ tab_active_background_color | default: "#ffffff" }};
--tab-border-radius: {{ tab_border_radius | default: "10px" }};
--tab-padding: {{ tab_padding | default: "10px 0" }};
--tab-gap: {{ tab_gap | default: "0" }};
--content-font-size: {{ content_font_size | default: "13px" }};
--content-background-color: {{ content_background_color | default: "#ffffff" }};
--content-text-color: {{ content_text_color | default: "#333333" }};
}
.tabs-container {
max-width: 500px;
margin: 30px auto;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border-radius: var(--tab-border-radius);
overflow: hidden;
}
.tabs-header {
display: flex;
gap: var(--tab-gap);
}
.tab-item {
flex: 1;
padding: var(--tab-padding);
text-align: center;
font-size: var(--tab-font-size);
font-weight: var(--tab-font-weight);
color: var(--tab-text-color);
background-color: var(--tab-background-color);
cursor: pointer;
transition: all 0.3s ease;
}
.tab-item:first-child {
border-top-left-radius: var(--tab-border-radius);
}
.tab-item:last-child {
border-top-right-radius: var(--tab-border-radius);
}
.tab-item.active {
background-color: var(--tab-active-background-color);
color: var(--tab-active-text-color);
}
.tab-content {
display: none;
padding: 15px;
font-size: var(--content-font-size);
background-color: var(--content-background-color);
color: var(--content-text-color);
border-bottom-left-radius: var(--tab-border-radius);
border-bottom-right-radius: var(--tab-border-radius);
}
.tab-content.active {
display: block;
}
{% endstyle %}
</div>
<script>
function showTabContent(clickedTab, tabId) {
const allTabs = document.querySelectorAll('.tab-item');
const allContents = document.querySelectorAll('.tab-content');
allTabs.forEach(tab => tab.classList.remove('active'));
allContents.forEach(content => content.classList.remove('active'));
clickedTab.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
</script>Insignia de Más Vendido
Destaca los productos más vendidos. Prueba social que impulsa decisiones de compra.
<div style="
display: flex;
border: 2px solid {{ border_color | default: "#e94e77" }};
border-radius: {{ border_radius | default: "8px" }};
overflow: hidden;
background-color: {{ background_color | default: "#ffffff" }};
max-width: {{ max_width | default: "320px" }};
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<div style="
background-color: {{ badge_bg_color | default: "#e94e77" }};
color: {{ badge_text_color | default: "#ffffff" }};
font-weight: {{ badge_font_weight | default: "700" }};
font-size: {{ badge_font_size | default: "14px" }};
padding: {{ badge_padding | default: "12px 16px" }};
display: flex;
align-items: center;
border-right: 2px solid {{ border_color | default: "#e94e77" }};
">
{{ badge_number | default: "#1" }}
</div>
<div style="padding: {{ content_padding | default: "10px 14px" }};">
<div style="
font-size: {{ title_font_size | default: "14px" }};
font-weight: {{ title_font_weight | default: "700" }};
color: {{ title_color | default: "#000000" }};
">{{ title_text | default: "BESTSELLER OF 2024" }}</div>
<div style="
font-size: {{ subtitle_font_size | default: "13px" }};
font-style: {{ subtitle_font_style | default: "italic" }};
color: {{ subtitle_color | default: "#6b6b6b" }};
margin-top: {{ subtitle_margin_top | default: "2px" }};
">{{ subtitle_text | default: "The best against the cold" }}</div>
</div>
</div>Sin Riesgo
Botón de garantía sin riesgo con prueba social.
<div class="uniqueBodyIdentifier_ab89x73lmn" style="margin: 0; padding: {{ topPadding | default: "20px" }} 0 {{ bottomPadding | default: "20px" }} 0; display: flex; justify-content: center; align-items: center; background-color: transparent;">
<div class="contentWrapper_xz98mn45qwe" style="width: 100%; text-align: center; padding: 0; margin: 0;">
<div class="textAboveButton_12lm45xzq" style="font-size: 18px; margin: 0 0 {{ textMargin | default: "6px" }} 0; color: {{ textColor | default: "#4a4a4a" }};">
<span class="highlight_89mnx12opq" style="color: {{ highlightColor | default: "#000" }}; font-weight: bold;">{{ socialProofNumber | default: "7k+" }}</span> {{ socialProofText | default: "bought in past month" }}
</div>
<a href="{{ buttonLink | default: "#" }}" class="buttonStyle_xz23mn89qwe" style="display: inline-block; width: 100%; font-size: 16px; font-weight: bold; color: {{ buttonTextColor | default: "#fff" }}; background: {{ buttonGradient | default: "linear-gradient(to right, #34d2a0, #30a560)" }}; padding: {{ buttonPadding | default: "10px" }}; border-radius: {{ borderRadius | default: "4px" }}; cursor: pointer; text-decoration: none; transition: background 0.3s ease; border: none; box-sizing: border-box;">
{{ buttonText | default: "RISK FREE! Get a refund and keep the item." }}
</a>
</div>
</div>
<style>
@media (max-width: 768px) {
.uniqueBodyIdentifier_ab89x73lmn {
padding: calc({{ topPadding | default: "20px" }} * 0.75) 0 calc({{ bottomPadding | default: "20px" }} * 0.75) 0 !important;
}
.textAboveButton_12lm45xzq {
font-size: 16px !important;
margin-bottom: calc({{ textMargin | default: "6px" }} * 0.8) !important;
}
.buttonStyle_xz23mn89qwe {
font-size: 14px !important;
padding: calc({{ buttonPadding | default: "10px" }} * 0.8) !important;
}
}
@media (max-width: 480px) {
.uniqueBodyIdentifier_ab89x73lmn {
padding: calc({{ topPadding | default: "20px" }} * 0.5) 0 calc({{ bottomPadding | default: "20px" }} * 0.5) 0 !important;
}
.textAboveButton_12lm45xzq {
font-size: 14px !important;
margin-bottom: calc({{ textMargin | default: "6px" }} * 0.6) !important;
}
.buttonStyle_xz23mn89qwe {
font-size: 13px !important;
padding: calc({{ buttonPadding | default: "10px" }} * 0.6) !important;
}
}
</style>Insignia de Nombre de Producto
Componente de insignia de doble caja que muestra el nombre del producto e información de origen.
<!-- Product Name Badge -->
<div class="product-header-badge">
<!-- Left Box -->
<div class="product-box-left">
<span class="product-title">{{ product_title | default: "#1 Best-Selling Face Filler" }}</span>
</div>
<!-- Right Box -->
<div class="product-box-right">
<!-- Flag Emoji -->
<span class="product-flag">{{ flag_emoji | default: "🇰🇷" }}</span>
<span class="product-origin">{{ origin_text | default: "Made in Korea" }}</span>
</div>
</div>
{% style %}
.product-header-badge {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-top: {{ top_margin | default: "0" }}px;
margin-bottom: {{ bottom_margin | default: "0" }}px;
}
.product-box-left,
.product-box-right {
display: flex;
align-items: center;
gap: 8px;
padding: {{ vertical_padding | default: "6" }}px {{ horizontal_padding | default: "10" }}px;
background: {{ background_color | default: "#FFE5E5" }};
border-radius: {{ border_radius | default: "6" }}px;
}
.product-flag {
font-size: 1em;
line-height: 1;
}
.product-title,
.product-origin {
color: {{ text_color | default: "#000000" }};
font-size: 14px;
font-weight: 500;
}
/* Mobile friendly */
@media (max-width: 480px) {
.product-header-badge {
gap: 8px;
}
.product-box-left,
.product-box-right {
padding: {{ vertical_padding | default: "6" }}px {{ horizontal_padding | default: "10" }}px;
}
.product-title,
.product-origin {
font-size: 12px;
}
.product-flag {
font-size: 0.9em;
}
}
{% endstyle %}
Barra de Anuncio Desplazable 2
Banner de texto de desplazamiento dinámico. Mantiene los mensajes clave constantemente visibles.
<div class="unique-announcement-bar-v1">
<span class="helps-with-text">{{ header_text | default: "NO MORE" }}</span>
<div class="unique-announcement-wrapper-v1">
{% for i in (1..6) %}
<div class="unique-announcement-text-v1">{{ scrolling_text_1 | default: "LESS TANGLES" }}</div>
<div class="unique-announcement-text-v1"> - </div>
<div class="unique-announcement-text-v1">{{ scrolling_text_2 | default: "LESS ACNES" }}</div>
<div class="unique-announcement-text-v1"> - </div>
<div class="unique-announcement-text-v1">{{ scrolling_text_3 | default: "IRRITATED SKIN" }}</div>
<div class="unique-announcement-text-v1"> - </div>
<div class="unique-announcement-text-v1">{{ scrolling_text_4 | default: "PSORIASIS" }}</div>
<div class="unique-announcement-text-v1"> - </div>
<div class="unique-announcement-text-v1">{{ scrolling_text_5 | default: "HARD WATER" }}</div>
<div class="unique-announcement-text-v1"> - </div>
{% endfor %}
</div>
</div>
{% style %}
.unique-announcement-bar-v1 {
width: 100%;
padding: {{ padding | default: "20px 0" }};
overflow: hidden;
position: relative;
border: {{ border_style | default: "1px solid" }} {{ border_color | default: "#2e2f3c" }};
border-left: none;
border-right: none;
background: {{ background_color | default: "#f9f9f9" }};
justify-content: center;
align-items: center;
}
.helps-with-text {
text-align: center;
font-weight: {{ header_font_weight | default: "500" }};
color: {{ header_color | default: "#2e2f3c" }};
margin-bottom: {{ header_margin | default: "15px" }};
font-size: {{ header_font_size | default: "16px" }};
width: 100%;
display: inline-flex;
justify-content: center;
}
.unique-announcement-wrapper-v1 {
display: flex;
white-space: nowrap;
animation: scroll-left {{ scroll_duration | default: "15" }}s linear infinite;
}
.unique-announcement-text-v1 {
color: {{ text_color | default: "#2e2f3c" }};
font-size: {{ text_font_size | default: "20px" }};
font-weight: {{ text_font_weight | default: "bold" }};
margin-right: {{ text_spacing | default: "25px" }};
letter-spacing: {{ letter_spacing | default: "-0.5px" }};
}
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media (max-width: 768px) {
.unique-announcement-wrapper-v1 {
animation: scroll-left {{ mobile_scroll_duration | default: "12" }}s linear infinite;
}
.unique-announcement-text-v1 {
font-size: {{ mobile_text_font_size | default: '20px' }};
}
.helps-with-text {
font-size: {{ mobile_header_font_size | default: '16px' }};
}
}
{% endstyle %}Insignia de Artículos Restantes
Muestra el conteo de stock restante. Crea escasez e impulsa la acción inmediata.
<div class="items-left-badge-wrapper" style="
display: flex;
justify-content: {{ alignment | default: "flex-start" }};
width: 100%;
gap: {{ badge_gap | default: "8px" }};
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<style>
.items-left-badge {
display: inline-flex;
align-items: center;
background-color: {{ badge_bg_color | default: "#ffdede" }};
color: {{ badge_text_color | default: "#b22222" }};
padding: 3px 5px;
border-radius: 5px;
font-size: 10px;
font-weight: bold;
text-align: center;
position: relative;
}
@media (max-width: 768px) {
.items-left-badge-wrapper {
justify-content: {{ mobile_alignment | default: "flex-start" }} !important;
}
}
.items-left-badge span {
display: flex;
align-items: center;
}
.items-left-badge .icon {
margin-right: 4px;
display: flex;
align-items: center;
justify-content: center;
color: {{ icon_color | default: "#b22222" }};
}
.items-left-badge .icon svg {
width: 12px;
height: 12px;
}
.items-left-badge .flame-icon svg {
animation: flame-animation 2s infinite;
}
.items-left-badge .clock-icon svg {
animation: clock-animation 2s infinite;
}
@keyframes flame-animation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
@keyframes clock-animation {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
}
</style>
<div class="items-left-badge">
<span>
<div class="icon flame-icon">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M32 2C19 15 9 26 9 38c0 8 6 14 14 14s14-6 14-14c0-8-6-14-14-14s-14 6-14 14c0 8 6 14 14 14s14-6 14-14c0-8-6-14-14-14S18 22 18 30c0 8 6 14 14 14s14-6 14-14c0-8-6-14-14-14z"/>
</svg>
</div>
{{ badge_text | default: "8 items left at this price" }}
</span>
</div>
<div class="items-left-badge">
<span>
<div class="icon clock-icon">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="30" stroke="currentColor" stroke-width="4" fill="none"/>
<line x1="32" y1="32" x2="32" y2="12" stroke="currentColor" stroke-width="4"/>
<line x1="32" y1="32" x2="44" y2="32" stroke="currentColor" stroke-width="4"/>
</svg>
</div>
{{ limited_stock_text | default: "Limited stock available!" }}
</span>
</div>
</div>Insignia de Cuenta Regresiva
Temporizador de cuenta regresiva para oferta por tiempo limitado. Crea urgencia y aumenta las compras inmediatas.
<div class="countdown-badge-wrapper-rU3gXz">
<div class="badge-rU3gXz">
<span class="badge-text-rU3gXz">
<svg class="badge-icon-rU3gXz" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="#b22222" stroke-width="2" fill="none"/>
<line x1="12" y1="12" x2="12" y2="6" stroke="#b22222" stroke-width="2" class="badge-hand-rU3gXz"/>
<line x1="12" y1="12" x2="16" y2="12" stroke="#b22222" stroke-width="2"/>
</svg>
{{ countdown_text | default: "Black Friday Special:" }}
</span>
</div>
<div class="timer-rU3gXz" id="countdown-rU3gXz">00:00:00</div>
{% style %}
.countdown-badge-wrapper-rU3gXz {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
font-family: Arial, sans-serif;
background: transparent;
padding: 0;
margin: 0;
}
.badge-rU3gXz {
display: inline-flex;
align-items: center;
background-color: {{ badge_bg_color | default: "#fff0f0" }};
color: {{ badge_text_color | default: "#b22222" }};
padding: {{ badge_padding | default: "6px 10px" }};
border-radius: {{ badge_radius | default: "4px" }};
font-size: {{ badge_font_size | default: "12px" }};
font-weight: bold;
}
.badge-text-rU3gXz {
display: flex;
align-items: center;
gap: 6px;
}
.badge-icon-rU3gXz {
width: {{ icon_size | default: "16px" }};
height: {{ icon_size | default: "16px" }};
animation: spin-hand-rU3gXz 2s linear infinite;
transform-origin: center center;
display: inline-block;
}
.timer-rU3gXz {
font-weight: bold;
font-size: {{ timer_font_size | default: "12px" }};
color: {{ timer_color | default: "#b22222" }};
}
@keyframes spin-hand-rU3gXz {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
{% endstyle %}
</div>
<script>
let countdownMinutes = {{ countdown_minutes | default: 45 }};
function startCountdown() {
let countdownDate = new Date().getTime() + countdownMinutes * 60 * 1000;
function updateCountdown() {
let now = new Date().getTime();
let distance = countdownDate - now;
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
const countdownElement = document.getElementById("countdown-rU3gXz");
if (countdownElement) {
countdownElement.innerHTML =
(hours < 10 ? "0" + hours : hours) + ":" +
(minutes < 10 ? "0" + minutes : minutes) + ":" +
(seconds < 10 ? "0" + seconds : seconds);
}
if (distance < 0) {
clearInterval(countdownInterval);
startCountdown();
}
}
let countdownInterval = setInterval(updateCountdown, 1000);
}
startCountdown();
</script>Cajas de Información
Muestra información de garantía y advertencia en atractivo formato de tarjeta.
<div class="guarantee-warning-container" style="
padding-top: {{ container_padding_top | default: "20px" }};
padding-bottom: {{ container_padding_bottom | default: "20px" }};
">
<!-- Para İade Garantisi -->
<div class="guarantee-card">
<div class="guarantee-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="9" fill="{{ guarantee_icon_color | default: "#22c55e" }}" stroke="{{ guarantee_icon_color | default: "#22c55e" }}" stroke-width="2"/>
<path d="m6 10 2 2 4-4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="guarantee-text">
{{ guarantee_text | default: "Less than 1% of customers claim our Money Back Guarantee" }}
</div>
</div>
<!-- Sahte Ürün Uyarısı -->
<div class="warning-card">
<div class="warning-content">
{{ warning_text | default: "Beware of cheap replicas - PilatesMove offers the only authentic and high-quality Pilates Board to ensure you get real results." }}
</div>
</div>
</div>
{% style %}
.guarantee-warning-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: {{ container_alignment | default: "center" }};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.guarantee-card {
background: {{ guarantee_bg_color | default: "#f0f9ff" }};
border: 1px solid {{ guarantee_border_color | default: "#e0f2fe" }};
border-left: 4px solid {{ guarantee_accent_color | default: "#22c55e" }};
border-radius: {{ border_radius | default: "8px" }};
padding: {{ card_padding | default: "16px 20px" }};
margin-bottom: {{ card_spacing | default: "12px" }};
display: flex;
align-items: center;
gap: 12px;
max-width: 600px;
width: 100%;
}
.guarantee-icon {
flex-shrink: 0;
}
.guarantee-text {
color: {{ guarantee_text_color | default: "#374151" }};
font-size: {{ text_font_size | default: "14px" }};
line-height: 1.4;
font-weight: 500;
}
.guarantee-percentage {
font-weight: 600;
color: {{ guarantee_highlight_color | default: '#1f2937' }};
}
.guarantee-link {
font-weight: 600;
color: {{ guarantee_highlight_color | default: '#1f2937' }};
text-decoration: underline;
cursor: pointer;
}
.guarantee-link:hover {
color: {{ guarantee_icon_color | default: "#22c55e" }};
}
.warning-card {
background: {{ warning_bg_color | default: "#fef2f2" }};
border: 1px solid {{ warning_border_color | default: "#fecaca" }};
border-left: 4px solid {{ warning_accent_color | default: "#ef4444" }};
border-radius: {{ border_radius | default: "8px" }};
padding: {{ card_padding | default: "16px 20px" }};
max-width: 600px;
width: 100%;
}
.warning-content {
color: {{ warning_text_color | default: "#374151" }};
font-size: {{ text_font_size | default: "14px" }};
line-height: 1.4;
font-weight: 500;
}
.warning-title {
font-weight: 600;
color: {{ warning_highlight_color | default: '#1f2937' }};
}
/* Responsive tasarım */
@media (max-width: 768px) {
.guarantee-warning-container {
align-items: {{ mobile_alignment | default: "center" }} !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.guarantee-card,
.warning-card {
padding: 14px 16px;
max-width: 100%;
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
.guarantee-text,
.warning-content {
font-size: 13px;
}
}
{% endstyle %}
En Stock
Muestra la disponibilidad del producto claramente. Tranquiliza a los clientes sobre el envío inmediato.
<div class="product__inventory" id="Inventory-template--22213608309023__main" role="status">
<svg width="15" height="15" aria-hidden="true">
<circle cx="7.5" cy="7.5" r="7.5" fill="{{ background_color | default: "rgb(62,214,96, 0.3)" }}"></circle>
<circle cx="7.5" cy="7.5" r="5" stroke="{{ stroke_color | default: "#ffffff" }}" stroke-width="1" fill="{{ dot_color | default: "rgb(62,214,96)" }}"></circle>
</svg>
<span class="inventory-text">{{ status_text | default: "In stock" }}</span>
</div>
{% style %}
.product__inventory {
display: flex;
align-items: center;
gap: {{ gap | default: "8px" }};
padding: {{ padding | default: "8px 12px" }};
background: {{ wrapper_bg | default: "#ffffff" }};
border-radius: {{ border_radius | default: "8px" }};
width: fit-content;
}
.inventory-text {
color: {{ text_color | default: "#333333" }};
font-size: {{ font_size | default: "14px" }};
font-weight: {{ font_weight | default: "500" }};
}
{% endstyle %}Vistas de Instagram
Muestra métricas de engagement de Instagram. Prueba de redes sociales que atrae clientes.
<div class="unique-wrapper-A1b2c3">
<div class="unique-badge-D4e5f6">
<img src="{{ icon_url | default: "https://www.svgrepo.com/show/521711/instagram.svg" }}" alt="Instagram Icon" class="unique-icon-G7h8i9">
<span>{{ views_text | default: "Over 7M Views on Instagram" }}</span>
</div>
</div>
{% style %}
.unique-wrapper-A1b2c3 {
display: flex;
justify-content: center;
align-items: center;
padding: {{ wrapper_padding | default: '0' }};
margin: {{ wrapper_margin | default: '0' }};
background-color: transparent;
}
.unique-badge-D4e5f6 {
display: flex;
align-items: center;
background-color: {{ badge_bg | default: "#f8f8f8" }};
border-radius: {{ border_radius | default: "25px" }};
color: {{ text_color | default: "#000" }};
font-size: {{ font_size | default: "14px" }};
font-weight: {{ font_weight | default: "bold" }};
padding: {{ badge_padding | default: "10px 20px" }};
text-decoration: none;
box-shadow: {{ box_shadow | default: "0 4px 6px rgba(0, 0, 0, 0.1)" }};
border: {{ border | default: "1px solid #e0e0e0" }};
height: {{ height | default: "35px" }};
margin: {{ badge_margin | default: '0' }};
}
.unique-icon-G7h8i9 {
width: {{ icon_size | default: "20px" }};
height: {{ icon_size | default: "20px" }};
margin-right: {{ icon_margin | default: "10px" }};
}
{% endstyle %}Slider Circular
Vidriera de producto circular interactiva. Forma atractiva de mostrar características.
<div class="circle-slider-wrapper">
<div class="circle-slider">
<div class="circle-track">
<div class="circle-slide">
<a href="{{ item1_link | default: "#" }}" class="circle-icon">
<img src="{{ item1_image | default: "https://section.store/cdn/shop/products/mug.jpg?v=1663855357" }}" alt="{{ item1_title | default: "Mugs" }}">
</a>
<p class="circle-label">{{ item1_title | default: "Mugs" }}</p>
</div>
<div class="circle-slide">
<a href="{{ item2_link | default: "#" }}" class="circle-icon">
<img src="{{ item2_image | default: "https://section.store/cdn/shop/files/5-panel-hat_4ee20a27-8d5a-490e-a2fc-1f9c3beb7bf5.webp?v=1663859540" }}" alt="{{ item2_title | default: "Hats" }}">
</a>
<p class="circle-label">{{ item2_title | default: "Hats" }}</p>
</div>
<div class="circle-slide">
<a href="{{ item3_link | default: "#" }}" class="circle-icon">
<img src="{{ item3_image | default: "https://section.store/cdn/shop/files/campstool-1.webp?v=1663859592" }}" alt="{{ item3_title | default: "Stools" }}">
</a>
<p class="circle-label">{{ item3_title | default: "Stools" }}</p>
</div>
<div class="circle-slide">
<a href="{{ item4_link | default: "#" }}" class="circle-icon">
<img src="{{ item4_image | default: "https://section.store/cdn/shop/files/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1663859624" }}" alt="{{ item4_title | default: "Bags" }}">
</a>
<p class="circle-label">{{ item4_title | default: "Bags" }}</p>
</div>
<div class="circle-slide">
<a href="{{ item5_link | default: "#" }}" class="circle-icon">
<img src="{{ item5_image | default: "https://section.store/cdn/shop/files/woolfill-jacket_6c39ae23-c0c8-4821-85f4-4b5d64333c62.webp?v=1663859701" }}" alt="{{ item5_title | default: "Jackets" }}">
</a>
<p class="circle-label">{{ item5_title | default: "Jackets" }}</p>
</div>
<div class="circle-slide">
<a href="{{ item6_link | default: "#" }}" class="circle-icon">
<img src="{{ item6_image | default: "https://section.store/cdn/shop/products/1_637c75a8-33f9-4c38-aebf-5a3dc31162dc.png?v=1706026914" }}" alt="{{ item6_title | default: "Throws" }}">
</a>
<p class="circle-label">{{ item6_title | default: "Throws" }}</p>
</div>
<div class="circle-slide">
<a href="{{ item7_link | default: "#" }}" class="circle-icon">
<img src="{{ item7_image | default: "https://section.store/cdn/shop/products/2_c196c504-dfa8-41e9-b151-1094c4962009.png?v=1706026914" }}" alt="{{ item7_title | default: "Rugs" }}">
</a>
<p class="circle-label">{{ item7_title | default: "Rugs" }}</p>
</div>
</div>
</div>
{% style %}
.circle-slider-wrapper {
overflow-x: auto;
padding: 20px 10px;
display: flex;
justify-content: center;
}
.circle-slider {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: inline-block;
}
.circle-track {
display: flex;
flex-wrap: nowrap;
gap: 16px;
min-width: max-content;
justify-content: center;
margin: 0 auto;
}
.circle-slide {
flex: 0 0 auto;
width: 66px;
text-align: center;
}
.circle-icon {
width: 66px;
height: 66px;
border-radius: 50%;
overflow: hidden;
background-image: linear-gradient(133deg, #fadc36 11%, #fe6292 49%, #fadc36 87%);
padding: 2px;
display: block;
}
.circle-icon img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
display: block;
}
.circle-label {
margin-top: 6px;
font-size: 10px;
color: #121212;
}
@media screen and (min-width: 768px) {
.circle-slide {
width: 80px;
}
.circle-icon {
width: 80px;
height: 80px;
}
.circle-label {
font-size: 12px;
}
}
{% endstyle %}
</div>Insignia de Reseña Premium
Insignias de reseñas verificadas con calificaciones de estrellas. Genera credibilidad y confianza instantánea.
<div class="premium-review-wrapper" style="
display: flex;
justify-content: {{ alignment | default: "center" }};
width: 100%;
margin-top: {{ margin_top | default: "20px" }};
margin-bottom: {{ margin_bottom | default: "20px" }};
">
<div style="max-width: 600px; padding: 20px; border: 1px dashed {{ border_color | default: "#ddd" }}; border-radius: {{ border_radius | default: "12px" }}; background: {{ background | default: "linear-gradient(to bottom, #fff, #fafafa)" }}; display: flex; gap: 16px; align-items: flex-start;">
<!-- Profile Photo -->
<img src="{{ avatar | default: "https://randomuser.me/api/portraits/women/44.jpg" }}" alt="Avatar" style="width: {{ avatar_size | default: "64px" }}; height: {{ avatar_size | default: "64px" }}; border-radius: 50%; object-fit: cover;">
<!-- Content -->
<div>
<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">
<strong style="font-size: {{ name_font_size | default: "16px" }}; color: {{ name_color | default: "#000" }};">{{ name | default: "Lauren J." }}</strong>
<svg xmlns="http://www.w3.org/2000/svg" style="width: {{ verified_icon_size | default: "16px" }}; height: {{ verified_icon_size | default: "16px" }};" viewBox="0 0 24 24" fill="{{ verified_icon_color | default: "#000" }}">
<path d="M12 0C5.373 0 0 5.373 0 12c0 4.99 3.062 9.246 7.437 11.004L12 24l4.563-0.996C20.938 21.246 24 16.99 24 12c0-6.627-5.373-12-12-12zm-1 17l-4-4 1.41-1.42L11 14.17l6.59-6.59L19 9l-8 8z"/>
</svg>
<span style="color: {{ stars_color | default: "#f43f5e" }}; font-size: {{ stars_font_size | default: "18px" }};">★★★★★</span>
</div>
<p style="margin-top: {{ review_margin_top | default: "8px" }}; font-size: {{ review_font_size | default: "15px" }}; color: {{ review_color | default: "#555" }}; line-height: {{ line_height | default: "1.5" }};">
{{ review | default: "This product exceeded my expectations." }}
</p>
</div>
</div>
</div>
{% style %}
.premium-review-wrapper {
width: 100%;
}
@media (max-width: 768px) {
.premium-review-wrapper {
justify-content: {{ mobile_alignment | default: "center" }} !important;
}
}
{% endstyle %}Pago Seguro
Insignias de seguridad para páginas de pago. Reduce la ansiedad de pago y aumenta las finalizaciones.
<div style="
margin-top:{{ margin_top | default: "0.25rem" }};
margin-bottom:{{ margin_bottom | default: "1rem" }};
width:100%
">
<div style="
display:flex;
align-items:center;
justify-content:{{ alignment | default: "center" }};
width:100%;
gap:{{ gap | default: "8px" }};
font-weight:{{ font_weight | default: "500" }};
font-size:{{ font_size | default: "14px" }}
">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="
color:{{ icon_color | default: "#172554" }};
height:{{ icon_size | default: "16px" }};
width:{{ icon_size | default: "16px" }}
" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M376 192h-24v-46.7c0-52.7-42-96.5-94.7-97.3-53.4-.7-97.3 42.8-97.3 96v48h-24c-22 0-40 18-40 40v192c0 22 18 40 40 40h240c22 0 40-18 40-40V232c0-22-18-40-40-40zM270 316.8v68.8c0 7.5-5.8 14-13.3 14.4-8 .4-14.7-6-14.7-14v-69.2c-11.5-5.6-19.1-17.8-17.9-31.7 1.4-15.5 14.1-27.9 29.6-29 18.7-1.3 34.3 13.5 34.3 31.9 0 12.7-7.3 23.6-18 28.8zM324 192H188v-48c0-18.1 7.1-35.1 20-48s29.9-20 48-20 35.1 7.1 48 20 20 29.9 20 48v48z"></path>
</svg>
<div style="color:{{ text_color | default: "#172554" }}">{{ text | default: "Safe & Secure Checkout" }}</div>
</div>
</div>Testimonio
Muestra historias de éxito de clientes. Experiencias reales que convierten visitantes en compradores.
<div style="
margin-top: {{ margin_top | default: '0.3rem' }};
margin-bottom: {{ margin_bottom | default: '0.3rem' }};
width: 100%
">
<div style="
width: 100%;
gap: {{ gap | default: "4px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "20px" }};
background-color: {{ background_color | default: "#ffffff" }};
border-radius: {{ border_radius | default: "12px" }};
padding: {{ padding | default: "1.5rem" }};
border: {{ border | default: "1px solid #e5e5e5" }};
color: {{ text_color | default: "#333333" }};
line-height: {{ line_height | default: "1.5" }}
">
<div style="
font-weight: {{ quote_font_weight | default: "500" }};
font-size: {{ quote_font_size | default: "20px" }}
">"{{ quote_text | default: "I love this! It was easy to setup and fast shipping" }}"</div>
<div style="
margin-top: {{ name_margin_top | default: "6px" }};
font-size: {{ name_font_size | default: "16px" }}
">{{ customer_name | default: "John D." }}</div>
<div style="
font-size: {{ verification_font_size | default: "14px" }};
font-weight: {{ verification_font_weight | default: "400" }};
display: flex;
gap: {{ verification_gap | default: "4px" }};
align-items: center;
color: {{ verification_color | default: "#333333" }}
">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"></path>
</svg>
{{ verification_text | default: "Verified Buyer" }}
</div>
</div>
</div>Caja de Oferta
Destaca ofertas especiales prominentemente. Ofertas llamativas que aumentan las conversiones.
<div class="routine-chooser-container">
<div class="routine-chooser-title">
{{ routine_section_title | default: "Special Offer Today" }}
</div>
<div class="routine-chooser-options">
<!-- Ürün 1 -->
<div class="routine-chooser-product-box routine-chooser-product-box-highlight active">
<div class="routine-chooser-highlight-badge">
{{ highlight_badge_text | default: "Stay Smoother Longer" }}
</div>
<img class="routine-chooser-product-image" src="{{ product_1_image | default: "https://cdn.shopify.com/s/files/1/0591/6521/2734/files/Nood_Flasher_Pro-Nood_Serumx2_Trans.png?v=1743681267" }}" alt="{{ product_1_title | default: "Flasher Pro + 2 Nood Serums" }}">
<div class="routine-chooser-product-details">
<h3 class="routine-chooser-product-title">{{ product_1_title | default: "Flasher Pro + 2 Nood Serums" }}</h3>
<p class="routine-chooser-product-price">
{{ product_1_price | default: "$399" }}
<span class="routine-chooser-product-price-original">
{{ product_1_original_price | default: "$477" }}
</span>
</p>
</div>
</div>
<!-- Ürün 2 -->
<div class="routine-chooser-product-box">
<img class="routine-chooser-product-image" src="{{ product_2_image | default: "https://cdn.shopify.com/s/files/1/0591/6521/2734/files/20250130-NS-Nood-3qtr-transparent-59.png?v=1743681267" }}" alt="{{ product_2_title | default: "Flasher Pro" }}">
<div class="routine-chooser-product-details">
<h3 class="routine-chooser-product-title">{{ product_2_title | default: "Flasher Pro" }}</h3>
<p class="routine-chooser-product-price">{{ product_2_price | default: "$399" }}</p>
</div>
</div>
</div>
<button class="routine-chooser-accept-btn">{{ button_text | default: "Accept Offer" }}</button>
{% style %}
.routine-chooser-container {
text-align: center;
padding: 20px;
}
.routine-chooser-title {
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 20px;
color: {{ title_color | default: "#333333" }};
text-transform: uppercase;
}
.routine-chooser-options {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.routine-chooser-product-box {
background: {{ product_box_bg | default: "#ffffff" }};
border: 2px solid {{ product_box_border | default: "#e0e0e0" }};
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
flex: 1 1 45%;
max-width: 220px;
min-width: 140px;
height: 300px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.routine-chooser-product-box.active {
border-color: {{ active_border_color | default: "#4abf8f" }} !important;
}
.routine-chooser-product-box-highlight {
background: {{ highlight_box_bg | default: "#f9e4b7" }};
border-color: {{ highlight_box_border | default: "#000000" }};
padding-top: 30px;
}
.routine-chooser-product-box-highlight.active {
border-color: {{ active_border_color | default: "#4abf8f" }} !important;
}
.routine-chooser-highlight-badge {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: {{ badge_bg | default: "#000000" }};
color: {{ badge_text_color | default: "#ffffff" }};
font-size: 12px;
font-weight: 600;
padding: 5px 0;
border-radius: 5px 5px 0 0;
text-transform: uppercase;
letter-spacing: 0.5px;
box-sizing: border-box;
}
.routine-chooser-product-image {
width: 100%;
height: 150px;
object-fit: contain;
margin: 20px 0 10px 0;
}
.routine-chooser-product-details {
margin-bottom: 15px;
}
.routine-chooser-product-title {
font-size: 14px;
font-weight: 600;
margin: 0 0 5px 0;
color: {{ product_title_color | default: "#333333" }};
line-height: 1.4;
}
.routine-chooser-product-price {
font-size: 16px;
font-weight: 700;
color: {{ product_price_color | default: "#333333" }};
}
.routine-chooser-product-price-original {
text-decoration: line-through;
color: {{ original_price_color | default: "#999999" }};
margin-left: 5px;
}
.routine-chooser-accept-btn {
margin-top: 20px;
padding: 12px 24px;
background: {{ button_bg_color | default: "#4abf8f" }};
color: {{ button_text_color | default: "#ffffff" }};
border: none;
border-radius: {{ button_border_radius | default: "8px" }};
font-size: {{ button_font_size | default: "16px" }};
font-weight: 600;
cursor: pointer;
}
@media (max-width: 600px) {
.routine-chooser-highlight-badge {
font-size: 10px;
padding: 4px 0;
}
}
{% endstyle %}
<script>
document.querySelectorAll('.routine-chooser-product-box').forEach(box => {
box.addEventListener('click', () => {
document.querySelectorAll('.routine-chooser-product-box').forEach(b => b.classList.remove('active'));
box.classList.add('active');
});
});
document.querySelector('.routine-chooser-accept-btn').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
</div>Reseña con Descuento Temporizado
Reseña premium con cuenta regresiva, usuario verificado y descuento automático. Crea urgencia con temporizador.
<div class="unique-review-container-Uio123">
<div class="timer-container-Rty234">
{{ timer_text | default: "Time left:" }} <span id="countdown">00:00:00</span>
</div>
<img class="unique-review-image-Pkl456" src="{{ profile_image | default: "https://i.hizliresim.com/je7b0fg.jpg" }}" alt="{{ profile_alt | default: "Profile Picture" }}">
<div class="unique-review-content-Asd789">
<div class="unique-review-author-Hjk012">
<span class="unique-review-author-name-Zxc345">
{{ author_name | default: "Burkisoy" }}
<span class="unique-review-icon-Lmn678 material-symbols-outlined">{{ verification_icon | default: "verified" }}</span>
</span>
</div>
<div class="unique-review-text-Qwe567">
{{ review_text | default: "We have mixed Black Friday and New Year deals just for you. Grab a big $245 off!" }}
</div>
</div>
</div>
<div class="discount-text-Opa789">
<span class="material-symbols-outlined unique-tick-icon-Vbn012">{{ discount_icon | default: "check" }}</span>
<span>{{ discount_text | default: "Discount code applied automatically." }}</span>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
.unique-review-container-Uio123 {
display: flex;
align-items: center;
background: {{ container_gradient | default: "linear-gradient(135deg, #fafafa, #f0f0f0)" }};
border-radius: {{ container_radius | default: "12px" }};
padding: {{ container_padding | default: '16px' }};
font-size: {{ container_font_size | default: '14px' }};
color: {{ container_color | default: '#333' }};
max-width: {{ container_max_width | default: '600px' }};
width: 100%;
margin: {{ container_margin | default: '2px 0' }};
border: {{ container_border | default: '2px dashed #e0e0e0' }};
position: relative;
}
.unique-review-image-Pkl456 {
width: {{ image_size | default: "50px" }};
height: {{ image_size | default: "50px" }};
border-radius: {{ image_radius | default: '8px' }};
object-fit: cover;
margin-right: {{ image_margin | default: '16px' }};
border: {{ image_border | default: '2px solid #e0e0e0' }};
}
.unique-review-content-Asd789 {
display: flex;
flex-direction: column;
width: 100%;
}
.unique-review-author-Hjk012 {
display: flex;
align-items: center;
margin-bottom: {{ author_margin | default: '8px' }};
}
.unique-review-author-name-Zxc345 {
font-weight: {{ author_font_weight | default: 'bold' }};
margin-right: 4px;
display: flex;
align-items: center;
color: {{ author_color | default: "#333" }};
}
.unique-review-icon-Lmn678 {
font-size: {{ verification_size | default: '16px' }};
color: {{ verification_color | default: "#1DA1F2" }};
margin-left: 4px;
vertical-align: middle;
}
.unique-review-text-Qwe567 {
font-size: {{ review_font_size | default: '14px' }};
color: {{ review_color | default: "#555" }};
}
.timer-container-Rty234 {
position: absolute;
top: {{ timer_top | default: '8px' }};
right: {{ timer_right | default: '16px' }};
background: {{ timer_bg | default: "#ffdede" }};
color: {{ timer_color | default: "#b22222" }};
padding: {{ timer_padding | default: '4px 8px' }};
border-radius: {{ timer_radius | default: '4px' }};
font-size: {{ timer_font_size | default: '10px' }};
font-weight: {{ timer_font_weight | default: 'bold' }};
}
#countdown {
font-weight: bold;
color: {{ countdown_color | default: "#b22222" }};
}
.discount-text-Opa789 {
margin-top: {{ discount_margin_top | default: '20px' }};
text-align: center;
font-size: {{ discount_font_size | default: '14px' }};
color: {{ discount_text_color | default: "#004d00" }};
background-color: {{ discount_bg | default: "#e6ffe6" }};
padding: {{ discount_padding | default: '10px 16px' }};
border-radius: {{ discount_radius | default: '8px' }};
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
gap: {{ discount_gap | default: '8px' }};
}
.unique-tick-icon-Vbn012 {
font-size: {{ discount_icon_size | default: '18px' }};
color: {{ discount_icon_color | default: "#004d00" }};
}
@media (max-width: 768px) {
.timer-container-Rty234 {
font-size: 8px;
padding: 3px 6px;
}
.discount-text-Opa789 {
font-size: 12px;
padding: 8px 12px;
}
.unique-review-container-Uio123 {
padding: 12px;
font-size: 12px;
}
.unique-review-text-Qwe567 {
font-size: 12px;
}
}
</style>
<script>
let countdownMinutes = {{ countdown_minutes | default: "40" }};
function startCountdown() {
let countdownDate = new Date().getTime() + countdownMinutes * 60 * 1000;
function updateCountdown() {
let now = new Date().getTime();
let distance = countdownDate - now;
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML =
(hours < 10 ? "0" + hours : hours) + ":" +
(minutes < 10 ? "0" + minutes : minutes) + ":" +
(seconds < 10 ? "0" + seconds : seconds);
if (distance < 0) {
clearInterval(countdownInterval);
startCountdown();
}
}
updateCountdown();
let countdownInterval = setInterval(updateCountdown, 1000);
}
document.addEventListener('DOMContentLoaded', startCountdown);
</script>Caja de Aviso
Destaca anuncios importantes. Asegura que los mensajes críticos reciban atención.
<div class="mody-page-container">
<!-- Pink Warning Notice -->
<div class="mody-alert-box mody-warning-message">
{{ warning_text | default: "BEWARE of cheap replicas - PilatesMove offers the only authentic and high-quality Pilates Board to ensure you get real results." }}
</div>
{% style %}
:root {
--page-bg-color: {{ page_background_color | default: '#f5f5f5' }};
--font-family: {{ font_family | default: 'Arial, sans-serif' }};
--max-width: {{ max_width | default: "600px" }};
--font-size: {{ font_size | default: "13px" }};
--padding: {{ padding | default: "10px" }};
--margin-bottom: {{ margin_bottom | default: "15px" }};
--border-radius: {{ border_radius | default: "10px" }};
--line-height: {{ line_height | default: "1.5" }};
--warning-bg-color: {{ warning_background_color | default: "#fff0f0" }};
--warning-border: {{ warning_border | default: "2px solid #ff9999" }};
--warning-text-color: {{ warning_text_color | default: "#ff6666" }};
--font-size-mobile: {{ font_size_mobile | default: '14px' }};
--padding-mobile: {{ padding_mobile | default: '10px' }};
--font-size-small: {{ font_size_small | default: '12px' }};
--padding-small: {{ padding_small | default: '8px' }};
}
.mody-page-container {
font-family: var(--font-family);
margin: 0;
padding: 20px;
background-color: var(--page-bg-color);
display: flex;
flex-direction: column;
align-items: center;
}
.mody-alert-box {
width: 100%;
max-width: var(--max-width);
padding: var(--padding);
margin-bottom: var(--margin-bottom);
border-radius: var(--border-radius);
box-sizing: border-box;
font-size: var(--font-size);
line-height: var(--line-height);
}
.mody-warning-message {
background-color: var(--warning-bg-color);
border: var(--warning-border);
color: var(--warning-text-color);
}
@media (max-width: 768px) {
.mody-alert-box {
font-size: var(--font-size-mobile);
padding: var(--padding-mobile);
}
}
@media (max-width: 480px) {
.mody-alert-box {
font-size: var(--font-size-small);
padding: var(--padding-small);
}
}
{% endstyle %}
</div>Amado por los Clientes
Estadísticas de satisfacción del cliente. Números que demuestran la calidad de tu producto.
<div class="loved-by-customers">
<span>{{ icon | default: "🖤" }} {{ text | default: "Loved by 10,000 Customers" }}</span>
</div>
{% style %}
.loved-by-customers {
background: {{ background | default: "linear-gradient(#dddddd, #d8d8d8)" }};
color: {{ text_color | default: "#121212" }};
text-align: center;
padding: {{ padding | default: "6px" }};
margin-top: {{ margin_top | default: "20px" }};
border-radius: {{ border_radius | default: "20px" }};
width: {{ width | default: "300px" }};
margin-left: auto;
margin-right: auto;
font-size: {{ font_size | default: "14px" }};
font-weight: {{ font_weight | default: "500" }};
box-shadow: {{ shadow | default: "0 2px 4px rgba(0, 0, 0, 0.1)" }};
transition: transform 0.2s ease;
}
.loved-by-customers:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
{% endstyle %}Acordeón
Secciones de preguntas frecuentes plegables. Organiza la información sin abrumar a los clientes.
<style>
.accordion-wrapper {
max-width: {{ max_width | default: "700px" }};
margin: 0 auto;
padding: {{ wrapper_padding | default: "20px" }};
}
.accordion-item {
margin-bottom: {{ item_spacing | default: "20px" }};
}
.accordion-title {
background: {{ title_bg | default: "#ffffff" }};
padding: {{ title_padding | default: "20px" }};
border-radius: {{ border_radius | default: "12px" }};
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: {{ title_shadow | default: "0 4px 15px rgba(0, 0, 0, 0.05)" }};
transition: all 0.3s ease;
}
.accordion-title span {
color: {{ title_color | default: "#333333" }};
}
.accordion-title .accordion-icon {
color: {{ icon_color | default: "#718096" }};
}
.accordion-title:hover {
background: {{ hover_bg | default: "#f7fafc" }};
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.accordion-content {
display: none;
padding: {{ content_padding | default: "20px" }};
background: {{ content_bg | default: "#f9fafb" }};
border-radius: {{ border_radius | default: "12px" }};
border: 1px solid {{ content_border | default: "#e5e7eb" }};
margin-top: {{ content_margin | default: "10px" }};
color: {{ content_color | default: "#4a5568" }};
}
.accordion-item.active .accordion-content {
display: block;
}
.accordion-icon {
transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
transform: rotate(180deg);
}
</style>
<div class="accordion-wrapper">
<div class="accordion-item">
<div class="accordion-title">
<span>{{ section1_title | default: "Product Description" }}</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>This section contains detailed information about the product. You can find the product's features, usage instructions, and other important details here.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<span>{{ section2_title | default: "Shipping & Returns" }}</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p><strong>Shipping:</strong></p>
<ul>
<li><strong>Standard:</strong> Delivery expected within 20 working days.</li>
<li><strong>Secure Delivery:</strong> Delivery handled by certified carriers.</li>
<li><strong>Order Processing Time:</strong> 1 to 3 working days.</li>
</ul>
<p><strong>Returns:</strong></p>
<ul>
<li><strong>Timeframe:</strong> You have 15 days after receipt to return an item.</li>
<li><strong>Return Conditions:</strong> The item must be in its original condition, unworn, with tags and not connected to our application.</li>
<li><strong>Return Costs:</strong> At the customer's expense, except in cases of defective products.</li>
<li><strong>Return Process:</strong> Contact support to obtain a return label and instructions.</li>
</ul>
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
<span>{{ section3_title | default: "Secure Payment" }}</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>We ensure maximum security during your purchases:</p>
<ul>
<li><strong>Payment Methods:</strong> Visa, MasterCard, AMEX, PayPal, Apple Pay.</li>
<li><strong>256-bit SSL Encryption:</strong> Your data is fully protected.</li>
<li><strong>Enhanced Verification:</strong> Every purchase is verified to prevent fraud.</li>
</ul>
<img src="https://cdn.shopify.com/s/files/1/0591/6521/2734/files/Ekran_goruntusu_2025-04-05_161238.png?v=1743858786" alt="Secure Payment" style="margin-top: 15px; max-width: 100%; border-radius: 8px;">
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".accordion-title").forEach(function (title) {
title.addEventListener("click", function () {
const item = title.parentElement;
item.classList.toggle("active");
});
});
});
</script>Barra de Regalo
Barra inteligente de anuncio de regalo con cálculo dinámico de fecha. Perfecto para promocionar regalos gratis.
<div class="announcement-bar" style="
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<p>
<span id="smart-ship-dot"></span>
<span id="smart-ship-text">Order by <strong id="gift-bar-ship-date">...</strong> for guaranteed FREE GIFTS</span>
</p>
{% style %}
:root {
--background-color: {{ background_color | default: "#eefbe9" }};
--border-color: {{ border_color | default: "#52a211" }};
--text-color: {{ text_color | default: "#333333" }};
--font-size: {{ font_size | default: "16px" }};
--font-weight: {{ font_weight | default: "bold" }};
--padding: {{ padding | default: "8px 16px" }};
--border-radius: {{ border_radius | default: "5px" }};
--max-width: {{ max_width | default: "1200px" }};
/* Mobile Settings - Auto-calculated based on main font size */
--mobile-font-size: calc(var(--font-size) * 0.875);
--mobile-padding: {{ mobile_padding | default: '6px 12px' }};
--mobile-border-radius: {{ mobile_border_radius | default: '4px' }};
--small-font-size: calc(var(--font-size) * 0.75);
--small-padding: {{ small_padding | default: '4px 8px' }};
--small-border-radius: {{ small_border_radius | default: '3px' }};
/* Blinking dot */
--dot-color: {{ dot_color | default: "#4bb536" }};
--dot-size: {{ dot_size | default: "10px" }};
--dot-margin-right: {{ dot_margin_right | default: "8px" }};
--mobile-dot-size: {{ mobile_dot_size | default: '8px' }};
--mobile-dot-margin-right: {{ mobile_dot_margin_right | default: '6px' }};
--small-dot-size: {{ small_dot_size | default: '6px' }};
--small-dot-margin-right: {{ small_dot_margin_right | default: '5px' }};
}
.announcement-bar {
background: var(--background-color);
border: 1px dashed var(--border-color);
border-radius: var(--border-radius);
padding: var(--padding);
text-align: center;
font-size: var(--font-size);
font-weight: var(--font-weight);
color: var(--text-color);
margin: 0 auto;
width: 100%;
box-sizing: border-box;
max-width: var(--max-width);
}
.announcement-bar p {
margin: 0;
display: inline-flex;
align-items: center;
line-height: 1.5;
}
#smart-ship-dot {
display: inline-block;
width: var(--dot-size);
height: var(--dot-size);
background-color: var(--dot-color);
border-radius: 50%;
margin-right: var(--dot-margin-right);
animation: blink 1s infinite;
flex-shrink: 0;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@media (max-width: 768px) {
.announcement-bar {
padding: var(--mobile-padding) !important;
font-size: var(--mobile-font-size) !important;
border-radius: var(--mobile-border-radius) !important;
}
.announcement-bar p {
font-size: var(--mobile-font-size) !important;
}
#smart-ship-dot {
width: var(--mobile-dot-size) !important;
height: var(--mobile-dot-size) !important;
margin-right: var(--mobile-dot-margin-right) !important;
}
}
@media (max-width: 480px) {
.announcement-bar {
padding: var(--small-padding) !important;
font-size: var(--small-font-size) !important;
border-radius: var(--small-border-radius) !important;
}
.announcement-bar p {
font-size: var(--small-font-size) !important;
}
#smart-ship-dot {
width: var(--small-dot-size) !important;
height: var(--small-dot-size) !important;
margin-right: var(--small-dot-margin-right) !important;
}
}
{% endstyle %}
</div>
<script>
const giftBarToday = new Date();
const giftBarShippingDays = parseInt('{{ shipping_days | default: "0" }}');
const giftBarDateFormat = '{{ date_format | default: "short" }}';
const giftBarShipDate = new Date(giftBarToday);
giftBarShipDate.setDate(giftBarToday.getDate() + giftBarShippingDays);
let giftBarFormattedDate;
switch(giftBarDateFormat) {
case 'long':
giftBarFormattedDate = giftBarShipDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
break;
case 'numeric':
giftBarFormattedDate = giftBarShipDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' });
break;
case 'day':
giftBarFormattedDate = giftBarShipDate.toLocaleDateString('en-US', { weekday: 'long' });
break;
case 'date':
giftBarFormattedDate = giftBarShipDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
break;
default:
giftBarFormattedDate = giftBarShipDate.toLocaleDateString('en-US', { weekday: 'short', month: 'long', day: 'numeric' });
}
document.getElementById('gift-bar-ship-date').textContent = giftBarFormattedDate;
</script>Garantía de Devolución
Elimina el riesgo de compra con promesa de reembolso. Probado para aumentar conversiones en un 20%+.
<div class="guarantee-container">
<div class="guarantee-badge">
<a href="{{ guarantee_badge_link | default: "#" }}">
<img src="{{ guarantee_badge_image | default: "https://i.hizliresim.com/a0c8xe3.png" }}" alt="Guarantee Badge">
</a>
</div>
<div class="guarantee-text">
<h3>{{ guarantee_title | default: "100% 14-Day Money Back Guarantee" }}</h3>
<p>{{ guarantee_description | default: "We are so confident in our products that if you are not satisfied, you have the right to get a full 14-day refund." }}</p>
</div>
</div>
<style>
.guarantee-container {
display: flex;
align-items: center;
background-color: {{ guarantee_background_color | default: "#f8f1de" }};
border-radius: {{ border_radius | default: "12px" }};
padding: {{ container_padding | default: "15px" }};
box-shadow: {{ box_shadow | default: "0 4px 6px rgba(0, 0, 0, 0.1)" }};
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: {{ border | default: "2px dashed #6c4e22" }};
margin: 0 auto;
font-family: Arial, sans-serif;
}
.guarantee-badge {
margin-right: {{ badge_margin | default: "15px" }};
}
.guarantee-badge img {
display: block;
width: {{ badge_size | default: "100px" }};
height: auto;
}
.guarantee-text h3 {
margin: 0;
font-size: {{ title_font_size | default: "13px" }};
color: {{ guarantee_title_color | default: "#6c4e22" }};
font-weight: {{ title_font_weight | default: "bold" }};
text-align: left;
}
.guarantee-text p {
margin: 5px 0 0;
font-size: {{ description_font_size | default: "11px" }};
color: {{ guarantee_text_color | default: "#4f4f4f" }};
text-align: left;
}
@media (max-width: 480px) {
.guarantee-container {
padding: 10px;
flex-direction: row;
}
.guarantee-badge {
margin-right: 10px;
}
.guarantee-badge img {
width: 80px;
}
.guarantee-text h3 {
font-size: 12px;
}
.guarantee-text p {
font-size: 10px;
}
}
</style>Insignia Premium
Marca productos de alta calidad. Justifica precios premium y exclusividad.
<div class="badge-container" style="
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<!-- Badge 1 -->
<div class="badge-item">
<img src="{{ badge_1_icon | default: "https://www.svgrepo.com/show/474295/plane.svg" }}" alt="{{ badge_1_text | default: "Fast Shipping" }}" style="width: {{ icon_size | default: "12" }}; height: {{ icon_size | default: "12" }}; max-width: {{ icon_size | default: "12" }}; max-height: {{ icon_size | default: "12" }}; object-fit: contain;">
{{ badge_1_text | default: "Fast Shipping" }}
</div>
<!-- Badge 2 -->
<div class="badge-item">
<img src="{{ badge_2_icon | default: "https://www.svgrepo.com/show/486865/support.svg" }}" alt="{{ badge_2_text | default: "24/7 Support" }}" style="width: {{ icon_size | default: "12" }}; height: {{ icon_size | default: "12" }}; max-width: {{ icon_size | default: "12" }}; max-height: {{ icon_size | default: "12" }}; object-fit: contain;">
{{ badge_2_text | default: "24/7 Support" }}
</div>
<!-- Badge 3 -->
<div class="badge-item">
<img src="{{ badge_3_icon | default: "https://www.svgrepo.com/show/457232/return.svg" }}" alt="{{ badge_3_text | default: "30 Days Return" }}" style="width: {{ icon_size | default: "12" }}; height: {{ icon_size | default: "12" }}; max-width: {{ icon_size | default: "12" }}; max-height: {{ icon_size | default: "12" }}; object-fit: contain;">
{{ badge_3_text | default: "30 Days Return" }}
</div>
{% style %}
:root {
/* Container settings */
--gap-between-badges: {{ badge_gap | default: "5px" }};
/* Badge item settings */
--badge-padding: {{ badge_padding | default: "3px 7px" }};
--badge-border-radius: {{ badge_border_radius | default: "12px" }};
--badge-font-size: {{ badge_font_size | default: "10px" }};
--badge-font-weight: {{ badge_font_weight | default: "bold" }};
--badge-text-color: {{ badge_text_color | default: "#000000" }};
--badge-background-color: {{ badge_background_color | default: "rgba(0, 0, 0, 0.05)" }};
/* Icon settings */
--icon-brightness: {{ icon_brightness | default: "0.5" }};
}
.badge-container {
display: flex;
gap: var(--gap-between-badges);
flex-wrap: wrap;
}
.badge-item {
display: flex;
align-items: center;
padding: var(--badge-padding);
border-radius: var(--badge-border-radius);
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
color: var(--badge-text-color);
background-color: var(--badge-background-color);
}
.badge-item img {
margin-right: 3px;
filter: brightness(var(--icon-brightness));
flex-shrink: 0;
display: inline-block;
}
{% endstyle %}
</div>Componente de Lista de Características
Presentación estructurada de características con iconos. Comunicación clara de valor.
<div style="
margin-top: {{ margin_top | default: "0.25rem" }};
margin-bottom: {{ margin_bottom | default: "0.25rem" }};
width: 100%
">
<div style="
width: 100%;
display: flex;
flex-direction: column;
gap: {{ gap | default: "6px" }};
text-align: left
">
<div style="
display: flex;
align-items: center;
gap: {{ icon_gap | default: "8px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "16px" }}
">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="
color: {{ icon_color | default: "#701a75" }};
height: {{ icon_size | default: "18px" }};
width: {{ icon_size | default: "18px" }}
" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M400 48H112a64.07 64.07 0 0 0-64 64v288a64.07 64.07 0 0 0 64 64h288a64.07 64.07 0 0 0 64-64V112a64.07 64.07 0 0 0-64-64zm-35.75 138.29-134.4 160a16 16 0 0 1-12 5.71h-.27a16 16 0 0 1-11.89-5.3l-57.6-64a16 16 0 1 1 23.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0 1 24.5 20.58z"></path>
</svg>
<span style="color: {{ text_color | default: "#701a75" }}">{{ feature_1 | default: "High quality materials" }}</span>
</div>
<div style="
display: flex;
align-items: center;
gap: {{ icon_gap | default: "8px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "16px" }}
">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="
color: {{ icon_color | default: "#701a75" }};
height: {{ icon_size | default: "18px" }};
width: {{ icon_size | default: "18px" }}
" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M400 48H112a64.07 64.07 0 0 0-64 64v288a64.07 64.07 0 0 0 64 64h288a64.07 64.07 0 0 0 64-64V112a64.07 64.07 0 0 0-64-64zm-35.75 138.29-134.4 160a16 16 0 0 1-12 5.71h-.27a16 16 0 0 1-11.89-5.3l-57.6-64a16 16 0 1 1 23.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0 1 24.5 20.58z"></path>
</svg>
<span style="color: {{ text_color | default: "#701a75" }}">{{ feature_2 | default: "90% Polymer, 10% Plastic" }}</span>
</div>
<div style="
display: flex;
align-items: center;
gap: {{ icon_gap | default: "8px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "16px" }}
">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" style="
color: {{ icon_color | default: "#701a75" }};
height: {{ icon_size | default: "18px" }};
width: {{ icon_size | default: "18px" }}
" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M400 48H112a64.07 64.07 0 0 0-64 64v288a64.07 64.07 0 0 0 64 64h288a64.07 64.07 0 0 0 64-64V112a64.07 64.07 0 0 0-64-64zm-35.75 138.29-134.4 160a16 16 0 0 1-12 5.71h-.27a16 16 0 0 1-11.89-5.3l-57.6-64a16 16 0 1 1 23.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0 1 24.5 20.58z"></path>
</svg>
<span style="color: {{ text_color | default: "#701a75" }}">{{ feature_3 | default: "100% Recyclable" }}</span>
</div>
</div>
</div>Insignia de Calificación Trustpilot
Muestra puntuaciones de Trustpilot. Validación de terceros que genera confianza.
<div style="
display: inline-flex;
align-items: center;
background-color: {{ background_color | default: "#fff" }};
border-radius: {{ border_radius | default: "9999px" }};
padding: {{ padding | default: "4px 10px" }};
font-size: {{ font_size | default: "12px" }};
color: {{ text_color | default: "#1c1c1c" }};
font-weight: {{ font_weight | default: "500" }};
box-shadow: {{ box_shadow | default: "0 1px 3px rgba(0,0,0,0.08)" }};
">
<div style="
display: flex;
gap: {{ stars_gap | default: "3px" }};
margin-right: {{ stars_margin_right | default: "8px" }};
">
<!-- Five stars inside flatter green rectangles -->
<div style="
background-color: {{ star_bg_color | default: "#00B67A" }};
border-radius: {{ star_border_radius | default: "3px" }};
padding: {{ star_padding | default: "1px 2px" }};
">
<svg width="{{ star_size | default: "12" }}" height="{{ star_size | default: "12" }}" viewBox="0 0 24 24" fill="{{ star_color | default: "#FFFFFF" }}" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2l2.39 6.91H22l-5.43 3.94L18.74 22 12 17.56 5.26 22l1.43-9.15L2 8.91h7.61L12 2z"/>
</svg>
</div>
<div style="
background-color: {{ star_bg_color | default: "#00B67A" }};
border-radius: {{ star_border_radius | default: "3px" }};
padding: {{ star_padding | default: "1px 2px" }};
">
<svg width="{{ star_size | default: "12" }}" height="{{ star_size | default: "12" }}" viewBox="0 0 24 24" fill="{{ star_color | default: "#FFFFFF" }}" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2l2.39 6.91H22l-5.43 3.94L18.74 22 12 17.56 5.26 22l1.43-9.15L2 8.91h7.61L12 2z"/>
</svg>
</div>
<div style="
background-color: {{ star_bg_color | default: "#00B67A" }};
border-radius: {{ star_border_radius | default: "3px" }};
padding: {{ star_padding | default: "1px 2px" }};
">
<svg width="{{ star_size | default: "12" }}" height="{{ star_size | default: "12" }}" viewBox="0 0 24 24" fill="{{ star_color | default: "#FFFFFF" }}" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2l2.39 6.91H22l-5.43 3.94L18.74 22 12 17.56 5.26 22l1.43-9.15L2 8.91h7.61L12 2z"/>
</svg>
</div>
<div style="
background-color: {{ star_bg_color | default: "#00B67A" }};
border-radius: {{ star_border_radius | default: "3px" }};
padding: {{ star_padding | default: "1px 2px" }};
">
<svg width="{{ star_size | default: "12" }}" height="{{ star_size | default: "12" }}" viewBox="0 0 24 24" fill="{{ star_color | default: "#FFFFFF" }}" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2l2.39 6.91H22l-5.43 3.94L18.74 22 12 17.56 5.26 22l1.43-9.15L2 8.91h7.61L12 2z"/>
</svg>
</div>
<div style="
background-color: {{ star_bg_color | default: "#00B67A" }};
border-radius: {{ star_border_radius | default: "3px" }};
padding: {{ star_padding | default: "1px 2px" }};
">
<svg width="{{ star_size | default: "12" }}" height="{{ star_size | default: "12" }}" viewBox="0 0 24 24" fill="{{ star_color | default: "#FFFFFF" }}" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2l2.39 6.91H22l-5.43 3.94L18.74 22 12 17.56 5.26 22l1.43-9.15L2 8.91h7.61L12 2z"/>
</svg>
</div>
</div>
<div style="line-height: 1;">
{{ rating_text | default: "Excellent" }} <strong style="font-weight: {{ rating_weight | default: "600" }};">{{ rating_score | default: "4,6" }}</strong> | <strong style="font-weight: {{ rating_weight | default: "600" }};">{{ review_count | default: "14,500+" }}</strong> {{ reviews_text | default: "reviews" }}
</div>
</div>Insignia de Alerta de Stock
Alerta de stock animada con punto parpadeante. Crea urgencia con mensaje de stock limitado.
<style>
.custom-alert-wrapper {
background: {{ background_gradient | default: "linear-gradient(135deg, #ffcccc, #ffaaaa)" }};
background-color: {{ background_color | default: "#ffcccc" }};
padding: {{ padding | default: "2px 10px" }};
border-radius: {{ border_radius | default: "8px" }};
display: inline-block;
text-align: center;
margin: {{ margin | default: "0 auto" }};
width: {{ width | default: "auto" }};
}
.custom-alert-blink {
animation: blink-animation {{ animation_speed | default: "1.5s" }} steps(5, start) infinite;
color: {{ dot_color | default: "red" }};
display: inline-block;
vertical-align: middle;
font-size: {{ dot_size | default: "10px" }};
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
.custom-alert-text {
display: inline-block;
vertical-align: middle;
margin-left: {{ text_margin | default: "10px" }};
color: {{ text_color | default: "#AD0000" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "12px" }};
text-align: justify;
}
</style>
<div class="custom-alert-wrapper">
<div class="custom-alert-blink">{{ dot_symbol | default: "●" }}</div>
<div class="custom-alert-text">{{ alert_message | default: "Only 4 bags left at this price." }}</div>
</div>Componente de Insignias
Múltiples insignias de confianza en un solo lugar. Display de credibilidad completo.
<div style="
margin-top: {{ margin_top | default: "0.25rem" }};
margin-bottom: {{ margin_bottom | default: "0.25rem" }};
width: 100%
">
<div style="
width: 100%;
display: flex;
flex-wrap: wrap;
gap: {{ gap | default: "10px" }};
align-items: center;
justify-content: {{ alignment | default: "start" }};
text-align: left;
color: {{ text_color | default: "#ffffff" }}
">
<div style="
background: {{ badge_bg | default: "#f97316" }};
color: {{ text_color | default: "#ffffff" }};
padding: {{ padding | default: "3px 10px" }};
border-radius: {{ border_radius | default: "6px" }};
font-weight: {{ font_weight | default: "700" }};
margin-right: {{ margin_right | default: "0" }};
font-size: {{ font_size | default: "12px" }}
">{{ best_value_text | default: "BEST VALUE" }}</div>
<div style="
background: {{ badge_bg | default: "#f97316" }};
color: {{ text_color | default: "#ffffff" }};
padding: {{ padding | default: "3px 10px" }};
border-radius: {{ border_radius | default: "6px" }};
font-weight: {{ font_weight | default: "700" }};
margin-right: {{ margin_right | default: "0" }};
font-size: {{ font_size | default: "12px" }}
">{{ popular_text | default: "POPULAR" }}</div>
</div>
</div>Insignia de Envío
Muestra información de envío prominentemente. Expectativas claras de entrega reducen el abandono del carrito.
<div id="smart-shipping-box" style="
display: flex;
align-items: center;
justify-content: center;
background-color: {{ background_color | default: "#ffffff" }};
border-radius: {{ border_radius | default: "9999px" }};
padding: {{ padding | default: "8px 20px" }};
box-shadow: {{ box_shadow | default: "0 2px 8px rgba(0,0,0,0.1)" }};
font-size: {{ font_size | default: "clamp(11px, 2.5vw, 14px)" }};
color: {{ text_color | default: "#222222" }};
gap: {{ gap | default: "14px" }};
width: fit-content;
max-width: 95vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: {{ margin_top | default: "0px" }} auto {{ margin_bottom | default: "0px" }} auto;
">
<div style="display: flex; align-items: center; gap: 6px;">
<div class="flash-dot-xyz123" style="
width: {{ dot_size | default: "10px" }};
height: {{ dot_size | default: "10px" }};
background-color: {{ dot_color | default: "#00c851" }};
border-radius: 50%;
flex-shrink: 0;
"></div>
<div>Ships by <span id="shipping-badge-date" style="font-weight: 600;">...</span></div>
</div>
<div style="display: flex; align-items: center; gap: 6px;">
<img id="shipping-badge-flag" src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" alt="Flag" style="width: {{ flag_size | default: "18px" }}; height: {{ flag_size | default: "18px" }}; border-radius: 50%; object-fit: cover; flex-shrink: 0;">
<div id="shipping-badge-text" style="font-weight: 600;">FREE Shipping</div>
</div>
</div>
<style>
@keyframes pulseDot {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.flash-dot-xyz123 {
animation: pulseDot 1.2s infinite ease-in-out;
}
</style>
<script>
// 1. Tarihi otomatik hesapla (özelleştirilebilir)
const shippingBadgeToday = new Date();
const shippingBadgeShippingDays = parseInt('{{ shipping_days | default: "0" }}') || 0;
const shippingBadgeDateFormat = '{{ date_format | default: "short" }}';
// Tarihi hesapla
const shippingBadgeShipDate = new Date(shippingBadgeToday);
shippingBadgeShipDate.setDate(shippingBadgeToday.getDate() + shippingBadgeShippingDays);
// Format seçenekleri
let shippingBadgeFormattedDate;
switch(shippingBadgeDateFormat) {
case 'long':
shippingBadgeFormattedDate = shippingBadgeShipDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
break;
case 'numeric':
shippingBadgeFormattedDate = shippingBadgeShipDate.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' });
break;
case 'day':
shippingBadgeFormattedDate = shippingBadgeShipDate.toLocaleDateString('en-US', { weekday: 'long' });
break;
case 'date':
shippingBadgeFormattedDate = shippingBadgeShipDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
break;
default: // 'short'
shippingBadgeFormattedDate = shippingBadgeShipDate.toLocaleDateString('en-US', { weekday: 'short', month: 'long', day: 'numeric' });
}
document.getElementById('shipping-badge-date').textContent = shippingBadgeFormattedDate;
// 2. Bayrak ve "Ücretsiz Kargo" metni yerelleştirme
fetch('https://ipapi.co/json/')
.then(res => res.json())
.then(data => {
const country = data.country;
const flag = document.getElementById('shipping-badge-flag');
const text = document.getElementById('shipping-badge-text');
const map = {
US: { flag: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', text: 'FREE Shipping' },
FR: { flag: 'https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg', text: 'LIVRAISON GRATUITE' },
DE: { flag: 'https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg', text: 'KOSTENLOSER VERSAND' },
TR: { flag: 'https://upload.wikimedia.org/wikipedia/commons/b/b4/Flag_of_Turkey.svg', text: 'ÜCRETSİZ KARGO' },
IT: { flag: 'https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg', text: 'SPEDIZIONE GRATUITA' },
ES: { flag: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg', text: 'ENVÍO GRATUITO' },
NL: { flag: 'https://upload.wikimedia.org/wikipedia/en/2/20/Flag_of_the_Netherlands.svg', text: 'GRATIS VERZENDING' },
JP: { flag: 'https://upload.wikimedia.org/wikipedia/en/9/9e/Flag_of_Japan.svg', text: '送料無料' },
KR: { flag: 'https://upload.wikimedia.org/wikipedia/commons/0/09/Flag_of_South_Korea.svg', text: '무료 배송' },
CN: { flag: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', text: '免运费' },
IN: { flag: 'https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg', text: 'फ्री शिपिंग' },
BR: { flag: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg', text: 'FRETE GRÁTIS' },
RU: { flag: 'https://upload.wikimedia.org/wikipedia/en/f/f3/Flag_of_Russia.svg', text: 'БЕСПЛАТНАЯ ДОСТАВКА' },
PL: { flag: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg', text: 'DOSTAWA GRATIS' }
};
const fallback = {
flag: 'https://upload.wikimedia.org/wikipedia/commons/e/e3/Globe_icon.svg',
text: 'Free Worldwide Shipping'
};
const selected = map[country] || fallback;
flag.src = selected.flag;
text.textContent = selected.text;
});
</script>Insignia de Personas Viendo
Muestra el conteo de visitantes en vivo. Crea urgencia y validación social.
<div style="
background-color: {{ background_color | default: "#fdeee8" }};
color: {{ text_color | default: "#000" }};
border-radius: {{ border_radius | default: "999px" }};
padding: {{ padding | default: "5px 12px" }};
display: inline-flex;
align-items: center;
font-size: {{ font_size | default: "13px" }};
box-shadow: {{ box_shadow | default: "0 1px 3px rgba(0, 0, 0, 0.05)" }};
line-height: 1;
">
<img src="{{ icon_url | default: "https://img.icons8.com/emoji/48/000000/fire.png" }}" alt="fire" style="
width: {{ icon_size | default: "15px" }};
height: {{ icon_size | default: "15px" }};
margin-right: {{ icon_margin | default: "6px" }};
display: block;
" />
<span>
<strong>{{ view_count | default: "2594" }}</strong> people have viewed this in the last
<span style="white-space: nowrap;"><strong>{{ time_period | default: "24 hours" }}</strong></span>
</span>
</div>Lista de Características
Enumera los beneficios del producto claramente. Ayuda a los clientes a entender la propuesta de valor.
<div class="feature-wrapper" style="
display: flex;
justify-content: {{ alignment | default: "center" }};
width: 100%;
margin-top: {{ margin_top | default: "20px" }};
margin-bottom: {{ margin_bottom | default: "20px" }};
">
<div class="feature-container">
<div class="feature-item">
<img src="{{ feature_1_icon | default: "https://www.svgrepo.com/show/507980/check-badge.svg" }}" alt="Check Icon" class="feature-icon">
<div class="feature-text">{{ feature_1_text | default: "Easily Changeable 6 Different Heads" }}</div>
</div>
<div class="feature-item">
<img src="{{ feature_2_icon | default: "https://www.svgrepo.com/show/507980/check-badge.svg" }}" alt="Check Icon" class="feature-icon">
<div class="feature-text">{{ feature_2_text | default: "Waterproof Charging Unit" }}</div>
</div>
<div class="feature-item">
<img src="{{ feature_3_icon | default: "https://www.svgrepo.com/show/507980/check-badge.svg" }}" alt="Check Icon" class="feature-icon">
<div class="feature-text">{{ feature_3_text | default: "3.5 hours continuous operation time" }}</div>
</div>
</div>
</div>
{% style %}
:root {
--text-color: {{ text_color | default: "#333" }};
--hover-bg-color: {{ hover_bg_color | default: "#f1f1f1" }};
--highlight-color: {{ highlight_color | default: "#000" }};
--transition-duration: {{ transition_duration | default: "0.3s" }};
--font-family: {{ font_family | default: "'Helvetica Neue', Arial, sans-serif" }};
--icon-size: {{ icon_size | default: "24px" }};
--font-size: {{ font_size | default: "16px" }};
--font-size-mobile: {{ font_size_mobile | default: "14px" }};
}
.feature-wrapper {
width: 100%;
}
@media (max-width: 768px) {
.feature-wrapper {
justify-content: {{ mobile_alignment | default: "center" }} !important;
}
}
.feature-container {
max-width: 600px;
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
font-family: var(--font-family);
}
.feature-item {
display: flex;
align-items: center;
padding: 5px 0;
border-radius: 8px;
transition: background-color var(--transition-duration), transform var(--transition-duration);
cursor: default;
}
.feature-item:hover {
background-color: var(--hover-bg-color);
transform: translateX(10px);
}
.feature-icon {
width: var(--icon-size);
height: var(--icon-size);
margin-right: 10px;
transition: filter var(--transition-duration);
}
.feature-item:hover .feature-icon {
filter: brightness(0) invert(0);
}
.feature-text {
font-size: var(--font-size);
color: var(--text-color);
transition: color var(--transition-duration);
}
.feature-item:hover .feature-text {
color: var(--highlight-color);
}
@media (max-width: 600px) {
.feature-text {
font-size: var(--font-size-mobile);
}
}
{% endstyle %}Banner de Texto Desplazable
Anuncios de texto en movimiento con imágenes de producto personalizables.
<div style="
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: {{ padding | default: "8px 0" }};
background: {{ background_color | default: "#ffffff" }};
border-top: {{ border_top | default: "2px solid #000000" }};
border-bottom: {{ border_bottom | default: "2px solid #000000" }};
border-radius: {{ border_radius | default: "0px" }};
">
<div style="
display: flex;
align-items: center;
width: max-content;
animation: marquee-loop {{ animation_duration | default: "30" }}s linear infinite;
font-weight: {{ font_weight | default: "700" }};
font-size: {{ font_size | default: "20px" }};
color: {{ text_color | default: "#000000" }};
gap: {{ gap | default: "40px" }};
text-shadow: {{ text_shadow | default: "none" }};
letter-spacing: {{ letter_spacing | default: "0px" }};
text-transform: {{ text_transform | default: "uppercase" }};
">
{% for i in (1..2) %}
<div>{{ text_1 | default: "PREMIUM QUALITY" }}</div>
<img src="{{ image_1 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_53_57_PM_1753442812186.png?v=1753442815" }}" alt="Image 1" style="width: {{ image_size | default: "24px" }}; height: {{ image_size | default: "24px" }}; border-radius: {{ image_radius | default: "50%" }}; object-fit: cover;">
<div>{{ text_2 | default: "FAST SHIPPING" }}</div>
<img src="{{ image_2 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_53_57_PM_1753442812186.png?v=1753442815" }}" alt="Image 2" style="width: {{ image_size | default: "24px" }}; height: {{ image_size | default: "24px" }}; border-radius: {{ image_radius | default: "50%" }}; object-fit: cover;">
<div>{{ text_3 | default: "SECURE PAYMENT" }}</div>
<img src="{{ image_3 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_53_57_PM_1753442812186.png?v=1753442815" }}" alt="Image 3" style="width: {{ image_size | default: "24px" }}; height: {{ image_size | default: "24px" }}; border-radius: {{ image_radius | default: "50%" }}; object-fit: cover;">
<div>{{ text_4 | default: "MONEY BACK GUARANTEE" }}</div>
<img src="{{ image_4 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_53_57_PM_1753442812186.png?v=1753442815" }}" alt="Image 4" style="width: {{ image_size | default: "24px" }}; height: {{ image_size | default: "24px" }}; border-radius: {{ image_radius | default: "50%" }}; object-fit: cover;">
<div>{{ text_5 | default: "24/7 SUPPORT" }}</div>
<img src="{{ image_5 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_53_57_PM_1753442812186.png?v=1753442815" }}" alt="Image 5" style="width: {{ image_size | default: "24px" }}; height: {{ image_size | default: "24px" }}; border-radius: {{ image_radius | default: "50%" }}; object-fit: cover;">
{% endfor %}
</div>
</div>
<style>
@keyframes marquee-loop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.scrolling-text-banner {
padding: {{ mobile_padding | default: "6px 0" }} !important;
}
.scrolling-text-banner > div {
font-size: {{ mobile_font_size | default: "16px" }} !important;
gap: {{ mobile_gap | default: "30px" }} !important;
animation-duration: {{ mobile_animation_duration | default: "25" }}s !important;
}
}
</style>Insignia Galardonada
Muestra premios y certificaciones de la industria. Credibilidad y autoridad instantánea.
<div class="kodu-award-badge-wrapper" style="display: inline-block; margin-top: {{ margin_top | default: "0px" }}; margin-bottom: {{ margin_bottom | default: "0px" }};">
<div class="kodu-award-badge" style="display: inline-flex; align-items: center; background-color: {{ background_color | default: "#f8e6b4" }}; border-radius: {{ border_radius | default: "9999px" }}; padding: {{ padding | default: "6px 14px" }}; margin: 0; box-sizing: border-box;">
<span class="kodu-award-icon" style="font-size: {{ icon_size | default: "16px" }}; margin-right: {{ icon_margin | default: "8px" }}; line-height: 1; display: inline-block;">{{ icon | default: "🏆" }}</span>
<span class="kodu-award-text" style="font-size: {{ text_size | default: "14px" }}; font-weight: {{ text_weight | default: "600" }}; color: {{ text_color | default: "#9c7700" }}; line-height: 1; display: inline-block; white-space: nowrap;">{{ text | default: "#1 Award-Winning Product" }}</span>
</div>
</div>Caja de Envío
Display claro de información de envío. Transparencia que reduce el abandono del carrito.
<div class="delivery-box">
<div class="text-wrapper">
<div class="title">
{{ delivery_title | default: "Free Delivery and Returns" }}
</div>
<div class="delivery-time">
{{ delivery_subtext | default: "Free no contact delivery for all orders" }}<br />
{{ delivery_time_text | default: "Delivered in: <span>2 - 5 working days</span>" }}
</div>
</div>
{% style %}
:root {
/* General settings */
--border-color: {{ border_color | default: "#d4d4d4" }};
--border-radius: {{ border_radius | default: "8px" }};
--padding: {{ padding | default: "12px 15px" }};
--background-color: {{ background_color | default: "#ffffff" }};
/* Title settings */
--title-font-size: {{ title_font_size | default: "14px" }};
--title-font-color: {{ title_font_color | default: "#474747" }};
--title-font-weight: {{ title_font_weight | default: 'bold' }};
/* Subtext settings */
--subtext-font-size: {{ subtext_font_size | default: "13px" }};
--subtext-font-color: {{ subtext_font_color | default: "#474747" }};
/* Highlight text (like delivery time) */
--highlight-color: {{ highlight_color | default: "#039903" }};
}
.delivery-box {
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--padding);
background-color: var(--background-color);
}
.text-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
}
.title {
font-size: var(--title-font-size);
font-weight: var(--title-font-weight);
margin: 0;
color: var(--title-font-color);
line-height: 15px;
}
.delivery-time {
font-size: var(--subtext-font-size);
color: var(--subtext-font-color);
line-height: 20px;
}
.delivery-time span {
font-weight: bold;
color: var(--highlight-color);
}
{% endstyle %}
</div>Características Premium del Producto
Muestra los beneficios clave del producto con iconos. Genera confianza y reduce la hesitación del comprador.
<div style="display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; background:{{ background_color | default: "#ffffff" }}; border-radius:{{ border_radius | default: "20px" }}; padding:{{ container_padding | default: "40px 20px" }}; font-family:inherit; margin-top:{{ margin_top | default: "20px" }}; margin-bottom:{{ margin_bottom | default: "20px" }};">
<!-- Sol: Görsel -->
<div style="flex:1 1 50%; max-width:100%; padding:{{ image_padding | default: '20px' }}; box-sizing:border-box; display:flex; justify-content:center; align-items:center;">
<img src="{{ product_image | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_May_4_2025_10_06_11_AM_1__1753442482364.png?v=1753442487" }}" alt="{{ image_alt | default: "Product Image" }}" style="width:100%; max-width:{{ image_max_width | default: "500px" }}; height:auto; border-radius:{{ image_border_radius | default: "16px" }};">
</div>
<!-- Sağ: Özellik Kutusu -->
<div style="flex:1 1 50%; max-width:100%; padding:{{ content_padding | default: '20px' }}; box-sizing:border-box; display:flex; justify-content:center; align-items:center;">
<div style="width:100%; max-width:{{ content_max_width | default: '500px' }}; background:{{ content_background | default: "#fafafa" }}; border:{{ content_border_style | default: "1px solid" }} {{ content_border_color | default: "#bae6fd" }}; border-radius:{{ content_border_radius | default: "16px" }}; padding:{{ content_inner_padding | default: '24px' }}; box-sizing:border-box;">
<!-- Başlık -->
<h2 style="font-size:{{ title_font_size | default: "24px" }}; font-weight:{{ title_font_weight | default: '700' }}; color:{{ title_color | default: "#368db5" }}; margin-bottom:{{ title_margin_bottom | default: '8px' }};">
{{ main_title | default: "Product Features" }} <span style="font-style:italic; color:{{ subtitle_color | default: "#57cdff" }};">{{ subtitle | default: "Premium" }}</span>
</h2>
<p style="margin-bottom:{{ description_margin_bottom | default: '24px' }}; color:{{ description_color | default: "#555" }};">{{ description | default: "Discover the outstanding features that make our product stand out from the competition." }}</p>
<!-- Özellik 1 -->
<div style="display:flex; gap:{{ feature_gap | default: '12px' }}; margin-bottom:{{ feature_margin_bottom | default: '20px' }}; align-items:flex-start;">
<div style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; margin-top:4px;">
<img src="{{ feature_1_icon | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_May_4_2025_10_06_11_AM_1__1753442482364.png?v=1753442487" }}" alt="Feature 1 Icon" style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; border-radius:{{ icon_border_radius | default: "10px" }};">
</div>
<div style="flex:1;">
<strong style="color:{{ feature_title_color | default: "#383838" }};">{{ feature_1_title | default: "High Quality Materials" }}</strong>
<p style="margin:4px 0 0; color:{{ feature_text_color | default: "#555" }};">
{{ feature_1_text | default: "Made with premium materials that are built to last and deliver exceptional performance." }}
</p>
</div>
</div>
<!-- Özellik 2 -->
<div style="display:flex; gap:{{ feature_gap | default: '12px' }}; margin-bottom:{{ feature_margin_bottom | default: '20px' }}; align-items:flex-start;">
<div style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; margin-top:4px;">
<img src="{{ feature_2_icon | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_May_4_2025_10_06_11_AM_1__1753442482364.png?v=1753442487" }}" alt="Feature 2 Icon" style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; border-radius:{{ icon_border_radius | default: "10px" }};">
</div>
<div style="flex:1;">
<strong style="color:{{ feature_title_color | default: "#383838" }};">{{ feature_2_title | default: "Easy to Use Design" }}</strong>
<p style="margin:4px 0 0; color:{{ feature_text_color | default: "#555" }};">
{{ feature_2_text | default: "Intuitive design makes this product simple to use, saving you valuable time and effort." }}
</p>
</div>
</div>
<!-- Özellik 3 -->
<div style="display:flex; gap:{{ feature_gap | default: '12px' }}; margin-bottom:{{ feature_margin_bottom | default: '20px' }}; align-items:flex-start;">
<div style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; margin-top:4px;">
<img src="{{ feature_3_icon | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_May_4_2025_10_06_11_AM_1__1753442482364.png?v=1753442487" }}" alt="Feature 3 Icon" style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; border-radius:{{ icon_border_radius | default: "10px" }};">
</div>
<div style="flex:1;">
<strong style="color:{{ feature_title_color | default: "#383838" }};">{{ feature_3_title | default: "Multiple Configuration Options" }}</strong>
<p style="margin:4px 0 0; color:{{ feature_text_color | default: "#555" }};">
{{ feature_3_text | default: "Customize your experience with various settings to meet your specific needs." }}
</p>
</div>
</div>
<!-- Özellik 4 -->
<div style="display:flex; gap:{{ feature_gap | default: '12px' }}; align-items:flex-start;">
<div style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; margin-top:4px;">
<img src="{{ feature_4_icon | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_May_4_2025_10_06_11_AM_1__1753442482364.png?v=1753442487" }}" alt="Feature 4 Icon" style="width:{{ icon_size | default: "20px" }}; height:{{ icon_size | default: "20px" }}; border-radius:{{ icon_border_radius | default: "10px" }};">
</div>
<div style="flex:1;">
<strong style="color:{{ feature_title_color | default: "#383838" }};">{{ feature_4_title | default: "Long-Term Value" }}</strong>
<p style="margin:4px 0 0; color:{{ feature_text_color | default: "#555" }};">
{{ feature_4_text | default: "A smart investment that pays for itself over time with its durability and efficiency." }}
</p>
</div>
</div>
</div>
</div>
</div>Calificación de Estrellas
Muestra calificaciones de productos con estrellas. Aumenta la confianza y la confianza de compra al instante.
<div style="
margin-top: {{ margin_top | default: "8px" }};
margin-bottom: {{ margin_bottom | default: "8px" }};
width: 100%
">
<div style="
width: 100%;
display: flex;
align-items: center;
justify-content: {{ alignment | default: "start" }};
text-align: left;
gap: {{ gap | default: "8px" }}
">
<div style="display: flex; align-items: center;">
{% for i in (1..5) %}
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="
fill: {{ star_color | default: "#000000" }};
height: {{ star_size | default: "16px" }};
width: {{ star_size | default: "16px" }}
" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"></path>
</svg>
{% endfor %}
</div>
<span style="
font-size: {{ font_size | default: "14px" }};
font-weight: {{ font_weight | default: "400" }};
color: {{ text_color | default: "#000000" }}
">{{ text | default: "4.9/5 (1k+ Reviews)" }}</span>
</div>
</div>Vendiendo Rápido
Crea urgencia con un contador de ventas en vivo. Activa FOMO y acelera las decisiones.
<div style="
background: {{ background_color | default: "#f5f0ff" }};
color: {{ text_color | default: "#1a1a1a" }};
border-radius: {{ border_radius | default: "20px" }};
font-size: {{ font_size | default: "13px" }};
padding: {{ padding | default: "6px 14px" }};
display: inline-flex;
align-items: center;
gap: {{ gap | default: "6px" }};
box-shadow: {{ box_shadow | default: "0 1px 2px rgba(0, 0, 0, 0.08)" }};
margin: {{ margin | default: "16px 0" }};
">
<span style="
width: {{ dot_size | default: "10px" }};
height: {{ dot_size | default: "10px" }};
border-radius: 50%;
background: {{ dot_color | default: "#7c3aed" }};
display: inline-block;
"></span>
<strong>{{ title_text | default: "Selling Fast!" }}</strong> {{ viewer_text | default: "28 people are looking at this" }}
</div>Anuncio Desplazable
Mensajes de desplazamiento continuo. Mantiene las promociones visibles en todo momento.
<div style="
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
width: 100%;
color: white;
padding: {{ padding | default: "4px 0px" }};
will-change: transform;
-webkit-font-smoothing: subpixel-antialiased;
background: {{ background_color | default: "#f472b6" }}
">
<div style="display: inline-block; animation: marquee {{ scroll_duration | default: "50" }}s linear infinite">
<div style="
display: flex;
gap: {{ gap | default: "80px" }};
font-weight: {{ font_weight | default: "500" }};
font-size: {{ font_size | default: "14px" }};
color: {{ text_color | default: "#ffffff" }}
">
<div>{{ text_1 | default: "🎉 50% OFF YOUR FIRST ORDER" }}</div>
<div>{{ text_2 | default: "🚚 FREE SHIPPING ON ALL ORDERS" }}</div>
<div>{{ text_3 | default: "✅ 30 DAY MONEYBACK GUARANTEE" }}</div>
<div>{{ text_1 | default: "🎉 50% OFF YOUR FIRST ORDER" }}</div>
<div>{{ text_2 | default: "🚚 FREE SHIPPING ON ALL ORDERS" }}</div>
<div>{{ text_3 | default: "✅ 30 DAY MONEYBACK GUARANTEE" }}</div>
<div>{{ text_1 | default: "🎉 50% OFF YOUR FIRST ORDER" }}</div>
<div>{{ text_2 | default: "🚚 FREE SHIPPING ON ALL ORDERS" }}</div>
<div>{{ text_3 | default: "✅ 30 DAY MONEYBACK GUARANTEE" }}</div>
</div>
</div>
</div>
<style>
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>Garantía de Devolución 2
Insignia de garantía mejorada con iconos de confianza. Elimina la hesitación de compra completamente.
<div style="background: {{ background | default: "linear-gradient(to bottom, #e6f6fd, #ffffff)" }}; padding: {{ container_padding | default: "60px 20px" }}; text-align: center;">
<div style="display: flex; justify-content: center; gap: {{ image_gap | default: "16px" }}; margin-bottom: {{ images_margin_bottom | default: "40px" }}; flex-wrap: wrap;">
<img src="{{ image_1 | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Image1.webp?v=1746693274" }}" alt="photo" style="width: {{ image_width | default: "100px" }}; height: auto; border-radius: {{ image_border_radius | default: "8px" }}; transform: rotate(-8deg); box-shadow: {{ image_shadow | default: "0 4px 10px rgba(0,0,0,0.2)" }};">
<img src="{{ image_2 | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Image1.webp?v=1746693274" }}" alt="photo" style="width: {{ image_width | default: "100px" }}; height: auto; border-radius: {{ image_border_radius | default: "8px" }}; transform: scale(1.1); z-index: 2; box-shadow: {{ image_shadow | default: "0 4px 10px rgba(0,0,0,0.2)" }};">
<img src="{{ image_3 | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Image1.webp?v=1746693274" }}" alt="photo" style="width: {{ image_width | default: "100px" }}; height: auto; border-radius: {{ image_border_radius | default: "8px" }}; transform: rotate(8deg); box-shadow: {{ image_shadow | default: "0 4px 10px rgba(0,0,0,0.2)" }};">
</div>
<div style="font-size: {{ title_font_size | default: "22px" }}; font-weight: bold; color: {{ title_color | default: "#1e3a8a" }}; margin-bottom: {{ title_margin_bottom | default: "12px" }};">
{{ title_first_part | default: "Money-Back" }} <span style="color: {{ title_highlight_color | default: "#60a5fa" }};">{{ title_second_part | default: "Guarantee" }}</span>
</div>
<div style="color: {{ description_color | default: "#1e3a8a" }}; font-size: {{ description_font_size | default: "15px" }}; max-width: {{ description_max_width | default: "600px" }}; margin: 0 auto {{ description_margin_bottom | default: "30px" }} auto;">
{% if description_text %}
{{ description_text }}
{% else %}
We're so confident in the quality of our product that we offer a satisfaction guarantee. If you're not completely satisfied with your purchase, simply return the item within 30 days for a full refund.
{% endif %}
</div>
<div style="margin: {{ button_margin | default: "30px auto 20px" }};">
<a href="{{ button_link | default: "#" }}" style="display: inline-block; background: {{ button_bg | default: "#3b82f6" }}; color: {{ button_text_color | default: "white" }}; padding: {{ button_padding | default: "16px 40px" }}; border-radius: {{ button_border_radius | default: "12px" }}; font-weight: {{ button_font_weight | default: "700" }}; font-size: {{ button_font_size | default: "15px" }}; letter-spacing: 1px; text-decoration: none;">
{{ button_text | default: "ADD TO CART" }}
</a>
</div>
<div style="margin-top: {{ features_margin_top | default: "24px" }}; font-size: {{ features_font_size | default: "14px" }}; color: {{ features_color | default: "#1e3a8a" }}; display: flex; gap: {{ features_gap | default: "16px" }}; justify-content: center; flex-wrap: wrap; align-items: center;">
<span style="display: flex; align-items: center; gap: 6px;"><svg width="16" height="16" fill="{{ check_icon_color | default: "#2563eb" }}" viewBox="0 0 24 24"><path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/></svg>{{ feature_1_text | default: "100% Satisfaction" }}</span>
<span style="display: flex; align-items: center; gap: 6px;"><svg width="16" height="16" fill="{{ check_icon_color | default: "#2563eb" }}" viewBox="0 0 24 24"><path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/></svg>{{ feature_2_text | default: "Fast Shipping" }}</span>
<span style="display: flex; align-items: center; gap: 6px;"><svg width="16" height="16" fill="{{ check_icon_color | default: "#2563eb" }}" viewBox="0 0 24 24"><path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/></svg>{{ feature_3_text | default: "Easy Returns" }}</span>
</div>
</div>Carrusel de Fotos de Reseñas
Carrusel de fotos de desplazamiento infinito que muestra imágenes de reseñas con botón CTA personalizable.
<div style="background: {{ background_color | default: "#fafafa" }}; padding: {{ container_padding | default: "40px 20px" }}; text-align: center; margin: {{ margin_top | default: "0px" }} auto {{ margin_bottom | default: "0px" }} auto;">
<!-- Photo Carousel -->
<div class="photo-carousel-container">
<div class="photo-carousel-wrapper">
<div class="photo-carousel-track">
<img src="{{ photo_1 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 1" />
<img src="{{ photo_2 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 2" />
<img src="{{ photo_3 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 3" />
<img src="{{ photo_4 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 4" />
<img src="{{ photo_5 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 5" />
<!-- Duplicate for seamless loop -->
<img src="{{ photo_1 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 1" />
<img src="{{ photo_2 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 2" />
<img src="{{ photo_3 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 3" />
<img src="{{ photo_4 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 4" />
<img src="{{ photo_5 | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/ChatGPT_Image_Jun_11_2025_07_50_03_PM.webp?v=1753718272" }}" class="photo-carousel-img" alt="Review 5" />
</div>
</div>
</div>
<!-- CTA Section -->
<div style="margin-top: 30px;">
<h2 style="color: {{ title_color | default: "#333" }}; font-size: {{ title_font_size | default: "28px" }}; margin-bottom: 10px; font-weight: bold;">{{ main_title | default: "J'oin thousands of happy customers" }}</h2>
<p style="color: {{ subtitle_color | default: "#666" }}; font-size: {{ subtitle_font_size | default: "16px" }}; margin-bottom: 20px;">{{ subtitle | default: "E'xperience the quality that made us their favorite choice" }}</p>
<a href="{{ cta_link | default: "#" }}" style="background: {{ cta_bg_color | default: "linear-gradient(0deg, #d2d77e, #4abf8f)" }}; color: {{ cta_text_color | default: "#fff" }}; padding: {{ cta_padding | default: "12px 30px" }}; text-decoration: none; border-radius: {{ cta_border_radius | default: "13px" }}; font-size: {{ cta_font_size | default: "16px" }}; font-weight: bold; display: inline-block; transition: all 0.3s ease;">{{ cta_text | default: "Shop Now" }}</a>
</div>
</div>
<style>
.photo-carousel-container {
overflow: hidden;
position: relative;
width: 100%;
margin-bottom: 30px;
}
.photo-carousel-wrapper {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
}
.photo-carousel-track {
display: flex;
gap: {{ photo_gap | default: "16px" }};
animation: photo-carousel-scroll {{ carousel_duration | default: "20" }}s linear infinite;
flex-shrink: 0;
}
.photo-carousel-track:hover {
animation-play-state: paused;
}
.photo-carousel-img {
min-width: {{ photo_width | default: "240px" }};
height: {{ photo_height | default: "320px" }};
object-fit: cover;
border-radius: {{ photo_border_radius | default: "16px" }};
flex-shrink: 0;
}
@keyframes photo-carousel-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@media (max-width: 768px) {
.photo-carousel-track {
animation: photo-carousel-scroll {{ mobile_carousel_duration | default: "12" }}s linear infinite;
}
.photo-carousel-img {
min-width: {{ mobile_photo_width | default: "180px" }};
height: {{ mobile_photo_height | default: "240px" }};
}
}
@media (max-width: 480px) {
.photo-carousel-img {
min-width: {{ small_photo_width | default: "140px" }};
height: {{ small_photo_height | default: "200px" }};
}
}
</style>Oferta de Paquete
Sección de oferta de paquete premium con múltiples productos y precios.
<div class="bundle-offer-container">
<div class="bundle-header">
<h2 class="offer-title">{{ offerTitle | default: "Welcome Offer" }}</h2>
</div>
<div class="bundle-content">
<div class="bundle-title-row">
<h3 class="bundle-name">{{ bundleName | default: "Welcome Package" }} <span class="item-count">({{ itemCount | default: "(3 products)" }})</span></h3>
<div class="pricing">
<span class="original-price">{{ originalPrice | default: "€87,00" }}</span>
<span class="free-badge">{{ freeText | default: "FREE!" }}</span>
</div>
</div>
<div class="bundle-items">
<!-- Product 1 -->
<div class="bundle-item">
<div class="item-image">
<img src="{{ product1Image | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/f1858eaa-0eac-4348-bd1e-892ea2fcbd82.webp?v=1755637517" }}" alt="{{ product1Name | default: "G-01 Glass Bottle" }}" loading="lazy">
<span class="free-indicator">+</span>
</div>
<div class="item-details">
<h4 class="item-name">{{ product1Name | default: "G-01 Glass Bottle" }}</h4>
</div>
<div class="item-pricing">
<span class="crossed-price">{{ product1Price | default: "€29,00" }}</span>
<span class="current-price">€0,00</span>
</div>
</div>
<!-- Product 2 -->
<div class="bundle-item">
<div class="item-image">
<img src="{{ product2Image | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/f1858eaa-0eac-4348-bd1e-892ea2fcbd82.webp?v=1755637517" }}" alt="{{ product2Name | default: "Hand Blender" }}" loading="lazy">
<span class="free-indicator">+</span>
</div>
<div class="item-details">
<h4 class="item-name">{{ product2Name | default: "Hand Blender" }}</h4>
</div>
<div class="item-pricing">
<span class="crossed-price">{{ product2Price | default: "€29,00" }}</span>
<span class="current-price">€0,00</span>
</div>
</div>
<!-- Product 3 -->
<div class="bundle-item">
<div class="item-image">
<img src="{{ product3Image | default: "https://cdn.shopify.com/s/files/1/0637/5781/1919/files/f1858eaa-0eac-4348-bd1e-892ea2fcbd82.webp?v=1755637517" }}" alt="{{ product3Name | default: "Metal Spoon" }}" loading="lazy">
<span class="free-indicator">+</span>
</div>
<div class="item-details">
<h4 class="item-name">{{ product3Name | default: "Metal Spoon" }}</h4>
</div>
<div class="item-pricing">
<span class="crossed-price">{{ product3Price | default: "€29,00" }}</span>
<span class="current-price">€0,00</span>
</div>
</div>
</div>
</div>
</div>
<style>
.bundle-offer-container {
max-width: 900px;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border: 2px solid {{ borderColor | default: "#8E1919" }};
border-radius: 8px;
overflow: hidden;
background: #FFFFFF;
}
.bundle-header {
background: {{ backgroundColor | default: "#FFE5E5" }};
padding: 15px;
text-align: center;
border-bottom: 2px solid {{ borderColor | default: "#8E1919" }};
}
.offer-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: {{ titleTextColor | default: "#8E1919" }};
}
.bundle-content {
padding: 25px;
background: {{ contentBackground | default: "#FFF1F1" }};
}
.bundle-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid {{ borderColor | default: "#8E1919" }};
}
.bundle-name {
font-size: 28px;
font-weight: 700;
color: {{ titleTextColor | default: "#8E1919" }};
margin: 0;
}
.item-count {
font-size: 18px;
color: {{ priceTextColor | default: "#B22222" }};
font-weight: 400;
}
.pricing {
display: flex;
align-items: center;
gap: 15px;
}
.original-price {
font-size: 20px;
color: {{ priceTextColor | default: "#B22222" }};
text-decoration: line-through;
}
.free-badge {
background: {{ freeBadgeColor | default: "#FF4C4C" }};
color: {{ freeBadgeTextColor | default: "#FFFFFF" }};
padding: 8px 18px;
border-radius: 30px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
display: inline-block;
}
.bundle-items {
display: flex;
flex-direction: column;
gap: 15px;
}
.bundle-item {
display: flex;
align-items: center;
padding: 15px;
background: {{ itemBackground | default: "#FFE5E5" }};
border-radius: 8px;
}
.item-image {
position: relative;
width: 60px;
height: 60px;
margin-right: 20px;
flex-shrink: 0;
}
.item-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.free-indicator {
position: absolute;
top: -5px;
left: -5px;
width: 14px;
height: 14px;
background: {{ freeBadgeColor | default: "#FF4C4C" }};
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: {{ freeBadgeTextColor | default: "#FFFFFF" }};
font-size: 10px;
font-weight: bold;
}
.item-details {
flex-grow: 1;
}
.item-name {
font-size: 18px;
font-weight: 600;
color: {{ productNameColor | default: "#8E1919" }};
margin: 0;
}
.item-pricing {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
.crossed-price {
font-size: 14px;
color: {{ priceTextColor | default: "#B22222" }};
text-decoration: line-through;
}
.current-price {
font-size: 20px;
font-weight: 700;
color: {{ currentPriceColor | default: "#FF4C4C" }};
}
@media (max-width: 768px) {
.bundle-title-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.bundle-name {
font-size: 18px;
}
.item-count {
font-size: 14px;
}
.free-badge {
font-size: 12px;
padding: 5px 12px;
}
.bundle-item {
flex-direction: row;
gap: 10px;
padding: 10px;
}
.item-name {
font-size: 14px;
}
.item-pricing {
align-items: flex-end;
gap: 3px;
}
.original-price {
font-size: 12px;
}
.current-price {
font-size: 14px;
}
.free-indicator {
width: 12px;
height: 12px;
font-size: 10px;
}
}
@media (max-width: 480px) {
.offer-title {
font-size: 20px;
}
.bundle-name {
font-size: 16px;
}
.item-count {
font-size: 12px;
}
.item-name {
font-size: 12px;
}
.original-price {
font-size: 10px;
}
.current-price {
font-size: 12px;
}
.free-badge {
font-size: 10px;
padding: 3px 8px;
}
.free-indicator {
width: 10px;
height: 10px;
font-size: 8px;
}
}
</style>Slider Antes/Después
Slider interactivo de comparación antes/después con transiciones suaves.
<main class="xq79_main">
<!-- Rating Badge -->
<div class="ckh57_rating_wrapper" style="display: {{ showRatingBadge | default: "flex" }};">
<span class="ckh57_rating_badge">
{{ ratingIcon | default: "★" }} <strong>{{ ratingText | default: "See real" }}</strong> {{ ratingCount | default: "transformations!" }}
</span>
</div>
<!-- Before/After Container -->
<div class="bda74_container">
<div class="mka82_image_wrapper">
<div class="ovp19_before_wrapper">
<img
class="xaw63_before_image ylk55_slider_image"
src="{{ beforeImage | default: "https://localdentalclinics.com.au/blogs/1671520930.png" }}"
alt="{{ beforeAlt | default: 'Before image' }}"
>
<span class="bda99_before_badge lkc47_badge" style="display: {{ showBadges | default: 'block' }};">{{ beforeText | default: "Before" }}</span>
</div>
<div class="lwq28_after_wrapper">
<img
class="qkj87_after_image ylk55_slider_image"
src="{{ afterImage | default: "https://localdentalclinics.com.au/blogs/1671520930.png" }}"
alt="{{ afterAlt | default: 'After image' }}"
>
<span class="mds63_after_badge lkc47_badge" style="display: {{ showBadges | default: 'block' }};">{{ afterText | default: "After" }}</span>
</div>
</div>
<!-- Range input (slider) -->
<input
type="range"
min="0"
max="100"
value="{{ sliderPosition | default: 50 }}"
aria-label="Percentage of before photo shown"
class="hxa82_slider"
>
<!-- Line -->
<div class="qlp76_slider_line" aria-hidden="true"></div>
<!-- Button with SVG -->
<div class="tka19_slider_button" aria-hidden="true">
<div class="double-arrow" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="17 8 21 12 17 16"></polyline>
<polyline points="7 8 3 12 7 16"></polyline>
<line x1="3" y1="12" x2="21" y2="12"></line>
</svg>
</div>
</div>
</div>
</main>
<style>
.xq79_main {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding: 0 5rem;
width: 100%;
margin: {{ margin | default: '50px auto' }};
}
.ckh57_rating_wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.ckh57_rating_badge {
background: {{ ratingBadgeBackground | default: "linear-gradient(180deg, #99e19e, #fffdc2)" }};
padding: {{ ratingBadgePadding | default: '10px 20px' }};
border-radius: {{ ratingBadgeBorderRadius | default: '9999px' }};
font-size: {{ ratingBadgeFontSize | default: "16px" }};
font-weight: {{ ratingBadgeFontWeight | default: '500' }};
color: {{ ratingBadgeTextColor | default: "#000000" }};
font-family: {{ fontFamily | default: 'sans-serif' }};
box-shadow: {{ ratingBadgeBoxShadow | default: '0 2px 6px rgba(0, 0, 0, 0.1)' }};
max-width: 90vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ckh57_rating_badge strong {
font-weight: {{ ratingBadgeStrongFontWeight | default: '700' }};
}
img {
display: block;
max-width: 100%;
}
.bda74_container {
display: grid;
position: relative;
overflow: hidden;
border-radius: {{ borderRadius | default: "1rem" }};
--position: {{ sliderPosition | default: 50 }}%;
width: {{ containerWidth | default: "50%" }};
box-shadow: {{ boxShadow | default: '0 4px 20px rgba(0, 0, 0, 0.1)' }};
}
.mka82_image_wrapper {
max-width: {{ maxWidth | default: '1200px' }};
}
.bda99_before_badge, .mds63_after_badge {
z-index: 99 !important;
position: absolute;
bottom: 15px;
background: {{ badgeBackground | default: "#ffffff" }};
padding: {{ badgePadding | default: '8px 12px' }};
border-radius: {{ badgeBorderRadius | default: '5px' }};
color: {{ badgeTextColor | default: "#000000" }};
font-family: {{ fontFamily | default: 'sans-serif' }};
font-weight: {{ badgeFontWeight | default: 'bold' }};
font-size: {{ badgeFontSize | default: '14px' }};
box-shadow: {{ badgeBoxShadow | default: '0 2px 8px rgba(0, 0, 0, 0.15)' }};
}
.bda99_before_badge { left: 15px; }
.mds63_after_badge { right: 15px; }
.ylk55_slider_image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
max-height: {{ imageMaxHeight | default: '500px' }};
}
.xaw63_before_image {
position: absolute;
inset: 0;
width: var(--position);
}
.hxa82_slider {
position: absolute;
inset: 0;
cursor: ew-resize;
opacity: 0;
width: 100%;
height: 100%;
z-index: 3; /* Üstte çalışır */
}
.hxa82_slider:focus-visible ~ .tka19_slider_button {
outline: 5px solid {{ focusColor | default: 'black' }};
outline-offset: 3px;
}
.qlp76_slider_line {
position: absolute;
inset: 0;
width: {{ lineWidth | default: '.2rem' }};
height: 100%;
background-color: {{ lineColor | default: "#ffffff" }};
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
box-shadow: {{ lineBoxShadow | default: '0 0 10px rgba(0, 0, 0, 0.3)' }};
z-index: 1;
}
.tka19_slider_button {
position: absolute;
width: {{ buttonSize | default: '40px' }};
height: {{ buttonSize | default: '40px' }};
background: {{ buttonBackground | default: "#ffffff" }};
border: {{ buttonBorder | default: '2px solid #000' }};
border-radius: 50%;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: {{ buttonBoxShadow | default: '0 3px 12px rgba(0, 0, 0, 0.25)' }};
color: {{ buttonTextColor | default: "#000000" }};
transition: all 0.2s ease;
z-index: 2;
}
.tka19_slider_button .double-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.hxa82_slider:hover ~ .tka19_slider_button {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: {{ buttonHoverBoxShadow | default: '0 5px 20px rgba(0, 0, 0, 0.35)' }};
}
@media only screen and (max-width: 768px) {
.bda74_container {
width: {{ mobileContainerWidth | default: '100%' }};
}
.xq79_main {
padding: {{ mobilePadding | default: '0 20px' }};
}
.tka19_slider_button {
width: {{ mobileButtonSize | default: '35px' }};
height: {{ mobileButtonSize | default: '35px' }};
}
.ckh57_rating_badge {
font-size: {{ mobileRatingBadgeFontSize | default: '13px' }};
padding: {{ mobileRatingBadgePadding | default: '8px 14px' }};
white-space: normal;
text-align: center;
overflow: visible;
text-overflow: initial;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".bda74_container");
const slider = document.querySelector(".hxa82_slider");
if (container && slider) {
slider.addEventListener("input", (e) => {
container.style.setProperty("--position", `${e.target.value}%`);
});
container.style.transition = "all 0.3s ease";
}
});
</script>Alerta de Stock Bajo
Muestra advertencias de inventario limitado. Crea escasez y desencadena decisiones de compra rápidas.
<div style="
margin-top: {{ margin_top | default: "0.25rem" }};
margin-bottom: {{ margin_bottom | default: "0.25rem" }};
width: fit-content;
">
<div style="
background: {{ background_color | default: "#fff2f2" }};
color: {{ text_color | default: "#dc2525" }};
padding: {{ padding | default: "3px 10px" }};
border-radius: {{ border_radius | default: "6px" }};
font-weight: {{ font_weight | default: "700" }};
margin-right: {{ margin_right | default: "0" }};
font-size: {{ font_size | default: "12px" }};
display: flex;
align-items: center;
justify-content: center;
gap: {{ gap | default: "10px" }};
">
<div style="position: relative;">
<div style="
width: {{ dot_size | default: "8px" }};
height: {{ dot_size | default: "8px" }};
background: {{ dot_color | default: "#dc2525" }};
border-radius: 50%;
position: absolute;
animation: lc-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
display: block !important;
"></div>
<style>
@keyframes lc-ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
</style>
<div style="
width: {{ dot_size | default: "8px" }};
height: {{ dot_size | default: "8px" }};
background: {{ dot_color | default: "#dc2525" }};
border-radius: 50%;
display: block !important;
"></div>
</div>
{{ text | default: "LOW STOCK" }}
</div>
</div>Precio con Insignias
Destaca tus ofertas con precios dinámicos, símbolos de moneda personalizados e insignias de descuento.
{% comment %}
Section: Product Price with Badges
Description: Compact design with smaller, single-line left-aligned badge (no font definition)
Author: Burak Ersoy
{% endcomment %}
<style>
.product-price-badges {
max-width: 320px;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
/* Top line (discount, old price, new price) */
.product-top-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.product-discount {
background: #c73225;
color: #fff;
font-weight: 600;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
flex-shrink: 0;
}
.product-old {
color: #a0a0a0;
text-decoration: line-through;
font-size: 14px;
flex-shrink: 0;
}
.product-new {
color: #000;
font-weight: 700;
font-size: 18px;
}
/* Smaller, single-line badge */
.product-cart-badge {
background: #c73225;
color: #fff;
font-weight: 600;
padding: 6px 10px;
border-radius: 5px;
font-size: 13px;
margin-top: 8px;
text-align: left;
line-height: 1;
white-space: nowrap;
display: inline-block;
}
/* Responsive */
@media (max-width: 480px) {
.product-top-line {
gap: 5px;
}
.product-discount {
font-size: 11px;
padding: 3px 6px;
}
.product-old {
font-size: 12px;
}
.product-new {
font-size: 15px;
}
.product-cart-badge {
font-size: 12px;
padding: 5px 8px;
border-radius: 5px;
}
}
</style>
{% assign original_price = 154.99 %}
{% assign discounted_price = 108.49 %}
{% assign cart_discount_price = 97.64 %}
{% assign discount_rate = 30 %}
{% assign currency_symbol = "$" %}
{% assign extra_discount_text = "Extra 10% Off in Cart" %}
<div class="product-price-badges">
<div class="product-top-line">
<span class="product-discount">-30%</span>
<span class="product-old">$154.99</span>
<span class="product-new">$108.49</span>
</div>
<div class="product-cart-badge">
Extra 10% Off in Cart $97.64
</div>
</div>Preguntas y Respuestas
Sección de preguntas y respuestas interactiva con filtrado por categoría y respuestas de la marca.
<div id="sckit-qa-container" class="sckit-qa-wrapper-fixed">
<div class="product-qa-header">
<h2 class="product-qa-title">Product Questions & Answers</h2>
</div>
<div class="product-qa-tabs">
<button type="button" class="qa-tab active" data-cat="all">All</button>
<button type="button" class="qa-tab" data-cat="usage">Usage & Dosage</button>
<button type="button" class="qa-tab" data-cat="ingredients">Ingredients</button>
<button type="button" class="qa-tab" data-cat="results">Results</button>
<button type="button" class="qa-tab" data-cat="shipping">Shipping & Returns</button>
<button type="button" class="qa-tab" data-cat="safety">Safety</button>
</div>
<div class="product-qa-slider-container">
<div class="qa-card" data-category="usage">
<p class="qa-question">How should I take NutraBoost Daily Complex?</p>
<div class="qa-answer-box">
<div class="qa-brand">
<img src="https://cdn.shopify.com/s/files/1/0701/2279/9151/files/IMG_0443.png" alt="NutraBoost" width="20" height="20">
<span>NutraBoost</span>
</div>
<p>Take two capsules daily after breakfast with a full glass of water for optimal absorption.</p>
</div>
</div>
<div class="qa-card" data-category="usage">
<p class="qa-question">Can I take it on an empty stomach?</p>
<div class="qa-answer-box">
<div class="qa-brand">
<img src="https://cdn.shopify.com/s/files/1/0701/2279/9151/files/IMG_0443.png" alt="NutraBoost" width="20" height="20">
<span>NutraBoost</span>
</div>
<p>It's best taken with food to avoid stomach discomfort and ensure proper vitamin absorption.</p>
</div>
</div>
<div class="qa-card" data-category="ingredients">
<p class="qa-question">What are the main ingredients?</p>
<div class="qa-answer-box">
<div class="qa-brand">
<img src="https://cdn.shopify.com/s/files/1/0701/2279/9151/files/IMG_0443.png" alt="NutraBoost" width="20" height="20">
<span>NutraBoost</span>
</div>
<p>Each capsule contains Vitamin C, D3, Zinc, Ashwagandha, and Magnesium for balanced energy and focus.</p>
</div>
</div>
<div class="qa-card" data-category="results">
<p class="qa-question">When will I start noticing results?</p>
<div class="qa-answer-box">
<div class="qa-brand">
<img src="https://cdn.shopify.com/s/files/1/0701/2279/9151/files/IMG_0443.png" alt="NutraBoost" width="20" height="20">
<span>NutraBoost</span>
</div>
<p>Most users report feeling more energetic and focused within 7–10 days of consistent use.</p>
</div>
</div>
<div class="qa-card" data-category="safety">
<p class="qa-question">Is it safe for daily use?</p>
<div class="qa-answer-box">
<div class="qa-brand">
<img src="https://cdn.shopify.com/s/files/1/0701/2279/9151/files/IMG_0443.png" alt="NutraBoost" width="20" height="20">
<span>NutraBoost</span>
</div>
<p>Yes, all ingredients are clinically tested and approved for daily use under recommended doses.</p>
</div>
</div>
<div class="qa-card" data-category="shipping">
<p class="qa-question">How long does delivery take?</p>
<div class="qa-answer-box">
<div class="qa-brand">
<img src="https://cdn.shopify.com/s/files/1/0701/2279/9151/files/IMG_0443.png" alt="NutraBoost" width="20" height="20">
<span>NutraBoost</span>
</div>
<p>Orders are shipped within 24 hours and typically arrive in 3–5 business days within Turkey.</p>
</div>
</div>
</div>
</div>
<style>
/* 1. Kapsayıcıyı Kilitle: Diğer elementleri itmesini engeller */
.sckit-qa-wrapper-fixed {
width: 100% !important;
max-width: 100vw !important;
overflow: hidden !important;
margin: 20px 0 !important;
padding: 0 15px !important;
box-sizing: border-box !important;
display: block !important;
clear: both !important;
}
.sckit-qa-wrapper-fixed * { box-sizing: border-box; }
/* Header */
.product-qa-header {
margin-bottom: 15px;
}
.product-qa-title { font-size: 18px; font-weight: 700; margin:0; color: #000000; }
/* Tabs */
.product-qa-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.product-qa-tabs::-webkit-scrollbar { display: none; }
.qa-tab {
flex: 0 0 auto;
padding: 7px 15px;
border-radius: 20px;
border: 1px solid #ddd;
background: #f8f8f8;
color: #333333;
font-size: 13px;
cursor: pointer;
}
.qa-tab.active { background: #000000; color: #ffffff; border-color: #000000; }
/* Slider Area */
.product-qa-slider-container {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 15px;
scroll-snap-type: x mandatory;
}
.product-qa-slider-container::-webkit-scrollbar { display: none; }
/* Kartların genişliğini sabitledik ki resimleri sıkıştırmasın */
.qa-card {
flex: 0 0 280px !important;
min-width: 280px !important;
scroll-snap-align: start;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 15px;
background: #ffffff;
}
.qa-question { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #000000; }
.qa-answer-box { background: #fafafa; padding: 12px; border-radius: 10px; }
.qa-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.qa-brand img { width: 20px; height: 20px; border-radius: 50%; }
.qa-brand span { font-size: 12px; font-weight: 700; color: #111111; }
.qa-answer-box p { font-size: 13px; line-height: 1.4; margin: 0; color: #333333; }
</style>
<script>
(function() {
const visibleCategories = ["usage","ingredients","results","shipping","safety"];
const applyFilter = (filter, cards) => {
cards.forEach(card => {
const cardCategory = card.getAttribute('data-category');
if (filter === 'all') {
// "All" seçildiğinde sadece görünür kategorilerdeki kartları göster
if (visibleCategories.includes(cardCategory)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
} else if (cardCategory === filter) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
};
const setupQA = () => {
const root = document.getElementById('sckit-qa-container');
if (!root) return;
const tabs = root.querySelectorAll('.qa-tab');
const cards = root.querySelectorAll('.qa-card');
// İlk yüklemede "All" filtresini uygula
applyFilter('all', cards);
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const filter = tab.getAttribute('data-cat');
applyFilter(filter, cards);
});
});
};
// Shopify için güvenli yükleme
if (document.readyState === 'complete') {
setupQA();
} else {
window.addEventListener('load', setupQA);
}
document.addEventListener('shopify:section:load', setupQA);
})();
</script>Widget de Calificación Trustpilot
Muestra calificación de Trustpilot con estrellas e insignia de excelencia para generar confianza del cliente.
<style>
.container-trustpilot {
background: {{ background_gradient | default: "linear-gradient(135deg, #e9f8fe 0%, #f0f9ff 100%)" }};
border: 1px dashed {{ border_color | default: "#006400" }};
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
}
.container-trustpilot img {
margin: 0 4px;
height: auto;
flex-shrink: 0;
}
.container-trustpilot .stars {
max-width: 65px;
}
.container-trustpilot .logo {
max-width: 55px;
}
.container-trustpilot span {
margin: 0 2px;
white-space: nowrap;
flex-shrink: 0;
}
.excellent {
color: {{ text_color | default: "#000000" }};
font-size: 11px;
}
.rating-text {
color: {{ text_color | default: "#000000" }};
font-size: 9px;
}
@media
(max-width: 480px) {
.container-trustpilot {
padding: 4px 8px;
}
.container-trustpilot .stars {
max-width: 55px;
}
.container-trustpilot .logo {
max-width: 48px;
}
.excellent {
font-size: 10px;
}
.rating-text {
font-size: 8px;
}
}
</style>
<div class="container-trustpilot">
<span class="excellent"><b>{{ excellent_text | default: "'EXCELLENT'" }}</b></span>
<img class="stars" src="{{ stars_image | default: "https://cdn.shopify.com/s/files/1/0647/2148/6072/files/4.5-stars-trustpilot_2157d8d9-101e-46a2-a3fe-ac80f2fecf10.png?v=1688082792" }}" alt="Rating Stars">
<span class="rating-text">{{ rating_text | default: "rated 4.4/5 on" }}</span>
<img class="logo" src="{{ logo_image | default: "https://cdn.shopify.com/s/files/1/0647/2148/6072/files/Trustpilot_Logo__2022_.svg_2.png?v=1687091440" }}" alt="Trustpilot Logo">
</div>Barra de Anuncio con Cuenta Regresiva
Barra de anuncio premium con temporizador de cuenta regresiva para crear urgencia en ofertas por tiempo limitado.
<div class="kodu-countdown-announcement-bar">
<div class="kodu-countdown-content">
<div class="kodu-countdown-text">{{ announcement_text | default: "Welcome Offer Ends Soon" }}</div>
<div class="kodu-countdown-wrapper">
<div class="kodu-countdown-time">
<span id="kodu-countdown-hours">{{ countdown_hours | default: "09" }}</span>
<small>{{ hours_label | default: "HOURS" }}</small>
</div>
<div class="kodu-countdown-time">
<span id="kodu-countdown-minutes">{{ countdown_minutes | default: "59" }}</span>
<small>{{ minutes_label | default: "MINUTES" }}</small>
</div>
<div class="kodu-countdown-time">
<span id="kodu-countdown-seconds">{{ countdown_seconds | default: "24" }}</span>
<small>{{ seconds_label | default: "SECONDS" }}</small>
</div>
</div>
</div>
</div>
<style>
/* Countdown container scope - sadece bu container içindeki elementleri etkiler */
.kodu-countdown-announcement-bar {
width: 100% !important;
background: {{ background_color | default: "#FFE5E5" }} !important;
color: {{ text_color | default: "#8E1919" }} !important;
padding: 10px 20px !important;
font-weight: bold !important;
text-align: center !important;
box-sizing: border-box !important;
position: relative !important;
z-index: 1 !important;
font-family: inherit !important;
line-height: 1.4 !important;
margin: {{ top_margin | default: "0px" }} auto {{ bottom_margin | default: "0px" }} auto !important;
border: none !important;
}
/* Sadece countdown container'ı içindeki tüm elementleri sıfırla */
.kodu-countdown-announcement-bar *,
.kodu-countdown-announcement-bar *:before,
.kodu-countdown-announcement-bar *:after {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-content {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
max-width: 1200px !important;
margin: 0 auto !important;
flex-wrap: nowrap !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-text {
font-size: 16px !important;
line-height: normal !important;
font-weight: inherit !important;
color: inherit !important;
font-family: inherit !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-wrapper {
display: flex !important;
gap: 6px !important;
justify-content: center !important;
flex-wrap: nowrap !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-time {
background: {{ background_color | default: "#FFE5E5" }} !important;
color: {{ text_color | default: "#8E1919" }} !important;
border: 1px solid {{ border_color | default: "#8E1919" }} !important;
padding: 4px 8px !important;
border-radius: 4px !important;
text-align: center !important;
min-width: 40px !important;
font-family: inherit !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-time > span {
display: block !important;
font-size: 14px !important;
font-weight: bold !important;
line-height: 1.2 !important;
color: inherit !important;
font-family: inherit !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-time > small {
display: block !important;
font-size: 10px !important;
font-weight: normal !important;
line-height: 1.2 !important;
color: inherit !important;
font-family: inherit !important;
}
/* Mobile responsive - sadece countdown container içinde */
@media (max-width: 768px) {
.kodu-countdown-announcement-bar .kodu-countdown-text {
font-size: 13px !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-time > span {
font-size: 12px !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-time > small {
font-size: 8px !important;
}
.kodu-countdown-announcement-bar .kodu-countdown-wrapper {
gap: 4px !important;
}
.kodu-countdown-announcement-bar {
padding: 8px 10px !important;
}
}
</style>
<script>
(function() {
'use strict';
// Namespace to avoid conflicts
window.KoduCountdown = window.KoduCountdown || {};
function koduStartCountdown() {
// Get values from the HTML elements (customized values)
const hoursElement = document.getElementById('kodu-countdown-hours');
const minutesElement = document.getElementById('kodu-countdown-minutes');
const secondsElement = document.getElementById('kodu-countdown-seconds');
if (!hoursElement || !minutesElement || !secondsElement) return;
// Parse initial values from HTML
const initialHours = parseInt(hoursElement.textContent) || 0;
const initialMinutes = parseInt(minutesElement.textContent) || 0;
const initialSeconds = parseInt(secondsElement.textContent) || 0;
// Convert to total seconds
let totalSeconds = (initialHours * 3600) + (initialMinutes * 60) + initialSeconds;
let remaining = totalSeconds;
function koduUpdate() {
if (remaining < 0) {
remaining = totalSeconds; // Reset to initial values
}
const hours = Math.floor(remaining / 3600);
const minutes = Math.floor((remaining % 3600) / 60);
const seconds = remaining % 60;
hoursElement.textContent = String(hours).padStart(2, '0');
minutesElement.textContent = String(minutes).padStart(2, '0');
secondsElement.textContent = String(seconds).padStart(2, '0');
remaining--;
}
// Clear any existing interval
if (window.KoduCountdown.intervalId) {
clearInterval(window.KoduCountdown.intervalId);
}
koduUpdate();
window.KoduCountdown.intervalId = setInterval(koduUpdate, 1000);
}
// Initialize countdown
function koduInitCountdown() {
// Only initialize if elements exist
if (document.getElementById('kodu-countdown-hours')) {
koduStartCountdown();
}
}
// Start countdown when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', koduInitCountdown);
} else {
koduInitCountdown();
}
})();
</script>Slider TikTok
Testimonios en video estilo TikTok. Prueba social viral que convierte a la Gen Z.
<div class="slider-containerv8" style="
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<div class="sliderv8">
<!-- Video 1 -->
<div class="slidev8">
<div class="with-borderv8">
<video class="tiktok-videov8" muted loop preload="auto" poster="">
<source src="{{ video_1_url | default: "https://cdn.shopify.com/videos/c/o/v/49f49e5ff92f404b89bdedd6fc371077.mp4" }}" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div class="play-buttonv8">▷</div>
</div>
<!-- Video 2 -->
<div class="slidev8">
<div class="with-borderv8">
<video class="tiktok-videov8" muted loop preload="auto" poster="">
<source src="{{ video_2_url | default: "https://cdn.shopify.com/videos/c/o/v/d4dfdd955f2840b1b63b223ecc77cafd.mp4" }}" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div class="play-buttonv8">▷</div>
</div>
<!-- Video 3 -->
<div class="slidev8">
<div class="with-borderv8">
<video class="tiktok-videov8" muted loop preload="auto" poster="">
<source src="{{ video_3_url | default: "https://cdn.shopify.com/videos/c/o/v/171162a47d1b44f1a042656ad7f85d02.mp4" }}" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div class="play-buttonv8">▷</div>
</div>
<!-- Video 4 -->
<div class="slidev8">
<div class="with-borderv8">
<video class="tiktok-videov8" muted loop preload="metadata">
<source src="{{ video_4_url | default: "https://cdn.shopify.com/videos/c/o/v/d4dfdd955f2840b1b63b223ecc77cafd.mp4" }}" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div class="play-buttonv8">▷</div>
</div>
<!-- Video 5 -->
<div class="slidev8">
<div class="with-borderv8">
<video class="tiktok-videov8" muted loop preload="auto" poster="">
<source src="{{ video_5_url | default: "https://cdn.shopify.com/videos/c/o/v/d4dfdd955f2840b1b63b223ecc77cafd.mp4" }}" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div class="play-buttonv8">▷</div>
</div>
</div>
{% style %}
.slider-containerv8 {
position: relative;
width: 100%;
overflow-x: scroll;
display: flex;
align-items: center;
scroll-snap-type: x mandatory;
max-width: {{ container_max_width | default: "1200px" }};
margin-left: auto;
margin-right: auto;
padding: {{ container_padding | default: "0px 10px" }};
}
.sliderv8 {
display: flex;
gap: {{ slide_gap | default: "10px" }};
scroll-snap-type: x mandatory;
}
.slidev8 {
flex: 0 0 60%;
max-width: {{ mobile_slide_width | default: "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: {{ desktop_slide_width | default: "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: {{ video_border_radius | default: "10px" }};
display: block;
object-fit: cover;
background-color: #000;
}
.play-buttonv8 {
position: absolute;
width: {{ control_button_size | default: "50px" }};
height: {{ control_button_size | default: "50px" }};
background: {{ control_button_bg | default: "rgba(0, 0, 0, 0.6)" }};
color: {{ control_button_color | default: "white" }};
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: {{ control_button_font_size | default: "20px" }};
cursor: pointer;
z-index: 10;
margin-left: 2px;
transition: opacity 0.3s ease;
}
.play-buttonv8:hover {
background: {{ control_button_hover_bg | default: 'rgba(0, 0, 0, 0.8)' }};
}
.slider-containerv8::-webkit-scrollbar {
height: {{ scrollbar_height | default: "10px" }};
}
.slider-containerv8::-webkit-scrollbar-thumb {
background: {{ scrollbar_thumb_color | default: "#aaa" }};
border-radius: {{ scrollbar_border_radius | default: "10px" }};
}
.slider-containerv8::-webkit-scrollbar-track {
background: {{ scrollbar_track_color | default: "#ddd" }};
}
.with-borderv8 {
padding: {{ border_padding | default: "4px" }};
border-radius: {{ border_radius | default: "10px" }};
background: {{ border_gradient | default: "linear-gradient(0deg, #fe2d52, #28ffff)" }};
}
{% endstyle %}
<script>
document.addEventListener("DOMContentLoaded", () => {
const slides = document.querySelectorAll(".slidev8");
slides.forEach((slide) => {
const playButton = slide.querySelector(".play-buttonv8");
const video = slide.querySelector("video");
// Video'yu load et ve ilk frame'i göster
video.load();
video.currentTime = 0.1; // İlk frame'i göstermek için
const togglePlayPause = () => {
if (video.paused) {
// Diğer videoları durdur
document.querySelectorAll(".tiktok-videov8").forEach((v) => {
if (v !== video) {
v.pause();
v.parentElement.parentElement.querySelector(".play-buttonv8").style.display = "flex";
}
});
// Bu videoyu başlat
video.muted = false;
video.play().catch((err) => console.error("Video playback failed:", err));
playButton.style.display = "none";
} else {
// Bu videoyu durdur
video.pause();
playButton.style.display = "flex";
}
};
// Sadece play button'a tıklama
playButton.addEventListener("click", togglePlayPause);
// Video tıklaması da toggle yapsın
video.addEventListener("click", togglePlayPause);
// Video durduğunda play button'u göster
video.addEventListener("pause", () => {
playButton.style.display = "flex";
});
// Video başladığında play button'u gizle
video.addEventListener("play", () => {
playButton.style.display = "none";
});
// Video yüklendiğinde ilk frame'i göster
video.addEventListener("loadeddata", () => {
if (video.currentTime === 0) {
video.currentTime = 0.1;
}
});
});
});
</script>
</div>Carrusel de Reseñas Desplazable
Carrusel animado con reseñas de desplazamiento bidireccional. Crea movimiento continuo para prueba social atractiva.
<h1 class="unique-title-Yp8T4">{{ title_prefix | default: "Our customers" }} <span>{{ title_highlight | default: "love" }}</span> {{ title_suffix | default: "the product" }}</h1>
<div class="unique-container-Xr4D2a">
<!-- Row 1 -->
<div class="unique-slider-wrapper-Rc9G7h">
<div class="unique-slider-Rc9G7h">
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_1_image | default: "https://randomuser.me/api/portraits/women/1.jpg" }}" alt="{{ review_1_alt | default: 'User Image' }}">
<p>{{ review_1_text | default: "The perfect fall slippers!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_2_image | default: "https://randomuser.me/api/portraits/men/1.jpg" }}" alt="{{ review_2_alt | default: 'User Image' }}">
<p>{{ review_2_text | default: "My new favorite pair of shoes!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_3_image | default: "https://randomuser.me/api/portraits/women/2.jpg" }}" alt="{{ review_3_alt | default: 'User Image' }}">
<p>{{ review_3_text | default: "A MUST buy for fall!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_4_image | default: "https://randomuser.me/api/portraits/men/2.jpg" }}" alt="{{ review_4_alt | default: 'User Image' }}">
<p>{{ review_4_text | default: "10/10 Worth every penny" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_5_image | default: "https://randomuser.me/api/portraits/women/3.jpg" }}" alt="{{ review_5_alt | default: 'User Image' }}">
<p>{{ review_5_text | default: "I absolutely am in love with the slippers! I wear them everywhere!" }}</p>
</div>
<!-- Duplicate for seamless loop -->
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_1_image | default: "https://randomuser.me/api/portraits/women/1.jpg" }}" alt="{{ review_1_alt | default: 'User Image' }}">
<p>{{ review_1_text | default: "The perfect fall slippers!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_2_image | default: "https://randomuser.me/api/portraits/men/1.jpg" }}" alt="{{ review_2_alt | default: 'User Image' }}">
<p>{{ review_2_text | default: "My new favorite pair of shoes!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_3_image | default: "https://randomuser.me/api/portraits/women/2.jpg" }}" alt="{{ review_3_alt | default: 'User Image' }}">
<p>{{ review_3_text | default: "A MUST buy for fall!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_4_image | default: "https://randomuser.me/api/portraits/men/2.jpg" }}" alt="{{ review_4_alt | default: 'User Image' }}">
<p>{{ review_4_text | default: "10/10 Worth every penny" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_5_image | default: "https://randomuser.me/api/portraits/women/3.jpg" }}" alt="{{ review_5_alt | default: 'User Image' }}">
<p>{{ review_5_text | default: "I absolutely am in love with the slippers! I wear them everywhere!" }}</p>
</div>
</div>
</div>
<!-- Row 2 (Reverse direction) -->
<div class="unique-slider-wrapper-Rc9G7h unique-reverse">
<div class="unique-slider-Rc9G7h">
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_6_image | default: "https://randomuser.me/api/portraits/men/3.jpg" }}" alt="{{ review_6_alt | default: 'User Image' }}">
<p>{{ review_6_text | default: "Comfy. Cannot think of a better autumn shoe!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_7_image | default: "https://randomuser.me/api/portraits/women/4.jpg" }}" alt="{{ review_7_alt | default: 'User Image' }}">
<p>{{ review_7_text | default: "OMG! Best autumn shoe!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_8_image | default: "https://randomuser.me/api/portraits/men/4.jpg" }}" alt="{{ review_8_alt | default: 'User Image' }}">
<p>{{ review_8_text | default: "Perfect for chilly days!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_9_image | default: "https://randomuser.me/api/portraits/women/5.jpg" }}" alt="{{ review_9_alt | default: 'User Image' }}">
<p>{{ review_9_text | default: "Amazing quality and comfort!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_10_image | default: "https://randomuser.me/api/portraits/men/5.jpg" }}" alt="{{ review_10_alt | default: 'User Image' }}">
<p>{{ review_10_text | default: "Stylish and super comfy!" }}</p>
</div>
<!-- Duplicate for seamless loop -->
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_6_image | default: "https://randomuser.me/api/portraits/men/3.jpg" }}" alt="{{ review_6_alt | default: 'User Image' }}">
<p>{{ review_6_text | default: "Comfy. Cannot think of a better autumn shoe!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_7_image | default: "https://randomuser.me/api/portraits/women/4.jpg" }}" alt="{{ review_7_alt | default: 'User Image' }}">
<p>{{ review_7_text | default: "OMG! Best autumn shoe!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_8_image | default: "https://randomuser.me/api/portraits/men/4.jpg" }}" alt="{{ review_8_alt | default: 'User Image' }}">
<p>{{ review_8_text | default: "Perfect for chilly days!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_9_image | default: "https://randomuser.me/api/portraits/women/5.jpg" }}" alt="{{ review_9_alt | default: 'User Image' }}">
<p>{{ review_9_text | default: "Amazing quality and comfort!" }}</p>
</div>
<div class="unique-card-Lj6Z8k">
<img class="unique-image-Ys3Kv9" src="{{ review_10_image | default: "https://randomuser.me/api/portraits/men/5.jpg" }}" alt="{{ review_10_alt | default: 'User Image' }}">
<p>{{ review_10_text | default: "Stylish and super comfy!" }}</p>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
.unique-title-Yp8T4 {
font-size: {{ title_font_size | default: '18px' }};
font-weight: {{ title_font_weight | default: 'bold' }};
color: {{ title_color | default: "#0d0d0d" }};
margin-bottom: {{ title_margin_bottom | default: '15px' }};
text-align: {{ title_alignment | default: 'center' }};
}
.unique-title-Yp8T4 span {
font-family: {{ highlight_font_family | default: 'Dancing Script, cursive' }};
font-size: {{ highlight_font_size | default: '36px' }};
background: {{ highlight_gradient | default: "linear-gradient(90deg, #32CD32, #006400)" }};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: {{ highlight_font_weight | default: 'bold' }};
}
.unique-container-Xr4D2a {
width: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
gap: {{ rows_gap | default: '20px' }};
padding: {{ container_padding | default: '0' }};
}
.unique-slider-wrapper-Rc9G7h {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
}
.unique-slider-Rc9G7h {
display: flex;
gap: {{ cards_gap | default: '20px' }};
animation: scrollAnimation-8Tm5Yp {{ animation_duration | default: "30s" }} linear infinite;
flex-shrink: 0;
}
.unique-slider-wrapper-Rc9G7h.unique-reverse .unique-slider-Rc9G7h {
animation: scrollAnimationReverse-8Tm5Yp {{ animation_duration | default: "30s" }} linear infinite;
}
.unique-card-Lj6Z8k {
background-color: {{ card_bg_color | default: "#fff" }};
border-radius: {{ card_border_radius | default: "25px" }};
box-shadow: {{ card_shadow | default: '0px 4px 10px rgba(0, 0, 0, 0.1)' }};
padding: {{ card_padding | default: '15px 20px' }};
display: flex;
align-items: center;
margin: {{ card_margin | default: '10px 0' }};
white-space: nowrap;
min-width: max-content;
box-sizing: border-box;
font-size: {{ card_font_size | default: '14px' }};
color: {{ card_text_color | default: "#333" }};
flex-shrink: 0;
}
.unique-image-Ys3Kv9 {
width: {{ image_size | default: "40px" }};
height: {{ image_size | default: "40px" }};
border-radius: 50%;
margin-right: {{ image_margin_right | default: '15px' }};
box-shadow: {{ image_shadow | default: '0 0 0 2px #fff, 0 0 0 4px #f4b400' }};
object-fit: cover;
}
@keyframes scrollAnimation-8Tm5Yp {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes scrollAnimationReverse-8Tm5Yp {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
@media (max-width: 768px) {
.unique-slider-Rc9G7h {
animation: scrollAnimation-8Tm5Yp {{ mobile_animation_duration | default: "15s" }} linear infinite;
}
.unique-slider-wrapper-Rc9G7h.unique-reverse .unique-slider-Rc9G7h {
animation: scrollAnimationReverse-8Tm5Yp {{ mobile_animation_duration | default: "15s" }} linear infinite;
}
.unique-title-Yp8T4 {
font-size: {{ mobile_title_font_size | default: '16px' }};
}
.unique-title-Yp8T4 span {
font-size: {{ mobile_highlight_font_size | default: '28px' }};
}
}
</style>Mensaje Giratorio 2
Mensajes rotativos de prueba social que muestran estadísticas de actividad del cliente para crear urgencia.
<section class="rspin_8kv7" style="--font-size: {{ font_size | default: "13px" }}; --interval-ms: {{ animation_speed | default: "2500" }}; margin-top: {{ top_margin | default: "0px" }}; margin-bottom: {{ bottom_margin | default: "0px" }};">
<style>
.rspin_8kv7 {
font-size: var(--font-size);
color: {{ text_color | default: "#333333" }};
}
.rspin_8kv7 .rspin_8kv7-viewport {
position: relative;
overflow: hidden;
height: 18px;
}
.rspin_8kv7 .rspin_8kv7-line {
display: grid;
grid-auto-rows: auto;
transition: transform 0.5s ease-in-out;
will-change: transform;
}
.rspin_8kv7 .rspin_8kv7-item {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.rspin_8kv7 .rspin_8kv7-strong {
font-weight: 600;
color: {{ highlight_color | default: "#000000" }};
}
</style>
<div class="rspin_8kv7-viewport" id="rspin_8kv7_view">
<div class="rspin_8kv7-line" id="rspin_8kv7_line">
<div class="rspin_8kv7-item">{{ message_1_start | default: "🚀 Hurry up!" }} <span class="rspin_8kv7-strong">{{ message_1_highlight | default: "500+ items" }}</span> {{ message_1_end | default: "sold in the last 3 days!" }}</div>
<div class="rspin_8kv7-item">{{ message_2_start | default: "🛒 In the carts of" }} <span class="rspin_8kv7-strong">{{ message_2_highlight | default: "2.5K people" }}</span> {{ message_2_end | default: "— buy before its gone!" }}</div>
<div class="rspin_8kv7-item">{{ message_3_start | default: "👀 Trending now!" }} <span class="rspin_8kv7-strong">{{ message_3_highlight | default: "7,562 people" }}</span> {{ message_3_end | default: "viewed in the last 24 hours!" }}</div>
</div>
</div>
<script>
(function(){
var view = document.getElementById('rspin_8kv7_view');
var line = document.getElementById('rspin_8kv7_line');
if(!view || !line) return;
var items = line.children;
if(!items.length) return;
var root = view.closest('.rspin_8kv7') || document.documentElement;
function cssVarInt(el, name, fallback){
var v = getComputedStyle(el).getPropertyValue(name).trim();
var n = parseInt(v, 10);
return isNaN(n) ? fallback : n;
}
var idx = 0;
var intervalMs = cssVarInt(root, '--interval-ms', 2500);
var rowH = items[0].offsetHeight || 18;
function setHeight(){
rowH = items[0].offsetHeight || rowH;
view.style.height = rowH + 'px';
line.style.transform = 'translateY(' + (-idx * rowH) + 'px)';
}
setHeight();
window.addEventListener('load', setHeight);
var resizeTO;
window.addEventListener('resize', function(){
clearTimeout(resizeTO);
resizeTO = setTimeout(setHeight, 200);
});
setInterval(function(){
idx = (idx + 1) % items.length;
line.style.transform = 'translateY(' + (-idx * rowH) + 'px)';
}, intervalMs);
})();
</script>
</section>Reseñas de Clientes
Muestra testimonios reales de clientes. Prueba social que genera credibilidad instantánea.
<div style="
background: {{ background_color | default: "#f9f9f9" }};
padding: 40px 0;
">
<div style="text-align: center; margin-bottom: 20px;">
<div style="
display: inline-block;
padding: 4px 12px;
background: {{ rating_badge_bg | default: "#ffe6ef" }};
color: {{ rating_badge_text_color | default: "#000" }};
border-radius: 9999px;
font-size: 13px;
">
{{ rating_badge_icon | default: "★" }} <strong>{{ rating_text | default: "Rated 4.8/5" }}</strong> {{ rating_subtext | default: "based on +137,135 reviews" }}
</div>
<h2 style="
font-size: {{ heading_font_size | default: "28px" }};
font-weight: {{ heading_font_weight | default: "700" }};
margin-top: 10px;
color: {{ heading_color | default: "#333" }};
">
<span style="color: {{ heading_highlight_color | default: "#e91e63" }};">{{ heading_highlight_text | default: "Customer" }}</span> {{ heading_text | default: "Reviews" }}
</h2>
</div>
<div id="reviews-container" style="
display: flex;
gap: 20px;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 20px 10px 20px;
">
<!-- Review 1 -->
<div class="review-card" style="
display: flex;
flex-direction: column;
height: 100%;
background: {{ review_bg | default: "#fff" }};
border-radius: {{ review_border_radius | default: "12px" }};
border: {{ review_border_width | default: "1px" }} {{ review_border_style | default: "solid" }} {{ review_border_color | default: "#eee" }};
padding: 16px;
min-width: 280px;
max-width: 320px;
flex-shrink: 0;
">
<img src="{{ review_1_image | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Screenshot_2025-05-07_at_15.58.00.png?v=1746622733" }}" style="
width: 100%;
border-radius: {{ image_border_radius | default: "8px" }};
" alt="Review Photo">
<div style="margin-top: 12px; color: {{ stars_color | default: "#e91e63" }}; font-size: {{ stars_font_size | default: "14px" }};">★★★★★</div>
<div style="margin-top: 6px; font-size: 13px;">
<span style="
background: {{ reviewer_badge_bg | default: "#ffe6ef" }};
padding: 3px 8px;
border-radius: 9999px;
">{{ review_1_name | default: "Ashley, 30" }} {{ verified_badge | default: "💎 Verified Buyer" }}</span>
</div>
<p style="
font-size: {{ review_text_font_size | default: "14px" }};
color: {{ review_text_color | default: "#333" }};
margin-top: 10px;
line-height: 1.5;
flex-grow: 1;
">
{{ review_1_text | default: "I was skeptical at first, but this product completely transformed my routine with zero pain or irritation..." }}
</p>
<div style="
display: flex;
align-items: center;
background: {{ product_box_bg | default: "#f8f8f8" }};
padding: 10px;
border-radius: 8px;
margin-top: 16px;
">
<img src="{{ product_image | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Screenshot_2025-05-07_at_15.57.34.png?v=1746622735" }}" style="
width: 60px;
height: 60px;
object-fit: contain;
margin-right: 10px;
border-radius: 8px;
" alt="Product">
<div>
<div style="font-weight: 600; font-size: 14px;">{{ product_name | default: "Super Product" }}</div>
<div style="font-size: 14px; color: {{ price_color | default: "#e91e63" }};">{{ product_price | default: "$39" }} <span style="text-decoration: line-through; color: #999;">{{ product_original_price | default: "$49" }}</span></div>
<div style="font-size: 12px; color: #666;">{{ purchase_text | default: "📦 Purchased on March" }}</div>
</div>
</div>
</div>
<!-- Review 2 -->
<div class="review-card" style="
display: flex;
flex-direction: column;
height: 100%;
background: {{ review_bg | default: "#fff" }};
border-radius: {{ review_border_radius | default: "12px" }};
border: {{ review_border_width | default: "1px" }} {{ review_border_style | default: "solid" }} {{ review_border_color | default: "#eee" }};
padding: 16px;
min-width: 280px;
max-width: 320px;
flex-shrink: 0;
">
<img src="{{ review_2_image | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Screenshot_2025-05-07_at_15.58.00.png?v=1746622733" }}" style="
width: 100%;
border-radius: {{ image_border_radius | default: "8px" }};
" alt="Review Photo">
<div style="margin-top: 12px; color: {{ stars_color | default: "#e91e63" }}; font-size: {{ stars_font_size | default: "14px" }};">★★★★★</div>
<div style="margin-top: 6px; font-size: 13px;">
<span style="
background: {{ reviewer_badge_bg | default: "#ffe6ef" }};
padding: 3px 8px;
border-radius: 9999px;
">{{ review_2_name | default: "Julia, 27" }} {{ verified_badge | default: "💎 Verified Buyer" }}</span>
</div>
<p style="
font-size: {{ review_text_font_size | default: "14px" }};
color: {{ review_text_color | default: "#333" }};
margin-top: 10px;
line-height: 1.5;
flex-grow: 1;
">
{{ review_2_text | default: "Honestly better than I expected. I used to use razors but this leaves no bumps or redness. I have already told 3 of my friends to get one." }}
</p>
<div style="
display: flex;
align-items: center;
background: {{ product_box_bg | default: "#f8f8f8" }};
padding: 10px;
border-radius: 8px;
margin-top: 16px;
">
<img src="{{ product_image | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Screenshot_2025-05-07_at_15.57.34.png?v=1746622735" }}" style="
width: 60px;
height: 60px;
object-fit: contain;
margin-right: 10px;
border-radius: 8px;
" alt="Product">
<div>
<div style="font-weight: 600; font-size: 14px;">{{ product_name | default: "Super Product" }}</div>
<div style="font-size: 14px; color: {{ price_color | default: "#e91e63" }};">{{ product_price | default: "$39" }} <span style="text-decoration: line-through; color: #999;">{{ product_original_price | default: "$49" }}</span></div>
<div style="font-size: 12px; color: #666;">{{ purchase_text | default: "📦 Purchased on March" }}</div>
</div>
</div>
</div>
<!-- Review 3 -->
<div class="review-card" style="
display: flex;
flex-direction: column;
height: 100%;
background: {{ review_bg | default: "#fff" }};
border-radius: {{ review_border_radius | default: "12px" }};
border: {{ review_border_width | default: "1px" }} {{ review_border_style | default: "solid" }} {{ review_border_color | default: "#eee" }};
padding: 16px;
min-width: 280px;
max-width: 320px;
flex-shrink: 0;
">
<img src="{{ review_3_image | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Screenshot_2025-05-07_at_15.58.00.png?v=1746622733" }}" style="
width: 100%;
border-radius: {{ image_border_radius | default: "8px" }};
" alt="Review Photo">
<div style="margin-top: 12px; color: {{ stars_color | default: "#e91e63" }}; font-size: {{ stars_font_size | default: "14px" }};">★★★★★</div>
<div style="margin-top: 6px; font-size: 13px;">
<span style="
background: {{ reviewer_badge_bg | default: "#ffe6ef" }};
padding: 3px 8px;
border-radius: 9999px;
">{{ review_3_name | default: "Taylor, 33" }} {{ verified_badge | default: "💎 Verified Buyer" }}</span>
</div>
<p style="
font-size: {{ review_text_font_size | default: "14px" }};
color: {{ review_text_color | default: "#333" }};
margin-top: 10px;
line-height: 1.5;
flex-grow: 1;
">
{{ review_3_text | default: "Surprised by how effective this little thing is. It is compact, clean, and works fast. Zero irritation, which is rare for my skin." }}
</p>
<div style="
display: flex;
align-items: center;
background: {{ product_box_bg | default: "#f8f8f8" }};
padding: 10px;
border-radius: 8px;
margin-top: 16px;
">
<img src="{{ product_image | default: "https://cdn.shopify.com/s/files/1/0764/8598/4492/files/Screenshot_2025-05-07_at_15.57.34.png?v=1746622735" }}" style="
width: 60px;
height: 60px;
object-fit: contain;
margin-right: 10px;
border-radius: 8px;
" alt="Product">
<div>
<div style="font-weight: 600; font-size: 14px;">{{ product_name | default: "Super Product" }}</div>
<div style="font-size: 14px; color: {{ price_color | default: "#e91e63" }};">{{ product_price | default: "$39" }} <span style="text-decoration: line-through; color: #999;">{{ product_original_price | default: "$49" }}</span></div>
<div style="font-size: 12px; color: #666;">{{ purchase_text | default: "📦 Purchased on March" }}</div>
</div>
</div>
</div>
</div>
<!-- Scroll Indicators (Mobile Only) -->
<div class="scroll-indicators" style="
display: none;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 0 20px;
">
<div class="indicator-dot" data-index="0" style="
width: 8px;
height: 8px;
border-radius: 50%;
background: {{ indicator_active_color | default: "#e91e63" }};
transition: background 0.3s ease;
"></div>
<div class="indicator-dot" data-index="1" style="
width: 8px;
height: 8px;
border-radius: 50%;
background: {{ indicator_inactive_color | default: "#ddd" }};
transition: background 0.3s ease;
"></div>
<div class="indicator-dot" data-index="2" style="
width: 8px;
height: 8px;
border-radius: 50%;
background: {{ indicator_inactive_color | default: "#ddd" }};
transition: background 0.3s ease;
"></div>
</div>
<script>
(function() {
var container = document.getElementById('reviews-container');
if (!container) return;
var activeColor = '{{ indicator_active_color | default: "#e91e63" }}';
var inactiveColor = '{{ indicator_inactive_color | default: "#ddd" }}';
function updateIndicators() {
var scrollLeft = container.scrollLeft;
var cardWidth = container.querySelector('.review-card').offsetWidth;
var gap = 20;
var currentIndex = Math.round(scrollLeft / (cardWidth + gap));
var dots = document.querySelectorAll('.indicator-dot');
dots.forEach(function(dot, index) {
dot.style.background = index === currentIndex ? activeColor : inactiveColor;
});
}
container.addEventListener('scroll', updateIndicators);
updateIndicators();
})();
</script>
<style>
div[style*="overflow-x: auto"] {
scrollbar-width: none;
-ms-overflow-style: none;
}
div[style*="overflow-x: auto"]::-webkit-scrollbar {
display: none;
}
@media (min-width: 769px) {
#reviews-container {
justify-content: center !important;
}
}
@media (max-width: 768px) {
.review-card {
min-width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
}
.scroll-indicators {
display: flex !important;
}
}
</style>
</div>Caja de Regalo
Muestra regalos gratis para aumentar el valor del pedido. Perfecto para incentivos a nuevos compradores.
<div class="exclusive-sale-container" style="
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<div class="exclusive-sale-title">
{{ exclusive_sale_title | default: "FREE GIFTS WITH YOUR FIRST ORDER" }}
</div>
<div class="exclusive-sale-gift-list">
<!-- Product 1 -->
<div class="gift-box">
<div class="gift-badge">
{{ gift_1_badge_text | default: "FREE" }} <span>{{ gift_1_price | default: "$10" }}</span>
</div>
<img src="{{ gift_1_image | default: "https://cdn.shopify.com/s/files/1/0591/6521/2734/files/input_kopyasi_32.png?v=1742817671" }}" alt="{{ gift_1_label | default: "The Hand Book" }}">
<div class="gift-label">{{ gift_1_label | default: "The Hand Book" }}</div>
</div>
<!-- Product 2 -->
<div class="gift-box">
<div class="gift-badge">
{{ gift_2_badge_text | default: "FREE" }} <span>{{ gift_2_price | default: "$6" }}</span>
</div>
<img src="{{ gift_2_image | default: "https://cdn.shopify.com/s/files/1/0591/6521/2734/files/input_kopyasi_31.png?v=1742817524" }}" alt="{{ gift_2_label | default: "Free Shipping" }}">
<div class="gift-label">{{ gift_2_label | default: "Free Shipping" }}</div>
</div>
<!-- Product 3 -->
<div class="gift-box">
<div class="gift-badge">
{{ gift_3_badge_text | default: "FREE" }} <span>{{ gift_3_price | default: "$19" }}</span>
</div>
<img src="{{ gift_3_image | default: "https://cdn.shopify.com/s/files/1/0591/6521/2734/files/input_kopyasi_33.png?v=1742817767" }}" alt="{{ gift_3_label | default: "Lash Curler" }}">
<div class="gift-label">{{ gift_3_label | default: "Lash Curler" }}</div>
</div>
</div>
{% style %}
.exclusive-sale-container {
background: {{ background_color | default: "#fcfcfc" }};
padding: {{ container_padding | default: "20px 10px" }};
text-align: center;
}
.exclusive-sale-title {
font-size: {{ title_font_size | default: "14px" }};
font-weight: {{ title_font_weight | default: "700" }};
text-transform: uppercase;
letter-spacing: 0.5px;
color: {{ title_color | default: "#333" }};
margin-bottom: 20px;
}
.exclusive-sale-gift-list {
display: grid;
grid-template-columns: repeat(3, 1fr); /* her zaman 3 sütun */
gap: {{ gift_gap | default: "8px" }};
max-width: 800px;
margin: 0 auto;
}
.gift-box {
position: relative;
background: {{ gift_box_bg | default: "#fce1ec" }};
border: {{ gift_box_border | default: "2px dashed #000" }};
border-radius: {{ gift_box_radius | default: "6px" }};
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.gift-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: {{ badge_bg | default: "#ff5c8d" }};
color: {{ badge_text_color | default: "white" }};
font-size: 10px;
font-weight: 700;
padding: 3px 12px;
border-radius: 4px;
width: 80px;
box-sizing: border-box;
text-transform: uppercase;
}
.gift-badge span {
text-decoration: line-through;
}
.gift-box img {
width: 65px;
height: 65px;
object-fit: contain;
margin: 14px 0 5px;
}
.gift-label {
font-size: {{ label_font_size | default: "10px" }};
font-weight: {{ label_font_weight | default: "700" }};
color: {{ label_color | default: "#333" }};
text-transform: uppercase;
margin-top: 4px;
}
{% endstyle %}
</div>Cómo Usar
Instrucciones de uso paso a paso. Reduce la confusión del producto y las tasas de devolución.
<div style="background: {{ background | default: "#fafafa" }}; padding: 60px 0px; font-family: 'Arial Black', Gadget, sans-serif; overflow: hidden;">
<div style="max-width: 1200px; margin: 0 auto;">
<h2 style="font-size: {{ heading_font_size | default: "48px" }}; font-weight: 900; margin-bottom: 40px; color: {{ heading_color | default: "#9c7454" }}; text-transform: uppercase; letter-spacing: -1px; text-align: center; padding: 0 20px;">
{{ heading_text | default: "How to Use" }}
</h2>
<div class="scroll-wrapper" style="position: relative;">
<div id="StepScrollContainer" style="display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 30px 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;">
<style>
#StepScrollContainer::-webkit-scrollbar { display: none !important; }
/* Masaüstü: Kartları ortalar */
@media (min-width: 769px) {
#StepScrollContainer { justify-content: center; overflow: hidden; padding: 0 20px; }
.step-card { flex: 0 1 350px !important; }
.swipe-hint { display: none !important; }
}
/* Mobil: Kart genişliği %85, akıcı kaydırma */
@media (max-width: 768px) {
.step-card { flex: 0 0 85% !important; scroll-snap-align: center; }
}
/* Beyaz Swipe Animasyonu */
.swipe-hint {
text-align: center;
color: {{ swipe_hint_color | default: "#9c7454" }};
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: -10px;
opacity: 0.8;
font-weight: bold;
animation: bounceLeftRight 2s infinite;
}
@keyframes bounceLeftRight {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(10px); }
}
</style>
<div class="step-card">
<div style="background: {{ step_bg | default: "#FDF1E1" }}; border: {{ step_border_width | default: "5px" }} {{ step_border_style | default: "dashed" }} {{ step_border_color | default: "#B88E6B" }}; border-radius: 15px; padding: 15px; height: 100%; box-sizing: border-box;">
<div style="border-radius: 12px; overflow: hidden; height: 350px;">
<img src="{{ step_1_image | default: "https://cdn.shopify.com/s/files/1/0984/0548/2788/files/Gemini_Generated_Image_kn8gmjkn8gmjkn8g.png?v=1768306884" }}" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div style="padding: 25px 10px; text-align: center;">
<h3 style="font-size: {{ step_1_title_size | default: "28px" }}; font-weight: 900; color: {{ step_title_color | default: "#B88E6B" }}; margin-bottom: 12px; text-transform: uppercase;">{{ step_1_title | default: "Place the Pillow" }}</h3>
<p style="font-size: {{ step_1_text_size | default: "15px" }}; color: {{ step_text_color | default: "#B88E6B" }}; line-height: 1.4; font-weight: 700; font-family: sans-serif;">{{ step_1_text | default: "Place the pillow on your bed. Its unique shape supports your neck and head naturally." }}</p>
</div>
</div>
</div>
<div class="step-card">
<div style="background: {{ step_bg | default: "#FDF1E1" }}; border: {{ step_border_width | default: "5px" }} {{ step_border_style | default: "dashed" }} {{ step_border_color | default: "#B88E6B" }}; border-radius: 15px; padding: 15px; height: 100%; box-sizing: border-box;">
<div style="border-radius: 12px; overflow: hidden; height: 350px;">
<img src="{{ step_2_image | default: "https://cdn.shopify.com/s/files/1/0984/0548/2788/files/Gemini_Generated_Image_gn4kihgn4kihgn4k.png?v=1768306800" }}" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div style="padding: 25px 10px; text-align: center;">
<h3 style="font-size: {{ step_2_title_size | default: "28px" }}; font-weight: 900; color: {{ step_title_color | default: "#B88E6B" }}; margin-bottom: 12px; text-transform: uppercase;">{{ step_2_title | default: "Feel the Foam" }}</h3>
<p style="font-size: {{ step_2_text_size | default: "15px" }}; color: {{ step_text_color | default: "#B88E6B" }}; line-height: 1.4; font-weight: 700; font-family: sans-serif;">{{ step_2_text | default: "Gently press down and feel the foam adjust to your hand." }}</p>
</div>
</div>
</div>
<div class="step-card">
<div style="background: {{ step_bg | default: "#FDF1E1" }}; border: {{ step_border_width | default: "5px" }} {{ step_border_style | default: "dashed" }} {{ step_border_color | default: "#B88E6B" }}; border-radius: 15px; padding: 15px; height: 100%; box-sizing: border-box;">
<div style="border-radius: 12px; overflow: hidden; height: 350px;">
<img src="{{ step_3_image | default: "https://cdn.shopify.com/s/files/1/0984/0548/2788/files/Gemini_Generated_Image_ix5648ix5648ix56.png?v=1768306760" }}" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div style="padding: 25px 10px; text-align: center;">
<h3 style="font-size: {{ step_3_title_size | default: "28px" }}; font-weight: 900; color: {{ step_title_color | default: "#B88E6B" }}; margin-bottom: 12px; text-transform: uppercase;">{{ step_3_title | default: "Enjoy Sleep" }}</h3>
<p style="font-size: {{ step_3_text_size | default: "15px" }}; color: {{ step_text_color | default: "#B88E6B" }}; line-height: 1.4; font-weight: 700; font-family: sans-serif;">{{ step_3_text | default: "Wake up refreshed, aligned, and pain-free." }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="swipe-hint">
<span>{{ swipe_text | default: "Swipe to see more →" }}</span>
</div>
</div>
</div>Tabla Comparativa
Compara variaciones de productos lado a lado. Ayuda a los clientes a elegir y aumenta el valor del pedido.
<div style="background: transparent; padding: 40px 20px; color: #333;">
<h2 style="text-align: center; margin-bottom: 30px;">
<span style="font-size: 18px; color: #333;">{{ heading_prefix | default: "Why Do Our Customers" }}</span>
<span style="font-family: Pacifico, cursive; background: linear-gradient(135deg, {{ gradient_color_1 | default: "#24A06F" }}, {{ gradient_color_2 | default: "#1B774F" }}); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 24px;">{{ heading_highlight | default: "Choose Us" }}</span>
<span style="color: {{ accent_color | default: "#24A06F" }}; font-size: 24px;">{{ heading_suffix | default: "?" }}</span>
</h2>
<table style="width: 100%; max-width: 800px; margin: 0 auto; border-spacing: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); background: #fff;">
<thead style="background: linear-gradient(135deg, {{ gradient_color_1 | default: "#24A06F" }}, {{ gradient_color_2 | default: "#1B774F" }}); color: #fff; text-transform: uppercase;">
<tr>
<th style="padding: 16px; font-size: 14px; letter-spacing: 1px; text-align: left;">{{ features_column_title | default: "Features" }}</th>
<th style="padding: 16px; font-size: 14px; text-align: center;">{{ column_1_title | default: "Morning Recovery" }}</th>
<th style="padding: 16px; font-size: 14px; text-align: center;">{{ column_2_title | default: "Hydration Powder" }}</th>
</tr>
</thead>
<tbody>
<tr style="background: #ffffff;">
<td style="padding: 14px; text-align: left; border-bottom: 1px solid #ddd; font-size: 15px;">{{ feature_1 | default: "Clinically Proven**" }}</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ check_color | default: "#34a853" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ x_color | default: "#ea4335" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.364 5.636a1 1 0 0 1 0 1.414L13.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 0 1-1.414-1.414L10.586 12l-4.95-4.95a1 1 0 0 1 1.414-1.414L12 10.586l4.95-4.95a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
</tr>
<tr style="background: #f7f7f7;">
<td style="padding: 14px; text-align: left; border-bottom: 1px solid #ddd; font-size: 15px;">{{ feature_2 | default: "Electrolytes" }}</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ check_color | default: "#34a853" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ x_color | default: "#ea4335" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.364 5.636a1 1 0 0 1 0 1.414L13.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 0 1-1.414-1.414L10.586 12l-4.95-4.95a1 1 0 0 1 1.414-1.414L12 10.586l4.95-4.95a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
</tr>
<tr style="background: #ffffff;">
<td style="padding: 14px; text-align: left; border-bottom: 1px solid #ddd; font-size: 15px;">{{ feature_3 | default: "No Artificial Colors or Sweeteners" }}</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ check_color | default: "#34a853" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ x_color | default: "#ea4335" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.364 5.636a1 1 0 0 1 0 1.414L13.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 0 1-1.414-1.414L10.586 12l-4.95-4.95a1 1 0 0 1 1.414-1.414L12 10.586l4.95-4.95a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
</tr>
<tr style="background: #f7f7f7;">
<td style="padding: 14px; text-align: left; border-bottom: 1px solid #ddd; font-size: 15px;">{{ feature_4 | default: "Patent-Pending Technology" }}</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ check_color | default: "#34a853" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ x_color | default: "#ea4335" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.364 5.636a1 1 0 0 1 0 1.414L13.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 0 1-1.414-1.414L10.586 12l-4.95-4.95a1 1 0 0 1 1.414-1.414L12 10.586l4.95-4.95a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
</tr>
<tr style="background: #ffffff;">
<td style="padding: 14px; text-align: left; border-bottom: 1px solid #ddd; font-size: 15px;">{{ feature_5 | default: "Proprietary Herbal Blend" }}</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ check_color | default: "#34a853" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.292 5.708a1 1 0 0 1 0 1.414L9 18.414l-5.292-5.292a1 1 0 0 1 1.414-1.414L9 15.586l10.292-10.292a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
<td style="padding: 14px; text-align: center; border-bottom: 1px solid #ddd;">
<svg width="20" height="20" fill="{{ x_color | default: "#ea4335" }}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.364 5.636a1 1 0 0 1 0 1.414L13.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 0 1-1.414-1.414L10.586 12l-4.95-4.95a1 1 0 0 1 1.414-1.414L12 10.586l4.95-4.95a1 1 0 0 1 1.414 0z"/>
</svg>
</td>
</tr>
</tbody>
</table>
<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@media (max-width: 600px) {
table {
font-size: 12px !important;
}
th, td {
padding: 10px !important;
}
}
</style>
</div>Métodos de Pago
Muestra las opciones de pago aceptadas. Reduce la hesitación de pago y el abandono del carrito.
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/visa.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/master.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/american_express.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/paypal.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/apple_pay.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/google_pay.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/ideal.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/klarna.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/stripe.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/unionpay.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/discover.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/jcb.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/diners_club.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/maestro.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/sofort.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/bancontact.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/giropay.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/eps.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/sepa.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/afterpay.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/alipay.svg"/>
<link rel="preload" as="image" href="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/wechat_pay.svg"/>
<style>
.payment-methods-container .payment-icon {
height: {{ icon_height | default: "28px" }};
width: auto;
filter: {{ icon_filter | default: "none" }};
}
@media (max-width: 768px) {
.payment-methods-container .payment-icon {
height: {{ mobile_icon_height | default: "20px" }} !important;
}
.payment-methods-container {
gap: {{ mobile_gap | default: "4px" }} !important;
padding: {{ mobile_padding | default: "8px" }} !important;
}
}
</style>
<div style="margin-top:{{ margin_top | default: "0.25rem" }};margin-bottom:{{ margin_bottom | default: "0.25rem" }};width:100%">
<div class="payment-methods-container" style="
display: flex;
align-items: center;
justify-content: {{ alignment | default: "center" }};
flex-wrap: wrap;
width: 100%;
gap: {{ gap | default: "6px" }};
padding: {{ padding | default: "12px" }};
background: {{ background_color | default: "transparent" }};
border-radius: {{ border_radius | default: "8px" }};
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
">
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/visa.svg" alt="Visa" class="payment-icon"/>
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/master.svg" alt="Mastercard" class="payment-icon"/>
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/american_express.svg" alt="American Express" class="payment-icon"/>
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/discover.svg" alt="Discover" class="payment-icon"/>
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/paypal.svg" alt="PayPal" class="payment-icon"/>
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/apple_pay.svg" alt="Apple Pay" class="payment-icon"/>
<img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/google_pay.svg" alt="Google Pay" class="payment-icon"/>
</div>
</div>Carrusel de Testimonios
Testimonios de clientes rotativos. Múltiples historias de éxito que generan confianza.
<div class="kodu-testimonial-carousel-wrapper" style="
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<div class="kodu-testimonial-carousel">
<div class="kodu-testimonial-card">
<div class="kodu-testimonial-profile">
<img src="{{ profile_1_image | default: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&h=80&q=80" }}" alt="{{ profile_1_name | default: "Jenna R." }}" />
</div>
<div class="kodu-testimonial-content">
<div class="kodu-testimonial-name-stars">
<span class="kodu-testimonial-name">{{ profile_1_name | default: "Jenna R." }}</span>
<span class="kodu-testimonial-stars">★★★★★</span>
</div>
<p class="kodu-testimonial-text">{{ profile_1_text | default: "I really love this, arrived in 2 days exactly what I needed!" }}</p>
</div>
</div>
<div class="kodu-testimonial-card">
<div class="kodu-testimonial-profile">
<img src="{{ profile_2_image | default: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&h=80&q=80" }}" alt="{{ profile_2_name | default: "Samantha L." }}" />
</div>
<div class="kodu-testimonial-content">
<div class="kodu-testimonial-name-stars">
<span class="kodu-testimonial-name">{{ profile_2_name | default: "Samantha L." }}</span>
<span class="kodu-testimonial-stars">★★★★★</span>
</div>
<p class="kodu-testimonial-text">{{ profile_2_text | default: "Amazing quality! Looks exactly like the photos!" }}</p>
</div>
</div>
<div class="kodu-testimonial-card">
<div class="kodu-testimonial-profile">
<img src="{{ profile_3_image | default: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&h=80&q=80" }}" alt="{{ profile_3_name | default: "Emily G." }}" />
</div>
<div class="kodu-testimonial-content">
<div class="kodu-testimonial-name-stars">
<span class="kodu-testimonial-name">{{ profile_3_name | default: "Emily G." }}</span>
<span class="kodu-testimonial-stars">★★★★★</span>
</div>
<p class="kodu-testimonial-text">{{ profile_3_text | default: "Fast shipping and super cute. Will buy again!" }}</p>
</div>
</div>
</div>
</div>
<style>
.kodu-testimonial-carousel-wrapper {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.kodu-testimonial-carousel {
display: flex;
overflow-x: auto;
gap: {{ gap | default: "12px" }};
padding: 16px 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
justify-content: {{ alignment_desktop | default: "flex-start" }};
}
@media (max-width: 768px) {
.kodu-testimonial-carousel {
justify-content: {{ alignment_mobile | default: "flex-start" }};
padding: 16px 24px;
}
}
.kodu-testimonial-card {
flex: 0 0 auto;
display: flex;
align-items: center;
background: {{ card_bg | default: "#fff7e6" }};
padding: {{ card_padding | default: "12px 16px" }};
border-radius: {{ border_radius | default: "12px" }};
border: {{ card_border_width | default: "0px" }} {{ card_border_style | default: "solid" }} {{ card_border_color | default: "transparent" }};
box-shadow: {{ box_shadow | default: "0 4px 8px rgba(0, 0, 0, 0.1)" }};
min-width: 280px;
max-width: 320px;
scroll-snap-align: start;
margin: 0;
}
@media (min-width: 640px) {
.kodu-testimonial-card {
min-width: 300px;
max-width: 350px;
}
}
@media (min-width: 1024px) {
.kodu-testimonial-card {
min-width: {{ card_min_width | default: "300px" }};
max-width: {{ card_min_width | default: "300px" }};
margin: 0;
}
}
.kodu-testimonial-profile img {
width: {{ profile_image_size | default: '50px' }};
height: {{ profile_image_size | default: '50px' }};
border-radius: 50%;
border: {{ profile_border_width | default: "2px" }} {{ profile_border_style | default: "solid" }} {{ profile_border_color | default: "#f5c66e" }};
object-fit: cover;
}
.kodu-testimonial-content {
margin-left: {{ content_margin | default: '12px' }};
flex: 1;
min-width: 0;
}
.kodu-testimonial-name-stars {
display: flex;
align-items: center;
margin-bottom: {{ name_stars_margin | default: '4px' }};
flex-wrap: wrap;
gap: 4px;
}
.kodu-testimonial-name {
font-weight: {{ name_font_weight | default: '600' }};
font-size: {{ name_font_size | default: '14px' }};
margin-right: {{ name_margin_right | default: '8px' }};
color: {{ name_color | default: "#333333" }};
}
.kodu-testimonial-stars {
background: {{ stars_bg | default: "#fca311" }};
color: {{ stars_color | default: "#ffffff" }};
padding: {{ stars_padding | default: '1px 6px' }};
border-radius: {{ stars_border_radius | default: '6px' }};
font-size: {{ stars_font_size | default: '12px' }};
white-space: nowrap;
}
.kodu-testimonial-text {
font-size: {{ text_font_size | default: '13px' }};
color: {{ text_color | default: "#333333" }};
line-height: {{ text_line_height | default: '1.3' }};
margin: 0;
overflow-wrap: break-word;
word-wrap: break-word;
}
.kodu-testimonial-carousel::-webkit-scrollbar {
display: none;
}
.kodu-testimonial-carousel {
-ms-overflow-style: none;
scrollbar-width: none;
}
@media (max-width: 639px) {
.kodu-testimonial-profile img {
width: 40px;
height: 40px;
}
.kodu-testimonial-name {
font-size: 13px;
}
.kodu-testimonial-stars {
font-size: 11px;
}
.kodu-testimonial-text {
font-size: 12px;
}
.kodu-testimonial-card {
padding: 10px 12px;
}
}
</style>Banner de Clientes
Muestra clientes satisfechos con fotos. Prueba social visual que genera confianza.
<div class="customer-banner" style="
margin-top: {{ margin_top | default: "0px" }};
margin-bottom: {{ margin_bottom | default: "0px" }};
">
<div class="customer-avatars">
<img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Customer 1" class="customer-avatar">
<img src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg" alt="Customer 2" class="customer-avatar">
<img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Customer 3" class="customer-avatar">
</div>
<span class="customer-text">{{ customer_count | default: "1,000,000+ Happy Customers" }}</span>
</div>
{% style %}
.customer-banner {
display: flex;
align-items: center;
padding: {{ padding | default: "6px 16px" }};
border-radius: {{ border_radius | default: "6px" }};
background: {{ background_gradient | default: "linear-gradient(45deg, #1cbcc3, #4abf8f 80%)" }};
color: {{ text_color | default: "#ffffff" }};
font-size: 12px;
border: {{ banner_border_width | default: "0px" }} {{ banner_border_style | default: "solid" }} {{ banner_border_color | default: "transparent" }};
box-shadow: {{ shadow | default: "0 4px 6px rgba(0, 0, 0, 0.1)" }};
}
.customer-avatars {
display: flex;
gap: 0;
margin-right: 10px;
margin-left: 10px;
}
.customer-avatar {
width: {{ avatar_size | default: "22px" }};
height: {{ avatar_size | default: "22px" }};
border-radius: 50%;
border: {{ avatar_border_width | default: "2px" }} {{ avatar_border_style | default: "solid" }} {{ avatar_border_color | default: "#ffffff" }};
margin-left: -7px;
object-fit: cover;
}
.customer-avatar:first-child {
margin-left: 0;
}
.customer-text {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
{% endstyle %}Insignia de Calificación
Display compacto de calificación de estrellas. Señal visual rápida de confianza para productos.
<div style="
margin-top: {{ margin_top | default: "8px" }};
margin-bottom: {{ margin_bottom | default: "8px" }};
width: 100%;
">
<div style="
display: flex;
align-items: center;
justify-content: {{ alignment | default: "start" }};
gap: {{ gap | default: "8px" }};
">
<div style="display: flex; gap: 2px;">
{% assign rating = rating | default: '4.7' %}
{% assign full_stars = rating | floor %}
{% for i in (1..5) %}
{% if i <= full_stars %}
<svg width="{{ star_size | default: "16px" }}" height="{{ star_size | default: "16px" }}" fill="{{ star_color | default: "#f43f5e" }}" viewBox="0 0 24 24">
<path d="M12 2l2.9 6.6L22 9.2l-5 4.9 1.2 7L12 17.8 5.8 21l1.2-7-5-4.9 7.1-0.6z"/>
</svg>
{% else %}
<svg width="{{ star_size | default: "16px" }}" height="{{ star_size | default: "16px" }}" fill="{{ empty_star_color | default: "#e5e7eb" }}" viewBox="0 0 24 24">
<path d="M12 2l2.9 6.6L22 9.2l-5 4.9 1.2 7L12 17.8 5.8 21l1.2-7-5-4.9 7.1-0.6z"/>
</svg>
{% endif %}
{% endfor %}
</div>
<div style="font-size: {{ font_size | default: "14px" }}; color: {{ text_color | default: "#000000" }};">
<strong>Rated {{ rating }}</strong>
<span style="color: {{ review_count_color | default: "gray" }};">({{ review_count | default: "137" }})</span>
</div>
<div style="
background: {{ badge_bg | default: "#ffe4e6" }};
color: {{ badge_text_color | default: "#f43f5e" }};
padding: {{ badge_padding | default: "2px 6px" }};
border-radius: {{ badge_border_radius | default: "4px" }};
font-size: {{ badge_font_size | default: "13px" }};
">
{{ badge_text | default: "Happy Customers" }}
</div>
</div>
</div>Mensaje Giratorio
Mensajes rotativos de prueba social que muestran estadísticas de actividad del cliente para crear urgencia.
<section class="rspin_8kv7" style="--font-size: {{ font_size | default: "13px" }}; --interval-ms: {{ animation_speed | default: "2500" }}; margin-top: {{ top_margin | default: "0px" }}; margin-bottom: {{ bottom_margin | default: "0px" }};">
<style>
.rspin_8kv7 {
font-size: var(--font-size);
color: {{ text_color | default: "#333333" }};
}
.rspin_8kv7 .rspin_8kv7-viewport {
position: relative;
overflow: hidden;
height: 18px;
}
.rspin_8kv7 .rspin_8kv7-line {
display: grid;
grid-auto-rows: auto;
transition: transform 0.5s ease-in-out;
will-change: transform;
}
.rspin_8kv7 .rspin_8kv7-item {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.rspin_8kv7 .rspin_8kv7-strong {
font-weight: 600;
color: {{ highlight_color | default: "#000000" }};
}
</style>
<div class="rspin_8kv7-viewport" id="rspin_8kv7_view">
<div class="rspin_8kv7-line" id="rspin_8kv7_line">
<div class="rspin_8kv7-item">{{ message_1_start | default: "🚀 Hurry up!" }} <span class="rspin_8kv7-strong">{{ message_1_highlight | default: "500+ items" }}</span> {{ message_1_end | default: "sold in the last 3 days!" }}</div>
<div class="rspin_8kv7-item">{{ message_2_start | default: "🛒 In the carts of" }} <span class="rspin_8kv7-strong">{{ message_2_highlight | default: "2.5K people" }}</span> {{ message_2_end | default: "— buy before its gone!" }}</div>
<div class="rspin_8kv7-item">{{ message_3_start | default: "👀 Trending now!" }} <span class="rspin_8kv7-strong">{{ message_3_highlight | default: "7,562 people" }}</span> {{ message_3_end | default: "viewed in the last 24 hours!" }}</div>
</div>
</div>
<script>
(function(){
var view = document.getElementById('rspin_8kv7_view');
var line = document.getElementById('rspin_8kv7_line');
if(!view || !line) return;
var items = line.children;
if(!items.length) return;
var root = view.closest('.rspin_8kv7') || document.documentElement;
function cssVarInt(el, name, fallback){
var v = getComputedStyle(el).getPropertyValue(name).trim();
var n = parseInt(v, 10);
return isNaN(n) ? fallback : n;
}
var idx = 0;
var intervalMs = cssVarInt(root, '--interval-ms', 2500);
var rowH = items[0].offsetHeight || 18;
function setHeight(){
rowH = items[0].offsetHeight || rowH;
view.style.height = rowH + 'px';
line.style.transform = 'translateY(' + (-idx * rowH) + 'px)';
}
setHeight();
window.addEventListener('load', setHeight);
var resizeTO;
window.addEventListener('resize', function(){
clearTimeout(resizeTO);
resizeTO = setTimeout(setHeight, 200);
});
setInterval(function(){
idx = (idx + 1) % items.length;
line.style.transform = 'translateY(' + (-idx * rowH) + 'px)';
}, intervalMs);
})();
</script>
</section>Tutorial de Profityy
Aprende cómo agregar hermosas secciones a tu tienda Shopify con Profityy.
Una mejor forma de personalizar tu tienda Shopify
Profityy te permite comprar secciones de Shopify prediseñadas y hermosas. Todas las secciones están listas para personalizar en el editor de temas. Funciona con Online Store 2.0 (agrega a cualquier página).
Paso 1
Abrir Editor de Temas
Ve a tu administrador de Shopify → Tienda Online → Temas → Personalizar
Paso 2
Elige y Personaliza
Explora nuestras secciones, personaliza colores y texto para tu marca
Paso 3
Copia y Pega el Código
Agrega una sección "Liquid personalizado" y pega el código generado
¿Por qué elegir Profityy?
Construido específicamente para tiendas Shopify pensando en rendimiento y conversión
</>
Código Limpio
Código artesanal y optimizado que no ralentizará tu tienda
🛠️
Totalmente Personalizable
Cambia colores, texto y diseño directamente en el editor de Profityy
⬚⬚
Sin Aplicaciones
Código Liquid puro – sin costos mensuales ni dependencias
★
Enfocado en Conversión
Diseñado para aumentar ventas y mejorar la experiencia del usuario
Preguntas Frecuentes
¿Necesito instalar alguna aplicación?
¡No! Todas las secciones están construidas con código Liquid puro y no requieren aplicaciones de terceros. Esto significa sin costos mensuales y mejor rendimiento.
¿Estas secciones ralentizarán mi tienda?
¡Para nada! Nuestras secciones están optimizadas para el rendimiento y usan código limpio y minimalista. Están diseñadas para cargar rápido y no afectar la velocidad de tu tienda.
¿Puedo personalizar los colores y el texto?
¡Sí! Cada sección es totalmente personalizable. Puedes cambiar colores, texto, imágenes y otras configuraciones usando el editor de Profityy.
¿Funcionan con todos los temas de Shopify?
¡Sí! Nuestras secciones funcionan con cualquier tema de Shopify que soporte Online Store 2.0 (que son prácticamente todos los temas modernos).
¿Qué pasa si necesito ayuda con la instalación?
Proporcionamos tutoriales detallados en video y guías paso a paso. Si aún necesitas ayuda, nuestro equipo de soporte está aquí para asistirte.