Free Custom Liquid Library for Shopify Themes

{% comment %}
  Micro review widget — replace TEMPLATE_ID and BUSINESS_UNIT_ID from your review provider dashboard.
{% endcomment %}
<div
  class="trustpilot-widget"
  data-locale="en-US"
  data-template-id="TEMPLATE_ID"
  data-businessunit-id="BUSINESS_UNIT_ID"
  data-style-height="28px"
  data-style-width="100%"
  data-theme="light"
>
  <a href="https://www.trustpilot.com" target="_blank" rel="noopener" aria-hidden="true"></a>
</div>
<script type="text/javascript" src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

Micro review strip

Micro Trustpilot strip — paste widget IDs.

{% comment %}
  Trustpilot-style summary row: label, same star badge image as “Micro review strip”, bold count + “reviews”.
  Settings: label, badge_image (optional URL), rating (for aria-label only), review_count, reviews_label.
{% endcomment %}
<div class="amose-tpbar amose-tpbar--{{ id }}">
  <style>
    .amose-tpbar--{{ id }} {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: clamp(10px, 2vw, 18px); width: 100%; max-width: 100%;
      font-family: inherit; color: #0a0a0a;
    }
    .amose-tpbar--{{ id }} .amose-tpbar__label {
      font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #0a0a0a;
    }
    .amose-tpbar--{{ id }} .amose-tpbar__stars { display: flex; align-items: center; line-height: 0; }
    .amose-tpbar--{{ id }} .amose-tpbar__badge-img {
      width: min(100px, 100%); max-width: 100%; height: auto; display: block;
    }
    .amose-tpbar--{{ id }} .amose-tpbar__count { margin: 0; font-size: 15px; line-height: 1.2; color: #0a0a0a; }
    .amose-tpbar--{{ id }} .amose-tpbar__count strong { font-weight: 700; }
    .amose-tpbar--{{ id }} .amose-tpbar__count span { font-weight: 400; }
  </style>
  <span class="amose-tpbar__label">{{ label | default: 'Excellent' }}</span>
  <div class="amose-tpbar__stars" role="img" aria-label="{{ rating | default: 4.8 }} out of 5 stars">
    <img class="amose-tpbar__badge-img" src="{{ badge_image | default: 'https://i.imgur.com/EHjNmTM.png' }}" width="100" height="20" alt="" loading="lazy" decoding="async" />
  </div>
  <p class="amose-tpbar__count">
    <strong>{{ review_count | default: '20,921' }}</strong>{% if reviews_label != blank %} <span>{{ reviews_label }}</span>{% else %} <span>reviews</span>{% endif %}
  </p>
</div>

Trustpilot summary bar

Label + star badge + bold review count.

Excellent

20,921 reviews

{% assign product_types = "Cleanse,Purify,Refresh" | split: "," %}

<style>
.option-buttons {
  display: flex;
  gap: 10px;
}

.option-button {
  background: #E8F5E9;
  border: none;
  border-radius: 50px;
  padding: 6px 15px;
  cursor: pointer;
  font-size: 12px;
}

.option-button:hover {
  background: #e6d6d6;
}
</style>

<div class="option-buttons">
  {% for type in product_types %}
    <button class="option-button">
      {{ type }}
    </button>
  {% endfor %}
</div>

Product type pills

Pills built from a comma list.

<section class="rspin_8kv7" style="
  --font-size: {{ font_size | default: '14' }}px; 
  --interval-ms: 2500; 
  margin-top: {{ margin_top | default: '0' }}px; 
  margin-bottom: {{ margin_bottom | default: '0' }}px;
  background: {{ bg_color | default: 'transparent' }};
  padding: 0;
  display: flex;
  justify-content: {{ alignment | default: 'center' }};
">
  <style>
    .rspin_8kv7 { 
      font-size: var(--font-size); 
      color: {{ text_color | default: '#333333' }};
      width: 100%;
      font-family: inherit;
    }
    .rspin_8kv7 .rspin_8kv7-viewport {
      position: relative;
      overflow: hidden;
      height: {{ font_size | default: '14' | plus: 6 }}px;
      display: flex;
      justify-content: {{ alignment | default: 'center' }};
    }
    .rspin_8kv7 .rspin_8kv7-line {
      display: grid;
      grid-auto-rows: auto;
      transition: transform 0.5s ease-in-out;
      will-change: transform;
      width: fit-content;
    }
    .rspin_8kv7 .rspin_8kv7-item {
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      height: {{ font_size | default: '14' | plus: 6 }}px;
    }
    .rspin_8kv7 .rspin_8kv7-strong { 
      font-weight: 700; 
      color: {{ strong_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">{{ msg1_prefix | default: '🚀 Hurry up!' }} <span class="rspin_8kv7-strong">{{ msg1_bold | default: '500+ items' }}</span> {{ msg1_suffix | default: 'sold in the last 3 days!' }}</div>
      <div class="rspin_8kv7-item">{{ msg2_prefix | default: '🛒 In the carts of' }} <span class="rspin_8kv7-strong">{{ msg2_bold | default: '2.5K people' }}</span> {{ msg2_suffix | default: '— buy before its gone!' }}</div>
      <div class="rspin_8kv7-item">{{ msg3_prefix | default: '👀 Trending now!' }} <span class="rspin_8kv7-strong">{{ msg3_bold | default: '7,562 people' }}</span> {{ msg3_suffix | 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 = 20;

      function updateDims() {
        if(!items[0]) return;
        const h = items[0].offsetHeight;
        if (h > 0) {
          rowH = h;
          view.style.height = rowH + 'px';
          line.style.transform = 'translateY(' + (-idx * rowH) + 'px)';
        }
      }

      // Initial sync with small delay for dimension calculation
      setTimeout(updateDims, 50);
      window.addEventListener('load', updateDims);
      
      var resizeTO;
      window.addEventListener('resize', function(){
        clearTimeout(resizeTO);
        resizeTO = setTimeout(updateDims, 200);
      });

      var spinInterval = setInterval(function(){
        if(!line || !items.length) return;
        idx = (idx + 1) % items.length;
        line.style.transform = 'translateY(' + (-idx * rowH) + 'px)';
      }, intervalMs);

      // Scoped cleanup
      if (typeof MutationObserver !== 'undefined' && document.body) {
        const observer = new MutationObserver(() => {
          if (!document.body.contains(view)) {
            clearInterval(spinInterval);
            observer.disconnect();
          }
        });
        observer.observe(document.body, { childList: true, subtree: true });
      }
    })();
  </script>
</section>

Rotating social proof strip

Urgency lines that rotate on a timer.

🚀 Hurry up! 500+ items sold in the last 3 days!

🛒 In the carts of 2.5K people — buy before its gone!

👀 Trending now! 7,562 people viewed in the last 24 hours!

<style>
  .kodu-star-svg {
    width: {{ star_size | default: '16' }}px;
    height: {{ star_size | default: '16' }}px;
    flex-shrink: 0;
  }
  .kodu-stars-empty {
    fill: {{ empty_star_color | default: '#e5e7eb' }};
  }
  .kodu-stars-full {
    fill: {{ star_color | default: '#f43f5e' }};
  }
</style>

<div class="kodu-star-badge-wrapper" style="
  margin-top: {{ wrapper_margin_top | default: '8' }}px;
  margin-bottom: {{ wrapper_margin_bottom | default: '8' }}px;
  width: 100%;
">
  <div style="
    display: flex;
    align-items: center;
    justify-content: {{ align_web | default: 'center' }};
    gap: {{ gap | default: '8' }}px;
    flex-wrap: wrap;
  ">
    <div style="position: relative; display: inline-flex;">
      <!-- Empty Stars Base -->
      <div style="display: flex; gap: 2px;">
        <svg class="kodu-star-svg kodu-stars-empty" 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>
        <svg class="kodu-star-svg kodu-stars-empty" 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>
        <svg class="kodu-star-svg kodu-stars-empty" 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>
        <svg class="kodu-star-svg kodu-stars-empty" 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>
        <svg class="kodu-star-svg kodu-stars-empty" 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>
      </div>

      <!-- Full Stars Overlay (Clipping) -->
      <div style="position: absolute; top: 0; left: 0; display: flex; gap: 2px; overflow: hidden; height: 100%; width: calc({{ rating_value | default: '4.7' }} / 5 * 100%);">
        <svg class="kodu-star-svg kodu-stars-full" 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>
        <svg class="kodu-star-svg kodu-stars-full" 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>
        <svg class="kodu-star-svg kodu-stars-full" 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>
        <svg class="kodu-star-svg kodu-stars-full" 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>
        <svg class="kodu-star-svg kodu-stars-full" 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>
      </div>
    </div>

    <div style="font-size: {{ text_size | default: '14' }}px; color: {{ text_color | default: '#ffffff' }};">
      <strong>{{ rating_label | default: 'Rated' }} {{ rating_value | default: '4.7' }}</strong>
      <span style="color: {{ count_color | default: '#9ca3af' }}; margin-left: 2px;">({{ reviews_count | default: '137' }})</span>
    </div>

    <div style="
      background: {{ badge_bg | default: '#ffe4e6' }};
      color: {{ badge_text_color | default: '#f43f5e' }};
      padding: 2px 6px;
      border-radius: {{ badge_radius | default: '4' }}px;
      font-size: {{ badge_size | default: '13' }}px;
      display: {{ show_badge | default: 'block' }};
    ">
      {{ badge_text | default: 'Happy Customers' }}
    </div>
  </div>
</div>

Star rating badge

Stars, rating, count, optional badge.

Rated 4.7(137)

Happy Customers

{% comment %}
  Star row + customer line — set a unique `id`. No dark section background; tune colors in settings.
{% endcomment %}
<div
  class="amose-ssline amose-ssline--{{ id }}"
  style="
    margin-top: {{ margin_top | default: '8' }}px;
    margin-bottom: {{ margin_bottom | default: '8' }}px;
    width: 100%;
  "
>
  <style>
    .amose-ssline--{{ id }} .amose-ssline__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: {{ alignment | default: 'center' }};
      gap: {{ layout_gap | default: '8' }}px;
      flex-wrap: wrap;
    }
    .amose-ssline--{{ id }} .amose-ssline__stars {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }
    .amose-ssline--{{ id }} .amose-ssline__star-svg {
      width: {{ star_size | default: '20' }}px;
      height: {{ star_size | default: '20' }}px;
      flex-shrink: 0;
      display: block;
      fill: {{ star_color | default: '#f59e0b' }};
    }
    .amose-ssline--{{ id }} .amose-ssline__label {
      margin: 0;
      font-size: {{ text_size | default: '15' }}px;
      font-weight: {{ font_weight | default: '400' }};
      color: {{ text_color | default: '#0a0a0a' }};
      line-height: 1.35;
    }
  </style>
  <div class="amose-ssline__row">
    <div class="amose-ssline__stars" aria-hidden="true">
      <svg class="amose-ssline__star-svg" viewBox="0 0 24 24" 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"/></svg>
      <svg class="amose-ssline__star-svg" viewBox="0 0 24 24" 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"/></svg>
      <svg class="amose-ssline__star-svg" viewBox="0 0 24 24" 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"/></svg>
      <svg class="amose-ssline__star-svg" viewBox="0 0 24 24" 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"/></svg>
      <svg class="amose-ssline__star-svg" viewBox="0 0 24 24" 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"/></svg>
    </div>
    <p class="amose-ssline__label">{{ label_text | default: '+1 Million Happy Customers' }}</p>
  </div>
</div>

Star customer line

Five stars plus a short trust line (no block background).

+1 Million Happy Customers

<style>
  .payment-methods-container-{{ id }} {
    display: flex;
    align-items: center;
    justify-content: {{ alignment | default: 'center' }};
    flex-wrap: wrap;
    width: 100%;
    gap: {{ gap | default: '8' }}px;
    padding: {{ padding | default: '12' }}px;
    background: {{ bg_color | default: 'transparent' }};
    border-radius: {{ border_radius | default: '8' }}px;
    margin-top: {{ margin_top | default: '4' }}px;
    margin-bottom: {{ margin_bottom | default: '4' }}px;
    line-height: 0;
  }
  .payment-methods-container-{{ id }} .payment-icon {
    height: {{ icon_height | default: '28' }}px;
    width: auto;
    filter: {{ icon_style | default: 'none' }};
    transition: transform 0.2s ease;
  }
  .payment-methods-container-{{ id }} .payment-icon:hover {
    transform: translateY(-2px);
  }

  /* Visibility Toggles */
  .payment-methods-container-{{ id }} .visa { display: {{ show_visa | default: 'block' }}; }
  .payment-methods-container-{{ id }} .mastercard { display: {{ show_mastercard | default: 'block' }}; }
  .payment-methods-container-{{ id }} .amex { display: {{ show_amex | default: 'block' }}; }
  .payment-methods-container-{{ id }} .discover { display: {{ show_discover | default: 'block' }}; }
  .payment-methods-container-{{ id }} .paypal { display: {{ show_paypal | default: 'block' }}; }
  .payment-methods-container-{{ id }} .stripe { display: {{ show_stripe | default: 'block' }}; }
  .payment-methods-container-{{ id }} .apple_pay { display: {{ show_apple_pay | default: 'block' }}; }
  .payment-methods-container-{{ id }} .google_pay { display: {{ show_google_pay | default: 'block' }}; }
  .payment-methods-container-{{ id }} .ideal { display: {{ show_ideal | default: 'block' }}; }
  .payment-methods-container-{{ id }} .klarna { display: {{ show_klarna | default: 'block' }}; }
  .payment-methods-container-{{ id }} .afterpay { display: {{ show_afterpay | default: 'block' }}; }
  .payment-methods-container-{{ id }} .shop_pay { display: {{ show_shop_pay | default: 'block' }}; }
  .payment-methods-container-{{ id }} .venmo { display: {{ show_venmo | default: 'block' }}; }
  .payment-methods-container-{{ id }} .diners_club { display: {{ show_diners | default: 'block' }}; }
  .payment-methods-container-{{ id }} .jcb { display: {{ show_jcb | default: 'block' }}; }
  .payment-methods-container-{{ id }} .unionpay { display: {{ show_unionpay | default: 'block' }}; }
  .payment-methods-container-{{ id }} .alipay { display: {{ show_alipay | default: 'block' }}; }

  @media (max-width: 768px) {
    .payment-methods-container-{{ id }} .payment-icon {
      height: {{ icon_height_mobile | default: '20' }}px !important;
    }
    .payment-methods-container-{{ id }} {
      gap: {{ gap_mobile | default: '6' }}px !important;
      padding: {{ padding_mobile | default: '8' }}px !important;
    }
  }
</style>

<div class="payment-methods-container-{{ id }}">
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/visa.svg" alt="Visa" class="payment-icon visa"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/master.svg" alt="Mastercard" class="payment-icon mastercard"/>
  <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 amex"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/discover.svg" alt="Discover" class="payment-icon discover"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/paypal.svg" alt="PayPal" class="payment-icon paypal"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/stripe.svg" alt="Stripe" class="payment-icon stripe"/>
  <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 apple_pay"/>
  <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 google_pay"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/ideal.svg" alt="iDEAL" class="payment-icon ideal"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/klarna.svg" alt="Klarna" class="payment-icon klarna"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/afterpay.svg" alt="Afterpay" class="payment-icon afterpay"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/shopify_pay.svg" alt="Shop Pay" class="payment-icon shop_pay"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/venmo.svg" alt="Venmo" class="payment-icon venmo"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/diners_club.svg" alt="Diners Club" class="payment-icon diners_club"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/jcb.svg" alt="JCB" class="payment-icon jcb"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/unionpay.svg" alt="UnionPay" class="payment-icon unionpay"/>
  <img src="https://raw.githubusercontent.com/activemerchant/payment_icons/refs/heads/master/app/assets/images/payment_icons/alipay.svg" alt="Alipay" class="payment-icon alipay"/>
</div>

Payment methods row

Payment logos in a row; toggle in Liquid.

{% comment %}
  Trust feature strip — set a unique `id`. Three columns: icon, bold title, subtitle. Horizontal scroll on small screens.
{% endcomment %}
<div
  class="amose-tristrip amose-tristrip--{{ id }}"
  style="
    --tristrip-fg: {{ text_color | default: '#000000' }};
    --tristrip-bg: {{ bg_color | default: '#FFFFFF' }};
    --tristrip-gap: {{ column_gap | default: '24' }}px;
    font-size: {{ font_size | default: '14' }}px;
    background: var(--tristrip-bg);
    color: var(--tristrip-fg);
  "
>
  <style>
    .amose-tristrip--{{ id }} { width: 100%; box-sizing: border-box; }
    .amose-tristrip--{{ id }} .amose-tristrip__row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--tristrip-gap);
      text-align: center;
      box-sizing: border-box;
    }
    .amose-tristrip--{{ id }} .amose-tristrip__item {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35em;
    }
    .amose-tristrip--{{ id }} .amose-tristrip__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.65em;
      height: 1.65em;
      margin-bottom: 0.1em;
      color: var(--tristrip-fg);
    }
    .amose-tristrip--{{ id }} .amose-tristrip__icon svg { width: 100%; height: 100%; display: block; }
    .amose-tristrip--{{ id }} .amose-tristrip__title {
      margin: 0;
      font-weight: 700;
      color: var(--tristrip-fg);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    .amose-tristrip--{{ id }} .amose-tristrip__sub {
      margin: 0;
      font-weight: 400;
      color: var(--tristrip-fg);
      line-height: 1.35;
      opacity: 0.92;
    }
    @media (max-width: 640px) {
      .amose-tristrip--{{ id }} .amose-tristrip__row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 1.5rem;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .amose-tristrip--{{ id }} .amose-tristrip__row::-webkit-scrollbar { display: none; }
      .amose-tristrip--{{ id }} .amose-tristrip__item {
        flex: 0 0 auto;
        min-width: 5.5rem;
        max-width: 7rem;
      }
    }
  </style>
  <div class="amose-tristrip__row">
    <div class="amose-tristrip__item">
      <div class="amose-tristrip__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <rect x="2" y="5" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
          <path d="M2 10h20" stroke="currentColor" stroke-width="1.5"/>
        </svg>
      </div>
      <p class="amose-tristrip__title">{{ title_1 | default: 'Pay later' }}</p>
      <p class="amose-tristrip__sub">{{ sub_1 | default: 'up to 60 days' }}</p>
    </div>
    <div class="amose-tristrip__item">
      <div class="amose-tristrip__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path fill="currentColor" d="M12 1.5L4 4.75v6.25c0 5.2 3.6 10 7.5 11.25 3.9-1.25 7.5-6.05 7.5-11.25V4.75L12 1.5z"/>
          <path d="M9 12l2 2 4.5-4.5" fill="none" stroke="#fff" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <p class="amose-tristrip__title">{{ title_2 | default: 'All-Day' }}</p>
      <p class="amose-tristrip__sub">{{ sub_2 | default: 'no-hassle fixes' }}</p>
    </div>
    <div class="amose-tristrip__item">
      <div class="amose-tristrip__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <circle cx="12" cy="12" r="9.25" stroke="currentColor" stroke-width="1.5"/>
          <path d="M2.75 12h18.5M12 2.75c2.8 3.5 2.8 15.5 0 19M12 2.75c-2.8 3.5-2.8 15.5 0 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </div>
      <p class="amose-tristrip__title">{{ title_3 | default: 'Shipping' }}</p>
      <p class="amose-tristrip__sub">{{ sub_3 | default: 'worldwide free' }}</p>
    </div>
  </div>
</div>

Trust feature strip

Pay later, support, shipping — scrolls horizontally on mobile.

Pay later

up to 60 days

All-Day

no-hassle fixes

Shipping

worldwide free

{% comment %}
  Trust container — set a unique `id`. Data attributes drive CSS custom properties (same idea as TrustContainerBlock).
{% endcomment %}
<div id="trust-root-{{ id }}" class="trust-scope trust-scope--{{ id }}">
<style>
  .trust-scope--{{ id }} .trust-container-block {
    width: 100%;
    margin-top: var(--trust-container-margin-top, 0px);
    margin-bottom: var(--trust-container-margin-bottom, 0px);
  }
  .trust-scope--{{ id }} .trust-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--trust-container-padding, 18px);
    background: var(--trust-container-bg-color, #FFFFFF);
    border: 1px solid var(--trust-container-border-color, #e8e8ec);
    border-radius: var(--trust-container-border-radius, 12px);
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06);
    font-family: inherit;
    font-size: var(--trust-container-font-size, 14px);
    line-height: 1.5;
    color: var(--trust-container-text-color, #333333);
    box-sizing: border-box;
  }
  .trust-scope--{{ id }} .trustscore-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--trust-container-star-gap, 8px);
    margin-bottom: 0;
  }
  .trust-scope--{{ id }} .trustscore-stars { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .trust-scope--{{ id }} .trustscore-stars-img {
    height: var(--trust-container-star-size, 16px);
    width: auto;
    display: block;
  }
  .trust-scope--{{ id }} .trustscore-stars-svg { display: flex; align-items: center; gap: 2px; }
  .trust-scope--{{ id }} .trustscore-stars-svg svg {
    width: var(--trust-container-star-size, 16px);
    height: var(--trust-container-star-size, 16px);
    color: var(--trust-container-star-color, #00B67A);
    fill: var(--trust-container-star-color, #00B67A);
    flex-shrink: 0;
  }
  .trust-scope--{{ id }} .trustscore {
    font-weight: 400;
    color: var(--trust-container-rating-color, #333333);
    font-size: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    line-height: 1.35;
  }
  .trust-scope--{{ id }} .trustscore-rating { font-weight: 700; letter-spacing: -0.02em; color: var(--trust-container-rating-color, #333333); }
  .trust-scope--{{ id }} .trustscore-separator { color: var(--trust-container-rating-color, #333333); opacity: 0.45; font-weight: 300; }
  .trust-scope--{{ id }} .trustscore-reviews { color: var(--trust-container-rating-color, #333333); opacity: 0.88; font-weight: 500; }
  .trust-scope--{{ id }} .section-divider {
    height: 1px;
    background-color: var(--trust-container-divider-color, #e8e8ec);
    margin: var(--trust-container-divider-margin, 20px) 0;
    width: 100%;
    display: block;
    clear: both;
    border: none;
    opacity: 1;
  }
  .trust-scope--{{ id }} .free-delivery,
  .trust-scope--{{ id }} .guarantee {
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 400;
    color: var(--trust-container-text-color, #333333);
    line-height: 1.45;
  }
  .trust-scope--{{ id }} .free-delivery strong,
  .trust-scope--{{ id }} .guarantee strong { font-weight: 600; color: var(--trust-container-text-color, #333333); }
  .trust-scope--{{ id }} .payment-methods { margin-top: 0; }
  .trust-scope--{{ id }} .payment-methods__icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .trust-scope--{{ id }} .payment-methods__icons .payment-icon {
    width: 40px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .trust-scope--{{ id }} .payment-methods__icons .payment-icon svg,
  .trust-scope--{{ id }} .payment-methods__icons .payment-icon img {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 20px;
    object-fit: contain;
    display: block;
  }
  @media screen and (max-width: 768px) {
    .trust-scope--{{ id }} .trust-container {
      max-width: 100%;
      padding: calc(var(--trust-container-padding, 18px) * 0.85);
    }
    .trust-scope--{{ id }} .trustscore,
    .trust-scope--{{ id }} .free-delivery,
    .trust-scope--{{ id }} .guarantee {
      font-size: calc(var(--trust-container-font-size, 14px) * 0.9);
    }
    .trust-scope--{{ id }} .section-divider {
      margin: calc(var(--trust-container-divider-margin, 20px) * 0.8) 0;
    }
  }
</style>
  <div
    class="trust-container-block"
    data-block-type="trust-container"
    data-bg-color="{{ bg_color | default: '#FFFFFF' }}"
    data-border-color="{{ border_color | default: '#e8e8ec' }}"
    data-text-color="{{ text_color | default: '#0a0a0a' }}"
    data-rating-color="{{ rating_color | default: '#0a0a0a' }}"
    data-divider-color="{{ divider_color | default: '#e8e8ec' }}"
    data-padding="{{ padding | default: '18' }}"
    data-border-radius="{{ border_radius | default: '12' }}"
    data-star-size="{{ star_size | default: '16' }}"
    data-star-gap="{{ star_gap | default: '8' }}"
    data-font-size="{{ font_size | default: '14' }}"
    data-margin-top="{{ margin_top | default: '0' }}"
    data-margin-bottom="{{ margin_bottom | default: '0' }}"
    data-divider-margin="{{ divider_margin | default: '20' }}"
    data-star-color="{{ star_color | default: '#00B67A' }}"
  >
    <div class="trust-container" style="--trust-container-star-color: {{ star_color | default: '#00B67A' }};">
      <div class="trustscore-container">
        <div class="trustscore-stars-svg" aria-hidden="true">
          <svg 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>
          <svg 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>
          <svg 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>
          <svg 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>
          <svg 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>
        </div>
        <div class="trustscore">
          <span class="trustscore-rating">{{ rating | default: '4.8' }}</span>
          <span class="trustscore-separator">|</span>
          <span class="trustscore-reviews">{{ reviews_label | default: '1,322 verified reviews' }}</span>
        </div>
      </div>
      <hr class="section-divider" />
      <p class="free-delivery"><strong>{{ delivery_title | default: 'Free delivery' }}</strong> {{ delivery_body | default: 'on orders over $50' }}</p>
      <hr class="section-divider" />
      <p class="guarantee"><strong>{{ guarantee_title | default: '30-day guarantee' }}</strong> {{ guarantee_body | default: '— full refund, no hassle' }}</p>
      <hr class="section-divider" />
      <div class="payment-methods">
        <div class="payment-methods__icons">
          <span class="payment-icon"><img src="https://raw.githubusercontent.com/activemerchant/payment_icons/master/app/assets/images/payment_icons/visa.svg" alt="" width="32" height="20" loading="lazy" /></span>
          <span class="payment-icon"><img src="https://raw.githubusercontent.com/activemerchant/payment_icons/master/app/assets/images/payment_icons/master.svg" alt="" width="32" height="20" loading="lazy" /></span>
          <span class="payment-icon"><img src="https://raw.githubusercontent.com/activemerchant/payment_icons/master/app/assets/images/payment_icons/american_express.svg" alt="" width="32" height="20" loading="lazy" /></span>
          <span class="payment-icon"><img src="https://raw.githubusercontent.com/activemerchant/payment_icons/master/app/assets/images/payment_icons/paypal.svg" alt="" width="32" height="20" loading="lazy" /></span>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function () {
      var root = document.getElementById('trust-root-{{ id }}');
      if (!root) return;
      var block = root.querySelector('.trust-container-block');
      if (!block) return;
      var d = block.dataset;
      block.style.setProperty('--trust-container-bg-color', d.bgColor || '#FFFFFF');
      block.style.setProperty('--trust-container-border-color', d.borderColor || '#e8e8ec');
      block.style.setProperty('--trust-container-text-color', d.textColor || '#0a0a0a');
      block.style.setProperty('--trust-container-rating-color', d.ratingColor || '#0a0a0a');
      block.style.setProperty('--trust-container-divider-color', d.dividerColor || '#e8e8ec');
      block.style.setProperty('--trust-container-padding', (d.padding || '18') + 'px');
      block.style.setProperty('--trust-container-border-radius', (d.borderRadius || '12') + 'px');
      block.style.setProperty('--trust-container-star-size', (d.starSize || '16') + 'px');
      block.style.setProperty('--trust-container-star-gap', (d.starGap || '8') + 'px');
      block.style.setProperty('--trust-container-font-size', (d.fontSize || '14') + 'px');
      block.style.setProperty('--trust-container-margin-top', (d.marginTop || '0') + 'px');
      block.style.setProperty('--trust-container-margin-bottom', (d.marginBottom || '0') + 'px');
      block.style.setProperty('--trust-container-divider-margin', (d.dividerMargin || '20') + 'px');
      var sc = d.starColor || '#00B67A';
      block.style.setProperty('--trust-container-star-color', sc);
      var inner = block.querySelector('.trust-container');
      if (inner) inner.style.setProperty('--trust-container-star-color', sc);
    })();
  </script>
</div>

Trust container

Rating, perks, and payment row in one card.

4.8 | 1,322 verified reviews

Free delivery on orders over $50

30-day guarantee — full refund, no hassle

<div class="amose-ben amose-ben--{{ id }}" style="
  --ben-gap: {{ row_gap | default: '10' }}px;
  --ben-icon: {{ icon_color | default: '#16a34a' }};
  --ben-text: {{ text_color | default: '#171717' }};
  font-size: {{ font_size | default: '14' }}px;
">
  <style>
    .amose-ben--{{ id }} .amose-ben__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ben-gap); width: fit-content; max-width: 100%; margin-inline: auto; }
    .amose-ben--{{ id }} .amose-ben__row { display: grid; grid-template-columns: 1.15em minmax(0, 1fr); column-gap: 0.55em; align-items: start; }
    .amose-ben--{{ id }} .amose-ben__check { width: 1.15em; height: 1.15em; color: var(--ben-icon); margin-top: 0.14em; justify-self: start; }
    .amose-ben--{{ id }} .amose-ben__text { color: var(--ben-text); line-height: 1.45; margin: 0; }
  </style>
  <ul class="amose-ben__list" role="list">
    <li class="amose-ben__row">
      <svg class="amose-ben__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
      <p class="amose-ben__text">{{ benefit_1 | default: 'Free shipping on orders over $50' }}</p>
    </li>
    <li class="amose-ben__row">
      <svg class="amose-ben__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
      <p class="amose-ben__text">{{ benefit_2 | default: '30-day hassle-free returns' }}</p>
    </li>
    <li class="amose-ben__row">
      <svg class="amose-ben__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
      <p class="amose-ben__text">{{ benefit_3 | default: 'Secure checkout & buyer protection' }}</p>
    </li>
  </ul>
</div>

Benefit checkmarks

Three lines with check icons.

Free shipping on orders over $50
30-day hassle-free returns
Secure checkout & buyer protection

{% comment %}
  Benefits 2 — 2×2 grid, dashed rounded pills, circular check icons. Data attrs drive JS → CSS variables.
  Pass: id, benefit_1…benefit_4, font_size_desktop, font_size_mobile, text_color, checkmark_bg_color, checkmark_color,
  border_color, border_style, border_width, border_radius, gap, margin_top, margin_bottom.
{% endcomment %}
<div
  id="benefits-2-root-{{ id }}"
  class="benefits-2-root benefits-2-root--{{ id }}"
  data-block-type="benefits-2"
  data-font-size-desktop="{{ font_size_desktop | default: '13' }}"
  data-font-size-mobile="{{ font_size_mobile | default: '13' }}"
  data-text-color="{{ text_color | default: '#000000' }}"
  data-checkmark-bg-color="{{ checkmark_bg_color | default: '#000000' }}"
  data-checkmark-color="{{ checkmark_color | default: '#FFFFFF' }}"
  data-border-color="{{ border_color | default: '#000000' }}"
  data-border-style="{{ border_style | default: 'dashed' }}"
  data-border-width="{{ border_width | default: '1' }}"
  data-border-radius="{{ border_radius | default: '20' }}"
  data-gap="{{ gap | default: '10' }}"
  data-margin-top="{{ margin_top | default: '0' }}"
  data-margin-bottom="{{ margin_bottom | default: '0' }}"
>
  <style>
    .benefits-2-root--{{ id }} .benefits-2-container {
      width: 100%;
      margin-top: var(--benefits-2-margin-top, 0px);
      margin-bottom: var(--benefits-2-margin-bottom, 0px);
    }
    .benefits-2-root--{{ id }} .benefits-2-grid {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: var(--benefits-2-gap, 10px);
      width: 100%;
      justify-content: start;
      align-items: start;
    }
    .benefits-2-root--{{ id }} .benefit-2-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      padding: 8px;
      border: var(--benefits-2-border-width, 1px) var(--benefits-2-border-style, dashed) var(--benefits-2-border-color, #000000);
      border-radius: var(--benefits-2-border-radius, 20px);
      background: transparent;
      gap: 8px;
      width: fit-content;
      min-width: 0;
    }
    .benefits-2-root--{{ id }} .benefit-2-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--benefits-2-checkmark-bg-color, #000000);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .benefits-2-root--{{ id }} .benefit-2-icon .checkmark-svg {
      width: 12px;
      height: 12px;
      color: var(--benefits-2-checkmark-color, #FFFFFF);
      fill: var(--benefits-2-checkmark-color, #FFFFFF);
    }
    .benefits-2-root--{{ id }} .benefit-2-text {
      font-size: var(--benefits-2-font-size-desktop, 13px);
      color: var(--benefits-2-text-color, #000000);
      line-height: 1.4;
      font-weight: 400;
      margin: 0;
      white-space: nowrap;
    }
    @media screen and (max-width: 768px) {
      .benefits-2-root--{{ id }} .benefits-2-grid {
        grid-template-columns: repeat(2, auto);
        gap: var(--benefits-2-gap, 10px);
        row-gap: var(--benefits-2-gap, 10px);
        justify-content: start;
      }
      .benefits-2-root--{{ id }} .benefit-2-item { padding: 8px; gap: 8px; }
      .benefits-2-root--{{ id }} .benefit-2-icon { width: 18px; height: 18px; }
      .benefits-2-root--{{ id }} .benefit-2-icon .checkmark-svg { width: 10px; height: 10px; }
      .benefits-2-root--{{ id }} .benefit-2-text {
        font-size: var(--benefits-2-font-size-mobile, 13px);
        white-space: normal;
      }
    }
    @media screen and (max-width: 480px) {
      .benefits-2-root--{{ id }} .benefits-2-grid {
        grid-template-columns: repeat(2, auto);
        gap: var(--benefits-2-gap, 10px);
        row-gap: var(--benefits-2-gap, 10px);
        justify-content: start;
      }
    }
  </style>
  <div class="benefits-2-container">
    <div class="benefits-2-grid" role="list">
      <div class="benefit-2-item" role="listitem">
        <div class="benefit-2-icon" aria-hidden="true">
          <svg class="checkmark-svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
        </div>
        <p class="benefit-2-text">{{ benefit_1 | default: 'Free Shipping' }}</p>
      </div>
      <div class="benefit-2-item" role="listitem">
        <div class="benefit-2-icon" aria-hidden="true">
          <svg class="checkmark-svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
        </div>
        <p class="benefit-2-text">{{ benefit_2 | default: '30 Days Guarantee' }}</p>
      </div>
      <div class="benefit-2-item" role="listitem">
        <div class="benefit-2-icon" aria-hidden="true">
          <svg class="checkmark-svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
        </div>
        <p class="benefit-2-text">{{ benefit_3 | default: 'Secure checkout' }}</p>
      </div>
      <div class="benefit-2-item" role="listitem">
        <div class="benefit-2-icon" aria-hidden="true">
          <svg class="checkmark-svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
        </div>
        <p class="benefit-2-text">{{ benefit_4 | default: 'Buyer protection' }}</p>
      </div>
    </div>
  </div>
  <script>
    (function () {
      var root = document.getElementById('benefits-2-root-{{ id }}');
      if (!root) return;
      var block = root.querySelector('.benefits-2-container');
      if (!block) return;
      var blockElement = block.closest('[data-block-type="benefits-2"]') || block;
      var d = blockElement.dataset;
      var fontSizeDesktop = d.fontSizeDesktop || '13';
      var fontSizeMobile = d.fontSizeMobile || '13';
      var textColor = d.textColor || '#000000';
      var checkmarkBgColor = d.checkmarkBgColor || '#000000';
      var checkmarkColor = d.checkmarkColor || '#FFFFFF';
      var borderColor = d.borderColor || '#000000';
      var borderStyle = d.borderStyle || 'dashed';
      var borderWidth = d.borderWidth || '1';
      var borderRadius = d.borderRadius || '20';
      var gap = d.gap || '10';
      var marginTop = d.marginTop || '0';
      var marginBottom = d.marginBottom || '0';
      block.style.setProperty('--benefits-2-font-size-desktop', fontSizeDesktop + 'px');
      block.style.setProperty('--benefits-2-font-size-mobile', fontSizeMobile + 'px');
      block.style.setProperty('--benefits-2-text-color', textColor);
      block.style.setProperty('--benefits-2-checkmark-bg-color', checkmarkBgColor);
      block.style.setProperty('--benefits-2-checkmark-color', checkmarkColor);
      block.style.setProperty('--benefits-2-border-color', borderColor);
      block.style.setProperty('--benefits-2-border-style', borderStyle);
      block.style.setProperty('--benefits-2-border-width', borderWidth + 'px');
      block.style.setProperty('--benefits-2-border-radius', borderRadius + 'px');
      block.style.setProperty('--benefits-2-gap', gap + 'px');
      block.style.setProperty('--benefits-2-margin-top', marginTop + 'px');
      block.style.setProperty('--benefits-2-margin-bottom', marginBottom + 'px');
    })();
  </script>
</div>

Benefits 2 (dashed grid)

2×2 dashed pills; styles from data-*.

Free Shipping

30 Days Guarantee

Secure checkout

Buyer protection

{% assign day_seed = 'now' | date: '%j' | plus: 0 %}
{% assign stock_left = day_seed | modulo: 11 | plus: 5 %}

<div class="amose-stk amose-stk--{{ id }}" data-min="{{ stock_min | default: '4' }}" data-max="{{ stock_max | default: '22' }}" style="
  --stk-accent: {{ accent_color | default: '#dc2626' }};
  --stk-text: {{ text_color | default: '#171717' }};
  font-size: {{ font_size | default: '14' }}px;
">
  <style>
    @keyframes amose-stk-pulse--{{ id }} {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.45); opacity: 0.55; }
    }
    .amose-stk--{{ id }} .amose-stk__inner { display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap; }
    .amose-stk--{{ id }} .amose-stk__dot {
      width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--stk-accent);
      animation: amose-stk-pulse--{{ id }} 1.35s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .amose-stk--{{ id }} .amose-stk__dot { animation: none; opacity: 1; }
    }
    .amose-stk--{{ id }} .amose-stk__line { margin: 0; color: var(--stk-text); line-height: 1.45; }
    .amose-stk--{{ id }} .amose-stk__num { font-weight: 700; color: var(--stk-accent); }
  </style>
  <div class="amose-stk__inner">
    <span class="amose-stk__dot" aria-hidden="true"></span>
    <p class="amose-stk__line">
      <span class="amose-stk__num" data-amose-stk>{{ stock_left }}</span>
      {{ stock_suffix | default: 'left in stock — order soon.' }}
    </p>
  </div>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-stk--{{ id }}');
      if (!root) return;
      var el = root.querySelector('[data-amose-stk]');
      if (!el) return;
      var min = parseInt(root.getAttribute('data-min'), 10) || 4;
      var max = parseInt(root.getAttribute('data-max'), 10) || 22;
      if (max < min) max = min;
      var stepMs = {{ step_ms | default: 160 }};
      var pauseMin = {{ pause_min_ms | default: 2200 }};
      var pauseExtra = {{ pause_extra_ms | default: 3800 }};
      var current = parseInt(el.textContent.replace(/\D/g, ''), 10);
      if (isNaN(current)) current = Math.round((min + max) / 2);
      current = Math.min(max, Math.max(min, current));
      el.textContent = String(current);
      var target = current;
      var idleUntil = 0;
      var resting = true;
      function pickTarget() {
        if (current <= min) {
          target = current;
          return;
        }
        var hi = current - 1;
        if (hi < min) {
          target = current;
          return;
        }
        target = min + Math.floor(Math.random() * (hi - min + 1));
      }
      setInterval(function () {
        var now = Date.now();
        if (current === target) {
          if (resting && now >= idleUntil) {
            pickTarget();
            if (current === target) {
              idleUntil = now + 900;
            } else {
              resting = false;
            }
          }
          return;
        }
        if (current > target) current--;
        el.textContent = String(current);
        if (current === target) {
          idleUntil = now + pauseMin + Math.random() * pauseExtra;
          resting = true;
        }
      }, stepMs);
    })();
  </script>
</div>

Stock urgency pulse

Pulse dot + stock count (steps down only).

12 left in stock — order soon.

<div class="amose-ship amose-ship--{{ id }}" data-transit-min="{{ transit_min | default: '3' }}" data-transit-max="{{ transit_max | default: '6' }}" style="
  --ship-muted: {{ muted_color | default: '#525252' }};
  --ship-fg: {{ text_color | default: '#171717' }};
  font-size: {{ font_size | default: '14' }}px;
">
  <style>
    .amose-ship--{{ id }} .amose-ship__text { margin: 0; line-height: 1.5; color: var(--ship-muted); }
    .amose-ship--{{ id }} .amose-ship__lead { color: var(--ship-fg); font-weight: 600; }
    .amose-ship--{{ id }} .amose-ship__date { color: var(--ship-fg); font-weight: 600; }
  </style>
  <p class="amose-ship__text">
    <span class="amose-ship__lead">{{ line_lead | default: 'Get your order on' }}</span>
    <span class="amose-ship__date" data-amose-ship-date></span>
  </p>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-ship--{{ id }}');
      if (!root) return;
      var out = root.querySelector('[data-amose-ship-date]');
      if (!out) return;
      var minD = parseInt(root.getAttribute('data-transit-min'), 10) || 3;
      var maxD = parseInt(root.getAttribute('data-transit-max'), 10) || 6;
      if (maxD < minD) maxD = minD;
      var today = new Date();
      today.setHours(0, 0, 0, 0);
      var seed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
      var span = minD + (seed % (maxD - minD + 1 || 1));
      var d = new Date(today);
      var added = 0;
      while (added < span) {
        d.setDate(d.getDate() + 1);
        var wd = d.getDay();
        if (wd !== 0 && wd !== 6) added++;
      }
      var opts = { weekday: 'long', month: 'long', day: 'numeric' };
      try {
        out.textContent = ' ' + d.toLocaleDateString('en-US', opts);
      } catch (e) {
        out.textContent = ' ' + d.toDateString();
      }
    })();
  </script>
</div>

Shipping estimate

Ship-by date from business days.

Get your order on

{% comment %}
  Shipping pill — unique `id`. White capsule: status dot, ship-by date (business days), optional flag, FREE Shipping line.
{% endcomment %}
<div
  class="amose-shippill amose-shippill--{{ id }}"
  data-transit-min="{{ transit_min | default: '3' }}"
  data-transit-max="{{ transit_max | default: '6' }}"
  style="
    --spill-bg: {{ pill_bg | default: '#ffffff' }};
    --spill-border: {{ pill_border | default: 'rgba(0, 0, 0, 0.08)' }};
    --spill-fg: {{ text_color | default: '#171717' }};
    --spill-dot: {{ dot_color | default: '#22c55e' }};
    --spill-shadow: {{ pill_shadow | default: '0 1px 2px rgba(10, 10, 10, 0.05)' }};
    font-size: {{ font_size | default: '14' }}px;
  "
>
  <style>
    .amose-shippill--{{ id }} {
      width: 100%;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
    }
    .amose-shippill--{{ id }} .amose-shippill__pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: {{ pill_gap | default: '8' }}px;
      max-width: 100%;
      padding: {{ pill_pad_y | default: '10' }}px {{ pill_pad_x | default: '14' }}px;
      background: var(--spill-bg);
      border: 1px solid var(--spill-border);
      border-radius: 999px;
      box-shadow: var(--spill-shadow);
      color: var(--spill-fg);
      line-height: 1.35;
      font-size: 1em;
    }
    .amose-shippill--{{ id }} .amose-shippill__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--spill-dot);
      flex-shrink: 0;
    }
    .amose-shippill--{{ id }} .amose-shippill__ships {
      font-weight: 500;
      white-space: nowrap;
    }
    .amose-shippill--{{ id }} .amose-shippill__ships-date {
      font-weight: 600;
    }
    .amose-shippill--{{ id }} .amose-shippill__flag {
      flex-shrink: 0;
      line-height: 0;
      display: flex;
      align-items: center;
    }
    .amose-shippill--{{ id }} .amose-shippill__flag-svg {
      width: {{ flag_size | default: '18' }}px;
      height: {{ flag_size | default: '18' }}px;
      display: block;
      border-radius: 50%;
    }
    .amose-shippill--{{ id }} .amose-shippill__free {
      white-space: nowrap;
    }
    .amose-shippill--{{ id }} .amose-shippill__free strong {
      font-weight: 700;
    }
  </style>
  <div class="amose-shippill__pill">
    <span class="amose-shippill__dot" aria-hidden="true"></span>
    <span class="amose-shippill__ships">
      {{ ships_lead | default: 'Ships by' }}
      <span class="amose-shippill__ships-date" data-amose-shippill-date></span>
    </span>
    {% if show_flag != false %}
    <span class="amose-shippill__flag" aria-hidden="true">
      <svg class="amose-shippill__flag-svg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <defs><clipPath id="amose-shippill-flag-{{ id }}"><circle cx="10" cy="10" r="10"/></clipPath></defs>
        <g clip-path="url(#amose-shippill-flag-{{ id }})">
          <rect width="20" height="20" fill="#B22234"/>
          <path fill="#fff" d="M0 2.3h20v1.7H0zm0 3.4h20v1.7H0zm0 3.4h20v1.7H0zm0 3.4h20v1.7H0zm0 3.4h20v1.7H0z"/>
          <rect width="9" height="8" fill="#3C3B6E"/>
        </g>
        <circle cx="10" cy="10" r="9.35" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="0.5"/>
      </svg>
    </span>
    {% endif %}
    <span class="amose-shippill__free"><strong>{{ free_label | default: 'FREE Shipping' }}</strong></span>
  </div>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-shippill--{{ id }}');
      if (!root) return;
      var out = root.querySelector('[data-amose-shippill-date]');
      if (!out) return;
      var minD = parseInt(root.getAttribute('data-transit-min'), 10) || 3;
      var maxD = parseInt(root.getAttribute('data-transit-max'), 10) || 6;
      if (maxD < minD) maxD = minD;
      var today = new Date();
      today.setHours(0, 0, 0, 0);
      var seed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
      var span = minD + (seed % (maxD - minD + 1 || 1));
      var d = new Date(today);
      var added = 0;
      while (added < span) {
        d.setDate(d.getDate() + 1);
        var wd = d.getDay();
        if (wd !== 0 && wd !== 6) added++;
      }
      var opts = { weekday: 'short', month: 'long', day: 'numeric' };
      try {
        out.textContent = d.toLocaleDateString('en-US', opts);
      } catch (e) {
        out.textContent = d.toDateString();
      }
    })();
  </script>
</div>

Shipping pill badge

White pill: live ship-by date, flag, FREE Shipping.

Ships by FREE Shipping

{% comment %}
  Order status timeline — unique `id`. Three steps with icons, dates, and labels; connector lines between circles.
{% endcomment %}
<div
  class="amose-track amose-track--{{ id }}"
  style="
    --track-accent: {{ accent_color | default: '#4c1d95' }};
    --track-icon-bg: {{ icon_bg_color | default: '#f3e8ff' }};
    --track-line: {{ line_color | default: '#e9d5ff' }};
    --track-icon-size: {{ icon_size | default: '36' }}px;
    font-size: {{ font_size | default: '14' }}px;
  "
>
  <style>
    .amose-track--{{ id }} { width: 100%; box-sizing: border-box; color: var(--track-accent); }
    .amose-track--{{ id }} .amose-track__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      width: 100%;
      align-items: flex-start;
    }
    .amose-track--{{ id }} .amose-track__item {
      flex: 1 1 0;
      position: relative;
      text-align: center;
      min-width: 0;
      padding: 0 2px;
    }
    .amose-track--{{ id }} .amose-track__item:not(:last-child)::after {
      content: '';
      position: absolute;
      top: calc(var(--track-icon-size) / 2);
      left: calc(50% + var(--track-icon-size) / 2);
      width: calc(100% - var(--track-icon-size));
      height: 2px;
      background: var(--track-line);
      z-index: 0;
      transform: translateY(-50%);
    }
    .amose-track--{{ id }} .amose-track__icon-ring {
      position: relative;
      z-index: 1;
      width: var(--track-icon-size);
      height: var(--track-icon-size);
      margin: 0 auto 0.65em;
      border-radius: 50%;
      background: var(--track-icon-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--track-accent);
    }
    .amose-track--{{ id }} .amose-track__icon-ring svg {
      width: 55%;
      height: 55%;
      display: block;
    }
    .amose-track--{{ id }} .amose-track__date {
      margin: 0;
      font-size: 0.92em;
      font-weight: 500;
      color: var(--track-accent);
      line-height: 1.25;
    }
    .amose-track--{{ id }} .amose-track__status {
      margin: 0.15em 0 0;
      font-size: 1.05em;
      font-weight: 700;
      color: var(--track-accent);
      line-height: 1.2;
    }
  </style>
  <ol class="amose-track__list" role="list">
    <li class="amose-track__item">
      <div class="amose-track__icon-ring" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3.5 9.5h17" stroke="currentColor" stroke-width="1.5"/><path d="M8 3v3.5M16 3v3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9.2 14.2l1.8 1.8 4.1-4.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <p class="amose-track__date">{{ step1_date | default: '12 Apr.' }}</p>
      <p class="amose-track__status">{{ step1_label | default: 'Order placed' }}</p>
    </li>
    <li class="amose-track__item">
      <div class="amose-track__icon-ring" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 13h10.5v5.5H2V13z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12.5 16h3.8l3.2-3.2V11h-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="5.5" cy="19" r="1.2" fill="currentColor"/><circle cx="17" cy="19" r="1.2" fill="currentColor"/><path d="M16.5 9l2-2M18.5 10l2-2M20.5 11l2-2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
      </div>
      <p class="amose-track__date">{{ step2_date | default: '13 Apr.' }}</p>
      <p class="amose-track__status">{{ step2_label | default: 'Order dispatches' }}</p>
    </li>
    <li class="amose-track__item">
      <div class="amose-track__icon-ring" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 3.5l7.5 4v9l-7.5 4-7.5-4v-9l7.5-4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 21V12M4.5 7.5L12 12l7.5-4.5" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
      </div>
      <p class="amose-track__date">{{ step3_date | default: '15 Apr.' }}</p>
      <p class="amose-track__status">{{ step3_label | default: 'Delivered!' }}</p>
    </li>
  </ol>
</div>

Order status timeline

Three purple steps: placed → dispatch → delivered.

12 Apr.

Order placed
13 Apr.

Order dispatches
15 Apr.

Delivered!

{% comment %}
  Delivery countdown — set a unique `id`. delivery_days: calendar days from today. countdown_hours: order window.
{% endcomment %}
<div
  class="amose-delivery amose-delivery--{{ id }}"
  data-delivery-days="{{ delivery_days | default: 3 }}"
  data-countdown-hours="{{ countdown_hours | default: 1 }}"
  style="
    --delivery-accent: {{ accent_color | default: '#2E2A39' }};
    --delivery-text: {{ text_color | default: '#000000' }};
    font-size: {{ font_size | default: '14' }}px;
  "
>
  <section class="amose-delivery__section">
    <div class="amose-delivery__countdown">
      <p>
        {{ line_want | default: 'Want it by' }}
        <span class="amose-delivery__emph" data-amose-delivery-date></span>?
      </p>
      <p class="amose-delivery__cta">
        {{ line_order | default: 'Order within' }}
        <span class="amose-delivery__emph" data-amose-delivery-countdown></span>
      </p>
    </div>
  </section>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-delivery--{{ id }}');
      if (!root) return;
      var dateEl = root.querySelector('[data-amose-delivery-date]');
      var timerEl = root.querySelector('[data-amose-delivery-countdown]');
      if (!dateEl || !timerEl) return;

      var daysAhead = parseInt(root.getAttribute('data-delivery-days'), 10);
      if (isNaN(daysAhead) || daysAhead < 0) daysAhead = 3;
      var hoursWindow = parseFloat(root.getAttribute('data-countdown-hours'));
      if (isNaN(hoursWindow) || hoursWindow <= 0) hoursWindow = 1;

      var delivery = new Date();
      delivery.setDate(delivery.getDate() + daysAhead);
      var opts = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
      try {
        dateEl.textContent = delivery.toLocaleDateString('en-US', opts);
      } catch (e) {
        dateEl.textContent = delivery.toDateString();
      }

      var countdownMs = Math.round(hoursWindow * 60 * 60 * 1000);
      var expiredMsg = {{ countdown_expired | default: 'Time is up' | json }};

      function render(ms) {
        if (ms <= 0) {
          timerEl.textContent = expiredMsg;
          return;
        }
        var h = Math.floor(ms / (1000 * 60 * 60));
        var m = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60));
        var parts = [];
        if (h > 0) parts.push(h + (h === 1 ? ' hour' : ' hours'));
        if (m > 0 || h === 0) parts.push(m + (m === 1 ? ' minute' : ' minutes'));
        timerEl.textContent = parts.join(' ');
      }

      render(countdownMs);
      var iv = setInterval(function () {
        countdownMs -= 1000;
        if (countdownMs <= 0) {
          clearInterval(iv);
          render(0);
        } else {
          render(countdownMs);
        }
      }, 1000);
    })();
  </script>
</div>

Delivery countdown

Ship-by line plus live countdown window.

Want it by ?

Order within

{% comment %}
  Sale countdown bar — unique `id`. Label row + MM : SS + pill progress bar.
  Optional sale_end_unix (seconds) for fixed end; otherwise countdown restarts from snippet load for demo.
  sale_duration_ms: bar denominator (default 3180000 ≈ 53 min). progress_percent: fallback bar width if no JS.
{% endcomment %}
<div
  class="amose-salecd amose-salecd--{{ id }}"
  data-block-type="sale-countdown"
  {% if sale_end_unix != blank %}data-end-ms="{{ sale_end_unix | times: 1000 }}"{% endif %}
  data-total-ms="{{ sale_duration_ms | default: 3180000 }}"
  style="
    --salecd-fill-pct: {{ progress_percent | default: 78 }}%;
    --salecd-bar-fill: {{ bar_fill | default: '#000000' }};
    --salecd-track-bg: {{ bar_track | default: '#e8e8e8' }};
    --salecd-label-color: {{ label_color | default: '#000000' }};
    --salecd-time-color: {{ time_color | default: '#000000' }};
    --salecd-label-size: {{ label_size | default: '14' }}px;
    --salecd-time-size: {{ time_size | default: '14' }}px;
    --salecd-bar-height: {{ bar_height | default: '7' }}px;
    --salecd-margin-top: {{ margin_top | default: '0' }}px;
    --salecd-margin-bottom: {{ margin_bottom | default: '0' }}px;
  "
>
  <div class="amose-salecd__row">
    <p class="amose-salecd__label">{{ label | default: 'Hurry up! Sale ends in:' }}</p>
    <p class="amose-salecd__time" data-amose-salecd-time aria-live="polite">41 : 10</p>
  </div>
  <div class="amose-salecd__track" aria-hidden="true">
    <span class="amose-salecd__fill" data-amose-salecd-fill></span>
  </div>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-salecd--{{ id }}');
      if (!root) return;
      var timeEl = root.querySelector('[data-amose-salecd-time]');
      var fillEl = root.querySelector('[data-amose-salecd-fill]');
      var endRaw = root.getAttribute('data-end-ms');
      var totalRaw = root.getAttribute('data-total-ms');
      var endMs = parseInt(endRaw, 10);
      if (isNaN(endMs) || endMs <= Date.now()) {
        endMs = Date.now() + (41 * 60 + 10) * 1000;
      }
      var totalMs = parseInt(totalRaw, 10);
      if (isNaN(totalMs) || totalMs <= 0) totalMs = 53 * 60 * 1000;
      function pad(n) {
        return n < 10 ? '0' + n : String(n);
      }
      var iv = null;
      function tick() {
        var rem = Math.max(0, endMs - Date.now());
        var m = Math.floor(rem / 60000);
        var s = Math.floor((rem % 60000) / 1000);
        if (timeEl) timeEl.textContent = m + ' : ' + pad(s);
        if (fillEl) {
          var pct = Math.min(100, Math.max(0, (rem / totalMs) * 100));
          fillEl.style.width = pct + '%';
        }
        if (rem <= 0 && iv) clearInterval(iv);
      }
      tick();
      iv = setInterval(tick, 1000);
    })();
  </script>
</div>

Sale countdown bar

Headline, bold timer (MM : SS), black pill progress on gray track.

Hurry up! Sale ends in:

41 : 10

{% comment %}
  Ticket coupon — unique `id`. Black ticket, side notches, dashed divider, Copy copies discount_code.
{% endcomment %}
<div
  class="amose-ticket amose-ticket--{{ id }}"
  data-block-type="discount-ticket"
  data-code="{{ discount_code | default: '20OFF' }}"
  style="
    --ticket-bg: {{ ticket_bg | default: '#000000' }};
    --ticket-fg: {{ ticket_fg | default: '#ffffff' }};
    --ticket-notch-bg: {{ notch_bg | default: '#ffffff' }};
    --ticket-dash: {{ dash_color | default: 'rgba(255,255,255,0.55)' }};
    --ticket-btn-bg: {{ btn_bg | default: '#ffffff' }};
    --ticket-btn-fg: {{ btn_fg | default: '#000000' }};
    --ticket-radius: {{ radius | default: '12' }}px;
    --ticket-line1-size: {{ line1_size | default: '14' }}px;
    --ticket-line2-size: {{ line2_size | default: '13' }}px;
    --ticket-btn-size: {{ btn_size | default: '13' }}px;
    --ticket-notch-r: {{ notch_radius | default: '7' }}px;
    --ticket-margin-top: {{ margin_top | default: '0' }}px;
    --ticket-margin-bottom: {{ margin_bottom | default: '0' }}px;
  "
>
  <span class="amose-ticket__notch amose-ticket__notch--left" aria-hidden="true"></span>
  <span class="amose-ticket__notch amose-ticket__notch--right" aria-hidden="true"></span>
  <div class="amose-ticket__inner">
    <div class="amose-ticket__copy">
      <p class="amose-ticket__line1">{{ line_intro | default: 'Now:' }} <strong>{{ discount_label | default: '20% OFF' }}</strong></p>
      <p class="amose-ticket__line2">{{ code_intro | default: 'Code:' }} <em>{{ discount_code | default: '20OFF' }}</em></p>
    </div>
    <div class="amose-ticket__divider" aria-hidden="true"></div>
    <div class="amose-ticket__action">
      <button type="button" class="amose-ticket__btn" data-amose-ticket-copy aria-label="Copy discount code">
        <span class="amose-ticket__btn-label">Copy</span>
        <span class="amose-ticket__btn-icons" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"/></svg>
        </span>
      </button>
    </div>
  </div>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-ticket--{{ id }}');
      if (!root) return;
      var btn = root.querySelector('[data-amose-ticket-copy]');
      if (!btn) return;
      var code = (root.getAttribute('data-code') || '').trim();
      var labelEl = btn.querySelector('.amose-ticket__btn-label');
      btn.addEventListener('click', function () {
        if (!code) return;
        function done(ok) {
          if (!labelEl || !ok) return;
          if (!labelEl.getAttribute('data-prev-label')) {
            labelEl.setAttribute('data-prev-label', labelEl.textContent);
          }
          labelEl.textContent = 'Copied!';
          window.setTimeout(function () {
            labelEl.textContent = labelEl.getAttribute('data-prev-label') || 'Copy';
          }, 1600);
        }
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(code).then(function () { done(true); }).catch(function () { done(false); });
        } else {
          var ta = document.createElement('textarea');
          ta.value = code;
          ta.setAttribute('readonly', '');
          ta.style.position = 'fixed';
          ta.style.left = '-9999px';
          document.body.appendChild(ta);
          ta.select();
          try {
            done(document.execCommand('copy'));
          } catch (e) {
            done(false);
          }
          document.body.removeChild(ta);
        }
      });
    })();
  </script>
</div>

Discount ticket + copy

Ticket notches, dashed split, white Copy button with code to clipboard.

Now: 20% OFF

Code: 20OFF

{% comment %}
  Urgency pill banner — unique `id`. Dashed red border, pink fill, centered copy + optional emoji.
{% endcomment %}
<div
  class="amose-urgban amose-urgban--{{ id }}"
  data-block-type="urgency-pill"
  style="
    --urgban-bg: {{ bg_color | default: '#FFF5F5' }};
    --urgban-border: {{ border_color | default: '#B91C1C' }};
    --urgban-border-w: {{ border_width | default: '1' }}px;
    --urgban-text: {{ text_color | default: '#B91C1C' }};
    --urgban-bold: {{ bold_color | default: '#991B1B' }};
    --urgban-radius: {{ radius | default: '16' }}px;
    --urgban-pad-y: {{ pad_y | default: '14' }}px;
    --urgban-pad-x: {{ pad_x | default: '20' }}px;
    --urgban-line1: {{ line1_size | default: '15' }}px;
    --urgban-line2: {{ line2_size | default: '15' }}px;
    --urgban-margin-top: {{ margin_top | default: '0' }}px;
    --urgban-margin-bottom: {{ margin_bottom | default: '0' }}px;
  "
>
  <div class="amose-urgban__inner">
    <p class="amose-urgban__line1">
      <span class="amose-urgban__emoji" aria-hidden="true">{{ emoji | default: '🚨' }}</span><span class="amose-urgban__head">{{ line_before | default: "Don't be" }} <strong>{{ line_bold | default: 'the last one' }}</strong> {{ line_after | default: 'to upgrade' }}</span>
    </p>
    <p class="amose-urgban__line2">{{ subline | default: 'Last 8 restocks sold out in less than a week. Act fast.' }}</p>
  </div>
</div>

Urgency pill banner

Pink pill, dashed red border, emoji + bold hook + support line.

Don't be the last one to upgrade

Last 8 restocks sold out in less than a week. Act fast.

{% comment %}
  Free trial callout — set a unique `id`. Icon + line; tune colors and gap with Liquid.
{% endcomment %}
<div class="amose-trial amose-trial--{{ id }}" style="
  --trial-icon: {{ icon_color | default: '#1D9BF0' }};
  --trial-text: {{ text_color | default: '#0a0a0a' }};
  --trial-gap: {{ row_gap | default: '12' }}px;
  font-size: {{ font_size | default: '15' }}px;
">
  <style>
    .amose-trial--{{ id }} .amose-trial__row {
      display: flex;
      align-items: center;
      gap: var(--trial-gap);
      flex-wrap: wrap;
    }
    .amose-trial--{{ id }} .amose-trial__icon {
      flex-shrink: 0;
      line-height: 0;
      color: var(--trial-icon);
    }
    .amose-trial--{{ id }} .amose-trial__icon svg {
      width: 1.08em;
      height: 1.08em;
      display: block;
    }
    .amose-trial--{{ id }} .amose-trial__text {
      margin: 0;
      color: var(--trial-text);
      line-height: 1.4;
      font-weight: 500;
    }
  </style>
  <div class="amose-trial__row">
    <span class="amose-trial__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z" fill="currentColor"/>
      </svg>
    </span>
    <p class="amose-trial__text">{{ trial_text | default: 'Try for free during 30 days.' }}</p>
  </div>
</div>

Free trial callout

Shield icon + one reassurance line.

Try for free during 30 days.

<div class="amose-sben amose-sben--{{ id }}" style="
  --sben-gap: {{ row_gap | default: '10' }}px;
  --sben-icon: {{ icon_color | default: '#0a0a0a' }};
  --sben-text: {{ text_color | default: '#171717' }};
  font-size: {{ font_size | default: '14' }}px;
">
  <style>
    .amose-sben--{{ id }} .amose-sben__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sben-gap); width: fit-content; max-width: 100%; margin-inline: auto; }
    .amose-sben--{{ id }} .amose-sben__row { display: grid; grid-template-columns: 1.08em minmax(0, 1fr); column-gap: 0.55em; align-items: start; }
    .amose-sben--{{ id }} .amose-sben__icon { width: 1.08em; height: 1.08em; color: var(--sben-icon); margin-top: 0.12em; justify-self: start; line-height: 0; }
    .amose-sben--{{ id }} .amose-sben__icon svg { width: 100%; height: 100%; display: block; }
    .amose-sben--{{ id }} .amose-sben__text { color: var(--sben-text); line-height: 1.45; margin: 0; }
  </style>
  <ul class="amose-sben__list" role="list">
    <li class="amose-sben__row">
      <span class="amose-sben__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z" fill="currentColor"/>
        </svg>
      </span>
      <p class="amose-sben__text">{{ benefit_1 | default: 'Free shipping on orders over $50' }}</p>
    </li>
    <li class="amose-sben__row">
      <span class="amose-sben__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z" fill="currentColor"/>
        </svg>
      </span>
      <p class="amose-sben__text">{{ benefit_2 | default: '30-day hassle-free returns' }}</p>
    </li>
    <li class="amose-sben__row">
      <span class="amose-sben__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z" fill="currentColor"/>
        </svg>
      </span>
      <p class="amose-sben__text">{{ benefit_3 | default: 'Secure checkout & buyer protection' }}</p>
    </li>
  </ul>
</div>

Benefits (shield check)

Three benefits with shield checks.

Free shipping on orders over $50
30-day hassle-free returns
Secure checkout & buyer protection

<div class="amose-purch amose-purch--{{ id }}" style="
  --purch-ff: {{ font_stack | default: 'Arial, sans-serif' }};
  --purch-count-color: {{ count_color | default: '#000000' }};
  --purch-count-size: {{ count_size | default: '14' }}px;
  --purch-meta-size: {{ meta_size | default: '12' }}px;
  --purch-avatar: {{ avatar_size | default: '30' }}px;
  --purch-meta-gap: {{ meta_gap | default: '22' }}px;
">
  <style>
    .amose-purch--{{ id }} { font-family: var(--purch-ff); }
    .amose-purch--{{ id }} .amose-purch__widget { display: flex; align-items: center; flex-wrap: wrap; }
    .amose-purch--{{ id }} .amose-purch__avatars { display: flex; align-items: center; margin-right: 20px; }
    .amose-purch--{{ id }} .amose-purch__avatars img {
      width: var(--purch-avatar); height: var(--purch-avatar); border-radius: 50%; margin-right: -10px;
      border: 2px solid #ffffff; object-fit: cover; flex-shrink: 0;
    }
    .amose-purch--{{ id }} .amose-purch__meta {
      display: flex; align-items: center; margin-left: var(--purch-meta-gap); font-size: var(--purch-meta-size); color: inherit;
    }
    .amose-purch--{{ id }} .amose-purch__line { margin: 0; line-height: 1.35; }
    .amose-purch--{{ id }} [data-amose-purch-count] {
      font-weight: bold; color: var(--purch-count-color); font-size: var(--purch-count-size);
    }
  </style>
  <div class="amose-purch__widget">
    <div class="amose-purch__avatars">
      <img src="{{ img_1 | default: 'https://randomuser.me/api/portraits/women/12.jpg' }}" alt="" loading="lazy" width="30" height="30" />
      <img src="{{ img_2 | default: 'https://randomuser.me/api/portraits/men/45.jpg' }}" alt="" loading="lazy" width="30" height="30" />
      <img src="{{ img_3 | default: 'https://randomuser.me/api/portraits/women/68.jpg' }}" alt="" loading="lazy" width="30" height="30" />
      <div class="amose-purch__meta">
        <span class="amose-purch__line">{{ line_prefix | default: 'Amose and ' }}<span data-amose-purch-count>{{ initial_count | default: 470 }}</span>{{ line_suffix | default: ' people purchased' }}</span>
      </div>
    </div>
  </div>
  <script>
    (function () {
      var root = document.currentScript && document.currentScript.closest('.amose-purch--{{ id }}');
      if (!root) return;
      var el = root.querySelector('[data-amose-purch-count]');
      if (!el) return;
      var purchaseCount = parseInt(String(el.textContent).replace(/\D/g, ''), 10);
      if (isNaN(purchaseCount)) purchaseCount = {{ initial_count | default: 470 }};
      var delayMin = {{ delay_min_ms | default: 2000 }};
      var delaySpan = {{ delay_span_ms | default: 6000 }};
      function updatePurchaseCount() {
        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
        var incrementAmount = Math.floor(Math.random() * 3) + 1;
        purchaseCount += incrementAmount;
        el.textContent = purchaseCount;
        var nextUpdateDelay = Math.floor(Math.random() * delaySpan) + delayMin;
        setTimeout(updatePurchaseCount, nextUpdateDelay);
      }
      updatePurchaseCount();
    })();
  </script>
</div>

Purchase social proof

Avatars + live purchase counter.

Amose and 470 people purchased

<div class="amose-fav amose-fav--{{ id }}" style="
  --fav-ff: {{ font_stack | default: 'Arial, sans-serif' }};
  --fav-size: {{ font_size | default: '16' }}px;
  --fav-fg: {{ text_color | default: '#333333' }};
  --fav-highlight: {{ highlight_color | default: '#000000' }};
  --fav-icon-gap: {{ icon_gap | default: '5' }}px;
  --fav-icon-w: {{ icon_width | default: '24' }}px;
  --fav-pulse-ms: {{ pulse_ms | default: '1500' }}ms;
">
  <style>
    @keyframes amose-fav-pulse--{{ id }} {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    .amose-fav--{{ id }} .amose-fav__row {
      display: flex; align-items: center; font-family: var(--fav-ff); font-size: var(--fav-size);
      color: var(--fav-fg); margin: 2px 0;
    }
    .amose-fav--{{ id }} .amose-fav__icon { margin-right: var(--fav-icon-gap); flex-shrink: 0; line-height: 0; }
    .amose-fav--{{ id }} .amose-fav__icon img { width: var(--fav-icon-w); height: auto; display: block; }
    .amose-fav--{{ id }} .amose-fav__text { font-weight: normal; }
    .amose-fav--{{ id }} .amose-fav__highlight {
      color: var(--fav-highlight); font-weight: bold;
      animation: amose-fav-pulse--{{ id }} var(--fav-pulse-ms) ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .amose-fav--{{ id }} .amose-fav__highlight { animation: none; }
    }
  </style>
  <div class="amose-fav__row" role="status">
    <div class="amose-fav__icon" aria-hidden="true">
      <img src="{{ icon_url | default: 'https://www.svgrepo.com/show/477386/love-2.svg' }}" alt="" loading="lazy" width="24" height="24" />
    </div>
    <span class="amose-fav__text">{{ line_before | default: 'Loved product! ' }}<span class="amose-fav__highlight">{{ highlight_text | default: '1.1M people' }}</span>{{ line_after | default: ' favorited it!' }}</span>
  </div>
</div>

Favorite social line

Heart pulse + one social line.

Loved product! 1.1M people favorited it!

<div class="amose-fbviews amose-fbviews--{{ id }}" style="
  --fb-radius: {{ radius | default: '9999' }}px;
  --fb-from: {{ gradient_from | default: '#4267B2' }};
  --fb-to: {{ gradient_to | default: '#3b5998' }};
  --fb-fg: {{ text_color | default: '#ffffff' }};
  --fb-size: {{ font_size | default: '14' }}px;
  --fb-max: {{ max_width | default: '300' }}px;
  --fb-pad-y: {{ pad_y | default: '8' }}px;
  --fb-pad-x: {{ pad_x | default: '13' }}px;
  --fb-icon-gap: {{ icon_gap | default: '7' }}px;
  --fb-icon: {{ icon_size | default: '18' }}px;
  --fb-anim-s: {{ gradient_anim_s | default: '3' }}s;
">
  <style>
    @keyframes amose-fbviews-grad--{{ id }} {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .amose-fbviews--{{ id }} { width: 100%; display: flex; justify-content: center; }
    .amose-fbviews--{{ id }} .amose-fbviews__badge {
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(45deg, var(--fb-from), var(--fb-to));
      background-size: 200% 200%;
      animation: amose-fbviews-grad--{{ id }} var(--fb-anim-s) linear infinite;
      border-radius: var(--fb-radius); color: var(--fb-fg); font-size: var(--fb-size); font-weight: bold;
      padding: var(--fb-pad-y) var(--fb-pad-x); text-decoration: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
      width: fit-content; max-width: min(100%, var(--fb-max)); text-align: center; box-sizing: border-box;
    }
    @media (prefers-reduced-motion: reduce) {
      .amose-fbviews--{{ id }} .amose-fbviews__badge { animation: none; }
    }
    .amose-fbviews--{{ id }} .amose-fbviews__inner {
      white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: var(--fb-icon-gap);
    }
    .amose-fbviews--{{ id }} .amose-fbviews__icon { flex-shrink: 0; line-height: 0; color: var(--fb-fg); }
    .amose-fbviews--{{ id }} .amose-fbviews__icon svg { display: block; width: var(--fb-icon); height: auto; }
    .amose-fbviews--{{ id }} .amose-fbviews__text { line-height: 1.2; }
  </style>
  <a class="amose-fbviews__badge" href="{{ link_url | default: '#' }}"{% if link_target == '_blank' %} target="_blank" rel="noopener noreferrer"{% endif %}>
    <span class="amose-fbviews__inner">
      <span class="amose-fbviews__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M24 12.073C24 5.446 18.627 0 12 0S0 5.446 0 12.073c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
      </span>
      <span class="amose-fbviews__text">{{ badge_text | default: 'Over 4 Million Views On Facebook' }}</span>
    </span>
  </a>
</div>

Facebook views badge

Facebook-style gradient pill.

<div class="amose-tt amose-tt--{{ id }}" style="
  --tt-radius: {{ radius | default: '9999' }}px;
  --tt-from: {{ gradient_from | default: '#00f2ea' }};
  --tt-to: {{ gradient_to | default: '#ff0050' }};
  --tt-fg: {{ text_color | default: '#ffffff' }};
  --tt-size: {{ font_size | default: '14' }}px;
  --tt-max: {{ max_width | default: '300' }}px;
  --tt-pad-y: {{ pad_y | default: '8' }}px;
  --tt-pad-x: {{ pad_x | default: '13' }}px;
  --tt-icon-gap: {{ icon_gap | default: '7' }}px;
  --tt-icon: {{ icon_size | default: '18' }}px;
  --tt-anim-s: {{ gradient_anim_s | default: '3' }}s;
">
  <style>
    @keyframes amose-tt-grad--{{ id }} {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .amose-tt--{{ id }} { width: 100%; display: flex; justify-content: center; }
    .amose-tt--{{ id }} .amose-tt__badge {
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(45deg, var(--tt-from), var(--tt-to));
      background-size: 200% 200%;
      animation: amose-tt-grad--{{ id }} var(--tt-anim-s) linear infinite;
      border-radius: var(--tt-radius); color: var(--tt-fg); font-size: var(--tt-size); font-weight: bold;
      padding: var(--tt-pad-y) var(--tt-pad-x); text-decoration: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
      width: fit-content; max-width: min(100%, var(--tt-max)); text-align: center; box-sizing: border-box;
    }
    @media (prefers-reduced-motion: reduce) {
      .amose-tt--{{ id }} .amose-tt__badge { animation: none; }
    }
    .amose-tt--{{ id }} .amose-tt__inner {
      white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: var(--tt-icon-gap);
    }
    .amose-tt--{{ id }} .amose-tt__icon { flex-shrink: 0; line-height: 0; color: var(--tt-fg); }
    .amose-tt--{{ id }} .amose-tt__icon svg { display: block; width: var(--tt-icon); height: auto; }
    .amose-tt--{{ id }} .amose-tt__text { line-height: 1.2; }
  </style>
  <a class="amose-tt__badge" href="{{ link_url | default: '#' }}"{% if link_target == '_blank' %} target="_blank" rel="noopener noreferrer"{% endif %}>
    <span class="amose-tt__inner">
      <span class="amose-tt__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-2.96.37-.63.48-1.01 1.27-.97 2.07.06 1.27 1.2 2.36 2.47 2.36.89-.01 1.74-.45 2.26-1.18.45-.62.6-1.39.57-2.14.01-3.89 0-7.79.02-11.68z"/></svg>
      </span>
      <span class="amose-tt__text">{{ badge_text | default: 'Viral on TikTok' }}</span>
    </span>
  </a>
</div>

TikTok badge

TikTok-style gradient pill.

<div class="amose-ig amose-ig--{{ id }}" style="
  --ig-radius: {{ radius | default: '9999' }}px;
  --ig-from: {{ gradient_from | default: '#833AB4' }};
  --ig-mid: {{ gradient_mid | default: '#FD1D1D' }};
  --ig-to: {{ gradient_to | default: '#FCB045' }};
  --ig-fg: {{ text_color | default: '#ffffff' }};
  --ig-size: {{ font_size | default: '14' }}px;
  --ig-max: {{ max_width | default: '300' }}px;
  --ig-pad-y: {{ pad_y | default: '8' }}px;
  --ig-pad-x: {{ pad_x | default: '13' }}px;
  --ig-icon-gap: {{ icon_gap | default: '7' }}px;
  --ig-icon: {{ icon_size | default: '18' }}px;
  --ig-anim-s: {{ gradient_anim_s | default: '3' }}s;
">
  <style>
    @keyframes amose-ig-grad--{{ id }} {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .amose-ig--{{ id }} { width: 100%; display: flex; justify-content: center; }
    .amose-ig--{{ id }} .amose-ig__badge {
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(45deg, var(--ig-from), var(--ig-mid), var(--ig-to));
      background-size: 200% 200%;
      animation: amose-ig-grad--{{ id }} var(--ig-anim-s) linear infinite;
      border-radius: var(--ig-radius); color: var(--ig-fg); font-size: var(--ig-size); font-weight: bold;
      padding: var(--ig-pad-y) var(--ig-pad-x); text-decoration: none;
      box-shadow: 0 3px 12px rgba(131, 58, 180, 0.28);
      width: fit-content; max-width: min(100%, var(--ig-max)); text-align: center; box-sizing: border-box;
    }
    @media (prefers-reduced-motion: reduce) {
      .amose-ig--{{ id }} .amose-ig__badge { animation: none; }
    }
    .amose-ig--{{ id }} .amose-ig__inner {
      white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: var(--ig-icon-gap);
    }
    .amose-ig--{{ id }} .amose-ig__icon { flex-shrink: 0; line-height: 0; color: var(--ig-fg); }
    .amose-ig--{{ id }} .amose-ig__icon svg { display: block; width: var(--ig-icon); height: auto; }
    .amose-ig--{{ id }} .amose-ig__text { line-height: 1.2; }
  </style>
  <a class="amose-ig__badge" href="{{ link_url | default: '#' }}"{% if link_target == '_blank' %} target="_blank" rel="noopener noreferrer"{% endif %}>
    <span class="amose-ig__inner">
      <span class="amose-ig__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
      </span>
      <span class="amose-ig__text">{{ badge_text | default: 'Follow on Instagram' }}</span>
    </span>
  </a>
</div>

Instagram badge

Instagram-style gradient pill.

{% comment %}
  UGC video carousel — MP4 strip. Hover: muted autoplay. Click: play/pause with sound.
  Put `data-block-type="ugc-video"` on the section (or parent); `data-margin-top` / `data-margin-bottom` in px. Include CSS + script once per theme if you move them to assets.
{% endcomment %}
{% assign ugc_v1 = video_url_1 | default: 'https://www.w3schools.com/html/mov_bbb.mp4' %}
{% assign ugc_v2 = video_url_2 | default: 'https://www.w3schools.com/html/mov_bbb.mp4' %}
{% assign ugc_v3 = video_url_3 | default: 'https://www.w3schools.com/html/mov_bbb.mp4' %}
<style>
  .ugc-video-section {
    padding: 10px 0;
    background-color: transparent;
    margin-top: var(--ugc-video-margin-top, 0px);
    margin-bottom: var(--ugc-video-margin-bottom, 0px);
  }
  .ugc-video-container {
    margin: 0 auto;
  }
  .ugc-video-title {
    margin-bottom: 24px;
    color: #000000;
  }
  .ugc-video-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 10px;
  }
  .ugc-video-carousel::-webkit-scrollbar {
    height: 6px;
  }
  .ugc-video-carousel::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
  }
  .ugc-video-carousel::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
  }
  .ugc-video-carousel::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5);
  }
  .ugc-video-item {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
  }
  .ugc-video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ugc-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .ugc-video-item:hover .ugc-video-overlay {
    opacity: 0.8;
  }
  .ugc-play-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .ugc-play-button:hover {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }
  .ugc-play-button svg {
    width: 30px;
    height: 30px;
    fill: #000;
    margin-left: 4px;
  }
  @media (max-width: 768px) {
    .ugc-video-title {
      margin-bottom: 10px;
    }
    .ugc-video-item {
      width: 140px;
      height: 240px;
    }
    .ugc-video-carousel {
      gap: 10px;
    }
  }
</style>
<section
  class="ugc-video-section ugc-video-section--{{ id }}"
  data-block-type="ugc-video"
  data-margin-top="{{ margin_top | default: '0' }}"
  data-margin-bottom="{{ margin_bottom | default: '0' }}"
>
  <div class="ugc-video-container">
    <h2 class="ugc-video-title" style="color: {{ title_color | default: '#000000' }};">{{ headline | default: 'Loved by 200,000+ happy customers.' }}</h2>
    <div class="ugc-video-carousel" role="list">
      <div class="ugc-video-item" role="listitem" tabindex="0" aria-label="{{ aria_video_1 | default: 'Customer video 1' }}">
        <video src="{{ ugc_v1 }}" muted playsinline loop preload="metadata"{% if poster_1 != blank %} poster="{{ poster_1 }}"{% endif %}></video>
        <div class="ugc-video-overlay" aria-hidden="true">
          <div class="ugc-play-button"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></div>
        </div>
      </div>
      <div class="ugc-video-item" role="listitem" tabindex="0" aria-label="{{ aria_video_2 | default: 'Customer video 2' }}">
        <video src="{{ ugc_v2 }}" muted playsinline loop preload="metadata"{% if poster_2 != blank %} poster="{{ poster_2 }}"{% endif %}></video>
        <div class="ugc-video-overlay" aria-hidden="true">
          <div class="ugc-play-button"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></div>
        </div>
      </div>
      <div class="ugc-video-item" role="listitem" tabindex="0" aria-label="{{ aria_video_3 | default: 'Customer video 3' }}">
        <video src="{{ ugc_v3 }}" muted playsinline loop preload="metadata"{% if poster_3 != blank %} poster="{{ poster_3 }}"{% endif %}></video>
        <div class="ugc-video-overlay" aria-hidden="true">
          <div class="ugc-play-button"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
class UGCVideoBlock {
  constructor() {
    this.init();
  }
  init() {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", function () {
        this.setupVideos();
      }.bind(this));
    } else {
      this.setupVideos();
    }
  }
  setupVideos() {
    document.querySelectorAll(".ugc-video-section").forEach(function (section) {
      this.setupDynamicStyles(section);
    }.bind(this));
    document.querySelectorAll(".ugc-video-item").forEach(function (item) {
      var video = item.querySelector("video");
      var playButton = item.querySelector(".ugc-play-button");
      if (!video) return;
      video.load();
      item.addEventListener("click", function () {
        if (video.paused) {
          video.muted = false;
          video.play();
          if (playButton) playButton.style.opacity = "0";
        } else {
          video.pause();
          if (playButton) playButton.style.opacity = "1";
        }
      });
      item.addEventListener("mouseenter", function () {
        if (video.paused) {
          video.muted = true;
          video.play();
          if (playButton) playButton.style.opacity = "0";
        }
      });
      item.addEventListener("mouseleave", function () {
        if (!video.paused && video.muted) {
          video.pause();
          if (playButton) playButton.style.opacity = "1";
        }
      });
    });
  }
  setupDynamicStyles(section) {
    var blockElement = section.closest('[data-block-type="ugc-video"]') || section;
    var marginTop = blockElement.dataset.marginTop || "0";
    var marginBottom = blockElement.dataset.marginBottom || "0";
    section.style.setProperty("--ugc-video-margin-top", marginTop + "px");
    section.style.setProperty("--ugc-video-margin-bottom", marginBottom + "px");
  }
}
window.ugcVideoBlock = new UGCVideoBlock();
window.UGCVideoBlock = UGCVideoBlock;
</script>

UGC video carousel

Headline, three vertical MP4s, hover preview (muted), click for sound.

Loved by 200,000+ happy customers.

{% comment %}
  Video story — Instagram-style circles + fullscreen MP4 modal. Include CSS + script once per theme (or use assets).
  data-block-type="video-story" on the root; data-circle-size, data-gap, data-margin-top/bottom, data-border-width, data-border-color, data-show-play-button.
{% endcomment %}
<style>
.video-story {
  margin: var(--story-margin-top, 0) 0 var(--story-margin-bottom, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-story__container {
  display: flex;
  gap: var(--story-gap, 16px);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0 16px 0 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.video-story__container::-webkit-scrollbar { display: none; }
.video-story__wrapper {
  flex-shrink: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.video-story__item {
  position: relative;
  width: var(--story-circle-size, 80px);
  height: var(--story-circle-size, 80px);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--story-border-width, 0) solid var(--story-border-color, #000000);
  box-sizing: border-box;
  flex-shrink: 0;
}
.video-story__item:hover { opacity: 0.9; }
.video-story__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.video-story__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
.video-story__label {
  margin-top: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: #333;
  text-align: center;
  width: 100%;
}
.video-story__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  transition: all 0.2s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.video-story__item:hover .video-story__play-button {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}
.video-story__play-button svg {
  width: 12px;
  height: 12px;
  color: #ffffff;
  margin-left: 1px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.video-story__modal {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.video-story__modal.active { display: flex; }
.video-story__modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.video-story__modal-content {
  position: relative !important;
  width: 90vw;
  max-width: 1400px;
  height: auto;
  max-height: 90vh;
  z-index: 1000000 !important;
  background: transparent;
  border-radius: 8px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
}
.video-story__video {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  display: block;
  object-fit: contain;
  background: transparent;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1;
  border-radius: 8px;
}
.video-story__close {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 1000001 !important;
}
.video-story__close:hover { opacity: 0.7; }
@media (max-width: 768px) {
  .video-story__container {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding: 0 16px;
    gap: var(--story-gap, 12px);
  }
  .video-story__wrapper { flex-shrink: 0; scroll-snap-align: center; }
  .video-story__container::-webkit-scrollbar { display: none; }
  .video-story__container { -ms-overflow-style: none; scrollbar-width: none; }
  .video-story__modal-content { width: 95%; max-width: none; border-radius: 0; }
  .video-story__close {
    top: 10px;
    right: 10px;
    font-size: 32px;
    background: rgba(0, 0, 0, 0.5);
    width: 44px;
    height: 44px;
  }
}
</style>
{% assign vs_p1 = story_poster_1 | default: 'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=200&h=200&fit=crop&q=80' %}
{% assign vs_p2 = story_poster_2 | default: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=200&h=200&fit=crop&q=80' %}
{% assign vs_p3 = story_poster_3 | default: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=200&h=200&fit=crop&q=80' %}
{% assign vs_v1 = story_video_1 | default: 'https://www.w3schools.com/html/mov_bbb.mp4' %}
{% assign vs_v2 = story_video_2 | default: 'https://www.w3schools.com/html/mov_bbb.mp4' %}
{% assign vs_v3 = story_video_3 | default: 'https://www.w3schools.com/html/mov_bbb.mp4' %}
<div
  class="video-story"
  data-block-type="video-story"
  data-circle-size="{{ circle_size | default: '80' }}"
  data-gap="{{ story_gap | default: '16' }}"
  data-margin-top="{{ margin_top | default: '0' }}"
  data-margin-bottom="{{ margin_bottom | default: '0' }}"
  data-border-width="{{ border_width | default: '2' }}"
  data-border-color="{{ border_color | default: '#e8a598' }}"
  data-show-play-button="{% if show_play_button == false %}false{% else %}true{% endif %}"
>
  <div class="video-story__container">
    <div class="video-story__wrapper">
      <div class="video-story__item" data-video-url="{{ vs_v1 }}" role="button" tabindex="0" aria-label="{{ story_label_1 | default: 'Story 1' }}">
        <img class="video-story__thumbnail" src="{{ vs_p1 }}" alt="" width="200" height="200" loading="lazy" decoding="async" />
        <span class="video-story__play-button" aria-hidden="true"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M8 5v14l11-7z"/></svg></span>
      </div>
      <div class="video-story__label">{{ story_label_1 | default: 'New drop' }}</div>
    </div>
    <div class="video-story__wrapper">
      <div class="video-story__item" data-video-url="{{ vs_v2 }}" role="button" tabindex="0" aria-label="{{ story_label_2 | default: 'Story 2' }}">
        <img class="video-story__thumbnail" src="{{ vs_p2 }}" alt="" width="200" height="200" loading="lazy" decoding="async" />
        <span class="video-story__play-button" aria-hidden="true"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M8 5v14l11-7z"/></svg></span>
      </div>
      <div class="video-story__label">{{ story_label_2 | default: 'Reviews' }}</div>
    </div>
    <div class="video-story__wrapper">
      <div class="video-story__item" data-video-url="{{ vs_v3 }}" role="button" tabindex="0" aria-label="{{ story_label_3 | default: 'Story 3' }}">
        <img class="video-story__thumbnail" src="{{ vs_p3 }}" alt="" width="200" height="200" loading="lazy" decoding="async" />
        <span class="video-story__play-button" aria-hidden="true"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M8 5v14l11-7z"/></svg></span>
      </div>
      <div class="video-story__label">{{ story_label_3 | default: 'BTS' }}</div>
    </div>
  </div>
  <div class="video-story__modal" aria-hidden="true">
    <div class="video-story__modal-overlay" aria-label="Close"></div>
    <div class="video-story__modal-content">
      <video class="video-story__video" playsinline controls preload="metadata"></video>
    </div>
    <button type="button" class="video-story__close" aria-label="Close video">×</button>
  </div>
</div>
<script>
class VideoStoryBlock {
  constructor() {
    this.init();
  }
  init() {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", function () {
        this.setupVideoStories();
      }.bind(this));
    } else {
      this.setupVideoStories();
    }
  }
  setupVideoStories() {
    document.querySelectorAll(".video-story").forEach(function (container) {
      this.setupDynamicStyles(container);
      this.setupClickHandlers(container);
    }.bind(this));
  }
  setupDynamicStyles(container) {
    var blockElement = container.closest('[data-block-type="video-story"]') || container;
    var circleSize = blockElement.dataset.circleSize || "80";
    var gap = blockElement.dataset.gap || "16";
    var marginTop = blockElement.dataset.marginTop || "0";
    var marginBottom = blockElement.dataset.marginBottom || "0";
    var borderWidth = blockElement.dataset.borderWidth || "0";
    var borderColor = blockElement.dataset.borderColor || "#000000";
    var showPlayButton = blockElement.dataset.showPlayButton === "true";
    container.style.setProperty("--story-circle-size", circleSize + "px");
    container.style.setProperty("--story-gap", gap + "px");
    container.style.setProperty("--story-margin-top", marginTop + "px");
    container.style.setProperty("--story-margin-bottom", marginBottom + "px");
    container.style.setProperty("--story-border-width", borderWidth + "px");
    container.style.setProperty("--story-border-color", borderColor);
    container.querySelectorAll(".video-story__play-button").forEach(function (btn) {
      btn.style.display = showPlayButton ? "flex" : "none";
    });
  }
  setupClickHandlers(container) {
    var storyItems = container.querySelectorAll(".video-story__item");
    var modal = container.querySelector(".video-story__modal");
    var video = modal ? modal.querySelector(".video-story__video") : null;
    var closeBtn = modal ? modal.querySelector(".video-story__close") : null;
    var overlay = modal ? modal.querySelector(".video-story__modal-overlay") : null;
    if (!modal || !video) return;
    if (modal.parentElement !== document.body) {
      document.body.appendChild(modal);
    }
    storyItems.forEach(function (item) {
      var wrapper = item.closest(".video-story__wrapper");
      var clickTarget = wrapper || item;
      clickTarget.addEventListener("click", function (e) {
        if (e.target.classList.contains("video-story__label")) return;
        var videoUrl = item.dataset.videoUrl;
        if (!videoUrl) return;
        video.pause();
        video.currentTime = 0;
        video.innerHTML = "";
        var source = document.createElement("source");
        source.src = videoUrl;
        source.type = "video/mp4";
        video.appendChild(source);
        modal.classList.add("active");
        modal.setAttribute("aria-hidden", "false");
        video.load();
        var playVideo = function () {
          video.play().catch(function (err) {
            console.log("Autoplay prevented:", err);
          });
        };
        if (video.readyState >= 2) {
          playVideo();
        } else {
          video.addEventListener("canplay", playVideo, { once: true });
        }
        document.body.style.overflow = "hidden";
      });
    });
    var closeModal = function () {
      modal.classList.remove("active");
      modal.setAttribute("aria-hidden", "true");
      video.pause();
      video.currentTime = 0;
      video.innerHTML = "";
      document.body.style.overflow = "";
    };
    if (closeBtn) closeBtn.addEventListener("click", closeModal);
    if (overlay) overlay.addEventListener("click", closeModal);
    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape" && modal.classList.contains("active")) {
        closeModal();
      }
    });
  }
  updateStyles(container, settings) {
    if (settings.circleSize) {
      container.style.setProperty("--story-circle-size", settings.circleSize + "px");
    }
    if (settings.gap) {
      container.style.setProperty("--story-gap", settings.gap + "px");
    }
    if (settings.marginTop) {
      container.style.setProperty("--story-margin-top", settings.marginTop + "px");
    }
    if (settings.marginBottom) {
      container.style.setProperty("--story-margin-bottom", settings.marginBottom + "px");
    }
    if (settings.borderWidth !== undefined) {
      container.style.setProperty("--story-border-width", settings.borderWidth + "px");
    }
    if (settings.borderColor) {
      container.style.setProperty("--story-border-color", settings.borderColor);
    }
  }
}
window.videoStoryBlock = new VideoStoryBlock();
window.VideoStoryBlock = VideoStoryBlock;
</script>

Video story strip

Instagram-style story circles; tap opens an MP4 in a fullscreen modal.

New drop

Reviews

BTS

{% comment %}
  FAQ accordion — include CSS + script once per theme (or assets). Root: data-block-type="faq" + data-text-color, data-icon-size, data-font-size, data-content-font-size, data-font-weight, data-border-color, data-border-width, data-margin-top, data-margin-bottom.
{% endcomment %}
<style>
.faq-block{display:flex;flex-direction:column;gap:0;margin:var(--faq-margin-top,0) 0 var(--faq-margin-bottom,0) 0}
.faq-item{border-bottom:var(--faq-border-width,1px) solid var(--faq-border-color,#e5e5e5);padding-bottom:var(--faq-item-padding-bottom,8px);padding-top:var(--faq-item-padding-top,8px)}
.faq-item:last-child{border-bottom:none;padding-bottom:0}
.faq-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:var(--faq-header-padding,8px 0);user-select:none;transition:color .2s ease}
.faq-header:hover{color:var(--faq-hover-color,var(--faq-text-color,#1a1a1a))}
.faq-title{font-size:var(--faq-font-size,16px);font-weight:var(--faq-font-weight,400);color:var(--faq-text-color,#1a1a1a);margin:0;flex:1;text-align:left}
.faq-icon{width:var(--faq-icon-size,20px);height:var(--faq-icon-size,20px);color:var(--faq-text-color,#1a1a1a);flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;font-size:var(--faq-icon-size,20px);line-height:1}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1),opacity .3s ease-in-out;padding:0;color:var(--faq-content-color,var(--faq-text-color,#1a1a1a));font-size:var(--faq-content-font-size,14px);line-height:1.6}
.faq-item.active .faq-content{max-height:1000px;opacity:1;padding:var(--faq-content-padding,4px 0 0 0);transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1),opacity .3s ease-in-out .1s}
.faq-content p{margin:0 0 12px 0}
.faq-content p:last-child{margin-bottom:0}
</style>
<div
  class="faq-block"
  data-block-type="faq"
  data-text-color="{{ text_color | default: '#1a1a1a' }}"
  data-icon-size="{{ icon_size | default: '20' }}"
  data-font-size="{{ font_size | default: '16' }}"
  data-content-font-size="{{ content_font_size | default: '14' }}"
  data-font-weight="{{ font_weight | default: '400' }}"
  data-border-color="{{ border_color | default: '#e5e5e5' }}"
  data-border-width="{{ border_width | default: '1' }}"
  data-margin-top="{{ margin_top | default: '0' }}"
  data-margin-bottom="{{ margin_bottom | default: '0' }}"
>
  <div class="faq-item">
    <div class="faq-header">
      <h3 class="faq-title">{{ faq_q1 | default: 'Shipping and returns' }}</h3>
      <span class="faq-icon" aria-hidden="true">+</span>
    </div>
    <div class="faq-content">
      <p>{{ faq_a1 | default: 'Free shipping over $50. Returns accepted within 30 days.' }}</p>
    </div>
  </div>
  <div class="faq-item">
    <div class="faq-header">
      <h3 class="faq-title">{{ faq_q2 | default: 'How do I track my order?' }}</h3>
      <span class="faq-icon" aria-hidden="true">+</span>
    </div>
    <div class="faq-content">
      <p>{{ faq_a2 | default: 'You will receive a tracking link by email as soon as your order ships.' }}</p>
    </div>
  </div>
  <div class="faq-item">
    <div class="faq-header">
      <h3 class="faq-title">{{ faq_q3 | default: 'Payment methods' }}</h3>
      <span class="faq-icon" aria-hidden="true">+</span>
    </div>
    <div class="faq-content">
      <p>{{ faq_a3 | default: 'We accept major cards, Shop Pay, PayPal, and more.' }}</p>
    </div>
  </div>
</div>
<script>
class FAQBlock {
  constructor() {
    this.init();
  }
  init() {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", function () {
        this.setupFAQs();
      }.bind(this));
    } else {
      this.setupFAQs();
    }
  }
  setupFAQs() {
    document.querySelectorAll(".faq-block").forEach(function (container) {
      this.setupDynamicStyles(container);
      this.setupAccordion(container);
    }.bind(this));
  }
  setupDynamicStyles(container) {
    var blockElement = container.closest('[data-block-type="faq"]') || container;
    var textColor = blockElement.dataset.textColor || "#1a1a1a";
    var iconSize = blockElement.dataset.iconSize || "20";
    var fontSize = blockElement.dataset.fontSize || "16";
    var contentFontSize = blockElement.dataset.contentFontSize || "14";
    var fontWeight = blockElement.dataset.fontWeight || "400";
    var borderColor = blockElement.dataset.borderColor || "#e5e5e5";
    var borderWidth = blockElement.dataset.borderWidth || "1";
    var marginTop = blockElement.dataset.marginTop || "0";
    var marginBottom = blockElement.dataset.marginBottom || "0";
    container.style.setProperty("--faq-text-color", textColor);
    container.style.setProperty("--faq-icon-size", iconSize + "px");
    container.style.setProperty("--faq-font-size", fontSize + "px");
    container.style.setProperty("--faq-content-font-size", contentFontSize + "px");
    container.style.setProperty("--faq-font-weight", fontWeight);
    container.style.setProperty("--faq-border-color", borderColor);
    container.style.setProperty("--faq-border-width", borderWidth + "px");
    container.style.setProperty("--faq-margin-top", marginTop + "px");
    container.style.setProperty("--faq-margin-bottom", marginBottom + "px");
  }
  setupAccordion(container) {
    var faqItems = container.querySelectorAll(".faq-item");
    faqItems.forEach(function (item) {
      var header = item.querySelector(".faq-header");
      if (!header) return;
      header.addEventListener("click", function () {
        item.classList.toggle("active");
      });
    });
  }
  updateStyles(container, settings) {
    if (settings.textColor) {
      container.style.setProperty("--faq-text-color", settings.textColor);
    }
    if (settings.iconSize) {
      container.style.setProperty("--faq-icon-size", settings.iconSize + "px");
    }
    if (settings.fontSize) {
      container.style.setProperty("--faq-font-size", settings.fontSize + "px");
    }
    if (settings.contentFontSize) {
      container.style.setProperty("--faq-content-font-size", settings.contentFontSize + "px");
    }
    if (settings.fontWeight) {
      container.style.setProperty("--faq-font-weight", settings.fontWeight);
    }
    if (settings.borderColor) {
      container.style.setProperty("--faq-border-color", settings.borderColor);
    }
    if (settings.borderWidth) {
      container.style.setProperty("--faq-border-width", settings.borderWidth + "px");
    }
    if (settings.marginTop) {
      container.style.setProperty("--faq-margin-top", settings.marginTop + "px");
    }
    if (settings.marginBottom) {
      container.style.setProperty("--faq-margin-bottom", settings.marginBottom + "px");
    }
  }
}
window.faqBlock = new FAQBlock();
window.FAQBlock = FAQBlock;
</script>

FAQ accordion

Expandable Q&A; + rotates when open. Multiple items can stay open.

Shipping & returns

Free shipping over $50. Returns within 30 days.

Track my order

We email a tracking link when your order ships.

Payment methods

Cards, Shop Pay, PayPal, and more.

{% comment %}
  Info callout — unique `id`. Light blue panel, left-aligned title + body. No icon/emoji.
{% endcomment %}
<div
  class="amose-infobox amose-infobox--{{ id }}"
  data-block-type="info-callout"
  style="
    --infobox-bg: {{ bg_color | default: '#EFF6FF' }};
    --infobox-border: {{ border_color | default: '#BFDBFE' }};
    --infobox-border-w: {{ border_width | default: '1' }}px;
    --infobox-text: {{ text_color | default: '#1E40AF' }};
    --infobox-title-color: {{ title_color | default: '#1E3A8A' }};
    --infobox-radius: {{ radius | default: '12' }}px;
    --infobox-pad-y: {{ pad_y | default: '14' }}px;
    --infobox-pad-x: {{ pad_x | default: '16' }}px;
    --infobox-title-size: {{ title_size | default: '15' }}px;
    --infobox-text-size: {{ text_size | default: '14' }}px;
    --infobox-margin-top: {{ margin_top | default: '0' }}px;
    --infobox-margin-bottom: {{ margin_bottom | default: '0' }}px;
  "
>
  <div class="amose-infobox__inner">
    <p class="amose-infobox__title">{{ title | default: 'Order updates' }}</p>
    <p class="amose-infobox__text">{{ body | default: "You'll get an email when your order ships. Tracking is added automatically—you can also check status in your account at any time." }}</p>
  </div>
</div>

Info callout (blue)

Soft blue box, left-aligned title and copy—good for policies, shipping info, or tips.

Order updates

You'll get an email when your order ships. Tracking is added automatically—you can also check status in your account at any time.

{% comment %}
  Testimonials / reviews — include once per theme (CSS + script), or split into assets.
  data-display-mode: list | carousel
{% endcomment %}
<style>
/* Reviews Block Styles */
.testimonial-container {
  width: 100%;
  margin-top: var(--reviews-margin-top, 0px);
  margin-bottom: var(--reviews-margin-bottom, 0px);
}
.testimonial-slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-slider--carousel {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  gap: 16px;
  padding-bottom: 8px;
}
.testimonial-slider--carousel::-webkit-scrollbar { height: 6px; }
.testimonial-slider--carousel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.testimonial-slider--carousel::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
.testimonial-slider--carousel::-webkit-scrollbar-thumb:hover { background: #555; }
.testimonial-slider--carousel .testimonial-item {
  flex: 0 0 calc(100% - 32px);
  min-width: 280px;
  max-width: 400px;
  scroll-snap-align: start;
}
.testimonial-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background-color: var(--testimonial-bg-color, #F2F2F2);
  border-radius: 8px;
}
.testimonial-image-container {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.testimonial-image { width: 100%; height: 100%; object-fit: cover; }
.testimonial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.testimonial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.testimonial-name {
  font-size: var(--testimonial-text-size-desktop, 14px);
  font-weight: 600;
  color: var(--testimonial-text-color, #333);
}
.testimonial-stars-container { display: flex; gap: 2px; align-items: center; }
.testimonial-star-icon {
  width: var(--testimonial-star-size, 14px);
  height: var(--testimonial-star-size, 14px);
  flex-shrink: 0;
  background-color: var(--testimonial-star-bg-color, #00B67A);
  padding: 2px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-star-icon .star-fill { fill: var(--testimonial-star-fill-color, #FFFFFF); }
.testimonial-star-icon .star-shadow { fill: var(--testimonial-star-shadow-color, #006B47); }
.testimonial-text {
  font-size: var(--testimonial-text-size-desktop, 14px);
  color: var(--testimonial-text-color, #333);
  line-height: 1.5;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .testimonial-item { padding: 12px; gap: 12px; }
  .testimonial-image-container { width: 42px; height: 42px; }
  .testimonial-name { font-size: var(--testimonial-text-size-mobile, 12px); }
  .testimonial-text { font-size: var(--testimonial-text-size-mobile, 12px); }
}
</style>

<div
  class="testimonial-container"
  data-block-type="social-summary"
  data-display-mode="{{ display_mode | default: 'list' }}"
  data-text-size-desktop="{{ text_size_desktop | default: '14' }}"
  data-text-size-mobile="{{ text_size_mobile | default: '12' }}"
  data-star-count="{{ star_count | default: '5' }}"
  data-star-size="{{ star_size | default: '14' }}"
  data-bg-color="{{ bg_color | default: '#F2F2F2' }}"
  data-text-color="{{ text_color | default: '#333333' }}"
  data-star-fill-color="{{ star_fill_color | default: '#FFFFFF' }}"
  data-star-shadow-color="{{ star_shadow_color | default: '#006B47' }}"
  data-star-bg-color="{{ star_bg_color | default: '#00B67A' }}"
  data-margin-top="{{ margin_top | default: '0' }}"
  data-margin-bottom="{{ margin_bottom | default: '0' }}"
>
  <div class="testimonial-slider">
    {% for block in section.blocks %}
      <div class="testimonial-item" {{ block.shopify_attributes }}>
        <div class="testimonial-image-container">
          <img class="testimonial-image" src="{{ block.settings.image | image_url: width: 96 }}" alt="{{ block.settings.name | escape }}" width="48" height="48" loading="lazy" />
        </div>
        <div class="testimonial-content">
          <div class="testimonial-header">
            <span class="testimonial-name">{{ block.settings.name }}</span>
            <div class="testimonial-stars-container" aria-hidden="true"></div>
          </div>
          <p class="testimonial-text">{{ block.settings.quote }}</p>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<script>
class ReviewsBlock {
  constructor() {
    this.starSVG = `
      <svg class="testimonial-star-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
           x="0px" y="0px" viewBox="0 0 271.3 258" style="enable-background:new 0 0 271.3 258;" xml:space="preserve">
        <g id="Star">
          <g>
            <polygon class="star-fill" points="271.3,98.6 167.7,98.6 135.7,0 103.6,98.6 0,98.5 83.9,159.5 51.8,258 135.7,197.1 219.5,258 187.5,159.5 271.3,98.6 271.3,98.6 271.3,98.6"></polygon>
            <polygon class="star-shadow" points="194.7,181.8 187.5,159.5 135.7,197.1"></polygon>
          </g>
        </g>
      </svg>
    `;
    this.init();
  }
  init() {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.setupReviewsBlocks());
    } else {
      this.setupReviewsBlocks();
    }
  }
  setupReviewsBlocks() {
    document.querySelectorAll('.testimonial-container').forEach((block) => {
      this.setupDynamicStyles(block);
      this.setupStarIcons(block);
    });
  }
  setupDynamicStyles(block) {
    const blockElement = block.closest('[data-block-type="social-summary"]') || block;
    const textSizeDesktop = blockElement.dataset.textSizeDesktop || '14';
    const textSizeMobile = blockElement.dataset.textSizeMobile || '12';
    const starCount = parseInt(blockElement.dataset.starCount, 10) || 5;
    const starSize = blockElement.dataset.starSize || '14';
    const bgColor = blockElement.dataset.bgColor || '#F2F2F2';
    const textColor = blockElement.dataset.textColor || '#333';
    const starFillColor = blockElement.dataset.starFillColor || '#FFFFFF';
    const starShadowColor = blockElement.dataset.starShadowColor || '#006B47';
    const starBgColor = blockElement.dataset.starBgColor || '#00B67A';
    const marginTop = blockElement.dataset.marginTop || '0';
    const marginBottom = blockElement.dataset.marginBottom || '0';
    const displayMode = blockElement.dataset.displayMode || 'list';
    block.style.setProperty('--testimonial-text-size-desktop', textSizeDesktop + 'px');
    block.style.setProperty('--testimonial-text-size-mobile', textSizeMobile + 'px');
    block.style.setProperty('--testimonial-star-size', starSize + 'px');
    block.style.setProperty('--testimonial-bg-color', bgColor);
    block.style.setProperty('--testimonial-text-color', textColor);
    block.style.setProperty('--testimonial-star-fill-color', starFillColor);
    block.style.setProperty('--testimonial-star-shadow-color', starShadowColor);
    block.style.setProperty('--testimonial-star-bg-color', starBgColor);
    block.style.setProperty('--reviews-margin-top', marginTop + 'px');
    block.style.setProperty('--reviews-margin-bottom', marginBottom + 'px');
    block.dataset.starCount = String(starCount);
    const slider = block.querySelector('.testimonial-slider');
    if (slider) {
      slider.setAttribute('data-display-mode', displayMode);
      if (displayMode === 'carousel') {
        slider.classList.add('testimonial-slider--carousel');
      } else {
        slider.classList.remove('testimonial-slider--carousel');
      }
    }
  }
  setupStarIcons(block) {
    const starContainers = block.querySelectorAll('.testimonial-stars-container');
    const starCount = parseInt(block.dataset.starCount, 10) || 5;
    starContainers.forEach((container) => {
      let starsHTML = '';
      for (let i = 0; i < starCount; i++) {
        starsHTML += this.starSVG;
      }
      container.innerHTML = starsHTML;
    });
  }
  updateStyles(block, settings) {
    if (settings.starCount !== undefined) {
      block.dataset.starCount = settings.starCount;
      this.setupStarIcons(block);
    }
    if (settings.starSize) {
      block.style.setProperty('--testimonial-star-size', settings.starSize + 'px');
    }
    if (settings.textSizeDesktop) {
      block.style.setProperty('--testimonial-text-size-desktop', settings.textSizeDesktop + 'px');
    }
    if (settings.textSizeMobile) {
      block.style.setProperty('--testimonial-text-size-mobile', settings.textSizeMobile + 'px');
    }
    if (settings.bgColor) {
      block.style.setProperty('--testimonial-bg-color', settings.bgColor);
    }
    if (settings.textColor) {
      block.style.setProperty('--testimonial-text-color', settings.textColor);
    }
    if (settings.starFillColor) {
      block.style.setProperty('--testimonial-star-fill-color', settings.starFillColor);
    }
    if (settings.starShadowColor) {
      block.style.setProperty('--testimonial-star-shadow-color', settings.starShadowColor);
    }
    if (settings.starBgColor) {
      block.style.setProperty('--testimonial-star-bg-color', settings.starBgColor);
    }
    if (settings.marginTop !== undefined) {
      block.style.setProperty('--reviews-margin-top', settings.marginTop + 'px');
    }
    if (settings.marginBottom !== undefined) {
      block.style.setProperty('--reviews-margin-bottom', settings.marginBottom + 'px');
    }
    if (settings.displayMode) {
      const slider = block.querySelector('.testimonial-slider');
      if (slider) {
        slider.setAttribute('data-display-mode', settings.displayMode);
        if (settings.displayMode === 'carousel') {
          slider.classList.add('testimonial-slider--carousel');
        } else {
          slider.classList.remove('testimonial-slider--carousel');
        }
      }
    }
  }
}
window.reviewsBlock = new ReviewsBlock();
window.ReviewsBlock = ReviewsBlock;
</script>

Testimonials / reviews

Reviews as list or carousel + stars.

Alex M.

Fast shipping—looks just like the photos. Would order again

{% comment %}
  Horizontal scrolling reviews with classic 1–5 star rating per card.
  Section blocks: image, name, rating (integer 1–5), quote, date (optional).
{% endcomment %}
<div class="amose-revrail amose-revrail--{{ id }}">
  <style>
    .amose-revrail--{{ id }} { width: 100%; }
    .amose-revrail--{{ id }} .amose-revrail__track {
      display: flex; gap: 11px; overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: thin;
    }
    .amose-revrail--{{ id }} .amose-revrail__track::-webkit-scrollbar { height: 5px; }
    .amose-revrail--{{ id }} .amose-revrail__track::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 3px; }
    .amose-revrail--{{ id }} .amose-revrail__track::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 3px; }
    .amose-revrail--{{ id }} .amose-revrail__card {
      flex: 0 0 min(82%, 220px); max-width: 240px; scroll-snap-align: start;
      background: rgba(255,255,255,.98); border: 1px solid rgba(0,0,0,.08);
      border-radius: 12px; padding: 12px 12px 11px;
      box-shadow: 0 2px 8px rgba(10,10,10,.05);
      display: flex; flex-direction: column; gap: 8px; text-align: left;
    }
    .amose-revrail--{{ id }} .amose-revrail__top { display: flex; align-items: flex-start; gap: 10px; }
    .amose-revrail--{{ id }} .amose-revrail__avatar {
      width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    }
    .amose-revrail--{{ id }} .amose-revrail__head { flex: 1; min-width: 0; }
    .amose-revrail--{{ id }} .amose-revrail__name-row {
      display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
      gap: 4px 8px; margin-bottom: 4px;
    }
    .amose-revrail--{{ id }} .amose-revrail__name { font-size: 13px; font-weight: 600; color: #0a0a0a; }
    .amose-revrail--{{ id }} .amose-revrail__date { font-size: 11px; color: #525252; }
    .amose-revrail--{{ id }} .amose-revrail__stars { display: flex; gap: 2px; align-items: center; line-height: 0; }
    .amose-revrail--{{ id }} .amose-revrail__star { display: block; width: 13px; height: 13px; flex-shrink: 0; color: #e5e7eb; }
    .amose-revrail--{{ id }} .amose-revrail__star--on { color: #fbbf24; }
    .amose-revrail--{{ id }} .amose-revrail__quote { margin: 0; font-size: 12px; line-height: 1.45; color: #525252; }
    @media (prefers-reduced-motion: reduce) {
      .amose-revrail--{{ id }} .amose-revrail__track { scroll-snap-type: none; }
    }
  </style>
  <div class="amose-revrail__track" role="list" aria-label="{{ rail_label | default: 'Customer reviews' }}">
    {% for block in section.blocks %}
      {% assign rating = block.settings.rating | default: 5 | plus: 0 %}
      <article class="amose-revrail__card" role="listitem" {{ block.shopify_attributes }}>
        <div class="amose-revrail__top">
          <img
            class="amose-revrail__avatar"
            src="{{ block.settings.image | image_url: width: 96 }}"
            alt=""
            width="40"
            height="40"
            loading="lazy"
          />
          <div class="amose-revrail__head">
            <div class="amose-revrail__name-row">
              <span class="amose-revrail__name">{{ block.settings.name }}</span>
              {% if block.settings.date_label != blank %}
                <span class="amose-revrail__date">{{ block.settings.date_label }}</span>
              {% endif %}
            </div>
            <div class="amose-revrail__stars" role="img" aria-label="{{ rating }} out of 5 stars">
              {% for i in (1..5) %}
                {% if i <= rating %}
                  <svg class="amose-revrail__star amose-revrail__star--on" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                {% else %}
                  <svg class="amose-revrail__star" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
        <p class="amose-revrail__quote">{{ block.settings.quote }}</p>
      </article>
    {% endfor %}
  </div>
</div>

Review rail (scroll)

Swipeable review cards + stars.

Sam R. 3 days ago

Packaging was perfect. Arrived two days early.

Morg L. 1 week ago

Really happy overall—only wish there were more colors.

Priya N. 2 weeks ago

Customer service sorted a mix-up in under an hour. Impressed.