Which section will you add to
your Shopify store today?
How it works
Start using Shopify for just $1 for 3 months!
Ctrl K
Scroll for more categories
Order via Whatsapp
WhatsApp chat-style social proof section with customer testimonials and direct order button
<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>Floating Comments
Animated customer comments. Shows active community engagement
{% 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>Before/After 2
Dual-lane before/after transformation with glowing divider and flowing items
{% 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>Hero Product Cards
Animated hero section with 4 product cards featuring ratings, descriptions, and CTA buttons.
<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
Premium hero section with blurred background image, feature badges, and dual CTA buttons for product showcase.
<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 %}Social Purchase Widget
Premium social proof with animated purchase counter and profile images. Shows real-time purchase activity
<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>Satisfaction Stats
Professional satisfaction statistics section with compelling data metrics to build customer trust and credibility
<!-- 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>Customer Stats
Display customer satisfaction statistics with animated circular progress charts
<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>
Scroll To Top
Floating back-to-top button. Improves navigation on long product pages
<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>Social Badge 2
Enhanced social media badges with multiple platforms. Comprehensive social validation
<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>Social Badge
Display social media follower counts. External validation that builds trust
<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>Floating Reviews
Animated floating review notifications. Captures attention with social proof
<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>People Watching
Live viewer activity display. Real-time social proof that creates 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 %}Best Seller Badge
Mark popular items with bestseller labels. Validates customer choice
<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>Gradient Text
Eye-catching gradient text effects. Makes headlines stand out and grab attention
<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>Customer Activity Badge
Show real-time customer actions. Live social proof that encourages purchases
<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>Popular Notification
Show recent purchase popups. Creates FOMO and validates buying decisions
<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>Tabs
Organize product information in tabs. Clean layout that improves user experience
<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>Top Seller Badge
Highlight top-selling products. Social proof that drives purchase decisions
<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>Risk Free
Risk-free guarantee button with social proof
<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>Product Name Badge
Dual-box badge component displaying product name and origin information
<!-- 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 %}
Scrolling Announcement Bar 2
Dynamic scrolling text banner. Keeps key messages constantly visible
<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 %}Items Left Badge
Show remaining stock count. Creates scarcity and drives immediate action
<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>Countdown Badge
Limited-time offer countdown timer. Creates urgency and boosts immediate purchases
<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>Info Boxes
Display guarantee and warning information in attractive card format
<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 %}
In Stock
Show product availability clearly. Reassures customers about immediate shipping
<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 %}Instagram Views
Display Instagram engagement metrics. Social media proof that attracts customers
<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 %}Circle Slider
Interactive circular product showcase. Engaging way to display features
<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>Premium Review Badge
Verified review badges with star ratings. Builds instant credibility and trust
<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 %}Secure Checkout
Security badges for checkout pages. Reduces payment anxiety and increases completions
<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>Testimonial
Feature customer success stories. Real experiences that convert visitors into buyers
<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>Offer Box
Highlight special deals prominently. Eye-catching offers that boost conversions
<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>Timed Discount Review
Premium countdown review with verified user and automatic discount. Creates urgency with timer
<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>Notice Box
Highlight important announcements. Ensures critical messages get attention
<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>Loved By Customers
Customer satisfaction statistics. Numbers that prove your product quality
<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 %}Accordion
Collapsible FAQ sections. Organize information without overwhelming customers
<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>Gift Bar
Smart gift announcement bar with dynamic date calculation. Perfect for promoting free gifts and limited-time offers
<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>Money Back Guarantee
Eliminate purchase risk with refund promise. Proven to increase conversions by 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>Premium Badge
Mark high-quality products. Justifies premium pricing and exclusivity
<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>Features List Component
Structured feature presentation with icons. Clear value communication
<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>Trustpilot Rating Badge
Display Trustpilot scores. Third-party validation that builds trust
<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>Stock Alert Badge
Animated stock alert with blinking dot. Creates urgency with limited stock message
<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>Badges Component
Multiple trust badges in one place. Comprehensive credibility display
<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>Shipping Badge
Display shipping info prominently. Clear delivery expectations reduce cart abandonment
<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>People Viewing Badge
Show live viewer count. Creates urgency and social validation
<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>Feature List
List product benefits clearly. Helps customers understand value proposition
<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 %}Scrolling Text Banner
Moving text announcements with customizable product images
<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>Award Winning Badge
Display industry awards and certifications. Instant credibility and authority
<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>Delivery Box
Clear shipping information display. Transparency that reduces cart abandonment
<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>Product Features Premium
Showcase key product benefits with icons. Builds trust and reduces buyer hesitation
<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>Star Rating
Show product ratings with stars. Increases trust and purchase confidence instantly
<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>Selling Fast
Create urgency with live sales counter. Triggers FOMO and speeds up decisions
<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>Scrolling Announcement
Continuous scrolling messages. Keeps promotions visible at all times
<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>Money Back Guarantee 2
Enhanced guarantee badge with trust icons. Removes purchase hesitation completely
<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>Photo Carousel Reviews
Infinite scrolling photo carousel displaying review images with customizable CTA button
<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>Bundle Offer
Premium bundle offer section with multiple products and pricing
<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>Before/After Slider
Interactive before/after comparison slider with smooth transitions
<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>Low Stock Alert
Show limited inventory warnings. Creates scarcity and triggers quick buying decisions
<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>Product Price with Badges
Highlight your deals with dynamic pricing, custom currency symbols, and bold discount badges
{% 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>Product Questions & Answers
Interactive Q&A section with category filtering and brand responses
<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>Trustpilot Rating Widget
Display Trustpilot rating with stars and excellent badge to build customer trust
<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>Countdown Announcement Bar
A premium announcement bar with countdown timer to create urgency for limited-time offers
<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>TikTok Slider
TikTok-style video testimonials. Viral social proof that converts 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>Scrolling Reviews Carousel
Animated carousel with dual-direction scrolling reviews. Creates continuous movement for engaging social proof
<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>Spin Message
Rotating social proof messages that display customer activity stats to create urgency and build trust
<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>Customer Reviews
Display real customer testimonials. Social proof that builds instant credibility
<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>Gift Box
Show free gifts to increase order value. Perfect for first-time buyer incentives
<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>How To Use
Step-by-step usage instructions. Reduces product confusion and return rates
<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>Comparison Table
Compare product variations side-by-side. Helps customers choose and increases AOV
<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>Payment Methods
Display accepted payment options. Reduces checkout hesitation and cart abandonment
<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>Testimonial Carousel
Rotating customer testimonials. Multiple success stories that build confidence
<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>Customer Banner
Showcase happy customers with photos. Visual social proof that builds trust
<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 %}Star Rating Badge
Compact star rating display. Quick visual trust signal for products
<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>Spin Message
Rotating social proof messages that display customer activity stats to create urgency and build trust
<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>Profityy Tutorial
Learn how to add beautiful sections to your Shopify store with Profityy.
A better way to customize your Shopify store
SCKit lets you buy beautifully designed, pre-made Shopify sections. All sections are plug-n-play ready to be customized in the theme editor. Works with Online Store 2.0 (add to any page).
Step 1
Open Theme Editor
Go to your Shopify admin โ Online Store โ Themes โ Customize
Step 2
Choose & Customize
Browse our sections, customize colors and text to match your brand
Step 3
Copy & Paste Code
Add a "Custom Liquid" section and paste the generated code
Why choose SCKit?
Built specifically for Shopify stores with performance and conversion in mind
</>
Clean Code
Hand-crafted, optimized code that won't slow down your store
๐ ๏ธ
Fully Customizable
Change colors, text, and layout directly in SCKit editor
โฌโฌ
No Apps Required
Pure Liquid code โ no monthly fees or app dependencies
โ
Conversion Focused
Designed to increase sales and improve user experience
Frequently Asked Questions
Do I need to install any apps?
No! All sections are built with pure Liquid code and don't require any third-party apps. This means no monthly fees and better performance.
Will these sections slow down my store?
Not at all! Our sections are optimized for performance and use minimal, clean code. They're designed to load fast and not impact your store's speed.
Can I customize the colors and text?
Yes! Every section is fully customizable. You can change colors, text, images, and other settings using Profityy editor.
Do these work with all Shopify themes?
Yes! Our sections work with any Shopify theme that supports Online Store 2.0 (which is virtually all modern themes).
What if I need help with installation?
We provide detailed video tutorials and step-by-step guides. If you still need help, our support team is here to assist you.