Přidání vlastního bloku do košíku

Vlastní bloky umožňují přidat do slide cart prvky, které tam standardně nejsou — loga platebních metod, odznaky se sociálním důkazem, odpočítávací časovače, oznámení o dopravě, USP ikony a další. Napíšete je v HTML a CSS, vložíte je do slide cart a umístíte přesně tam, kam chcete.

Co můžete vytvořit

Vlastní blok je flexibilní kontejner, takže možností využití je spousta. Pár oblíbených nápadů:

Loga platebních metod — ukažte přijímané karty a peněženky pro budování důvěry při platbě
Sociální důkaz — úryvky recenzí, hodnocení hvězdičkami nebo „X zákazníků dnes nakoupilo"
Odpočítávací časovače — termín pro dopravu zdarma, blížící se konec výprodeje
Známky důvěry — odznaky bezpečné platby, widget telefonické podpory
Oznámení o dopravě a vrácení — limity pro dopravu zdarma, záruka snadného vrácení
USP ikony — rychlé vizuální připomínky vašich hlavních prodejních argumentů
Propagační bannery — kampaňové zprávy nebo sezónní nabídky

Kde vlastní bloky najdete

Pro každou ze dvou oblastí slide cart máte k dispozici jeden vlastní blok:

Body — zobrazuje se vedle položek košíku
Footer — sedí poblíž tlačítka pro pokladnu

Přesné pořadí v každé oblasti vyladíte v nastavení Rozvržení.

Přidání vlastního bloku

Otevřete nastavení slide cart.
Najděte komponentu Custom block v sekci body nebo footer.
Vložte HTML a CSS do pole pro kód.
Uložte změny.
Přetáhněte blok na požadované místo v Rozvržení.

Použití JavaScriptu

Vlastní bloky nespouští kód uvnitř tagů <script>, ale podporují JavaScript přes inline atributy událostí jako onclick, onmouseover nebo onload. To stačí pro mnoho drobných interakcí:

<button onclick="alert('Doprava zdarma při objednávce nad $50!')"    style="background: #000; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Informace o dopravě</button>

Pokud váš případ použití vyžaduje něco těžšího — načítání živých dat, složitý stav, SDK třetích stran — dejte nám vědět. Sledujeme zájem o plnější podporu JavaScriptu a podle požadavků obchodníků možná přidáme samostatné JS pole.

Náhled před spuštěním

Vlastní blok můžete uložit, nechat funkci vypnutou a přesto si prohlédnout, jak vypadá pomocí speciálního odkazu náhledu. Standardní tlačítko náhledu v navigaci blok nezobrazí, dokud je funkce vypnutá — tento vyhrazený odkaz je jediný způsob, jak ho vidět, aniž byste ho ukázali nakupujícím.

Hodí se pro přípravu změn, získání souhlasu od kolegů nebo testování na reálných zařízeních před spuštěním.

Dobré vědět

HTML a CSS jsou plně podporovány
Tagy <script> se neparsují — pro JavaScript používejte inline atributy událostí
Jeden vlastní blok na zónu (body + footer = celkem dva vlastní bloky na jeden slide cart)
CSS, které napíšete, se aplikuje uvnitř slide cart — udržujte selektory specifické, abyste neovlivnili ostatní prvky slide cart

Příklady k použití

Klidně tyto příklady zkopírujte a vložte do svého Custom block. Pokud potřebujete úpravu, vložte kód do libovolného LLM (doporučujeme Claude) a požádejte o změny.

1. Automaticky se posouvající karusel recenzí

Automaticky se posouvající widget zobrazující recenze (napevno zakódované) — pauzí ~3,5 sekundy na každé, s plynulými přechody mezi nimi. Čisté CSS, bez JS. Můžete přidat další recenze, upravit časování atd.

Zobrazit celý kód

<div class="reviews-widget">
  <div class="reviews-summary">
    <span class="reviews-stars">★★★★★</span>
    <span class="reviews-meta">4.9 · 2,500+ reviews</span>
  </div>

  <div class="reviews-slider-wrapper">
    <div class="reviews-track">
      <div class="review-slide">
        <p class="review-text">"Absolutely love this product! Best purchase I've made all year."</p>
        <span class="review-author">Sarah M. · Verified buyer</span>
      </div>
      <div class="review-slide">
        <p class="review-text">"Quality is amazing and shipping was fast. Highly recommend!"</p>
        <span class="review-author">David K. · Verified buyer</span>
      </div>
      <div class="review-slide">
        <p class="review-text">"Customer service was incredible. Will definitely buy again."</p>
        <span class="review-author">Emma R. · Verified buyer</span>
      </div>
    </div>
  </div>
</div>

<style>
  .reviews-widget {
    padding: 16px 14px;
    background: #f7fafc;
    margin: 0;
  }
  .reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .reviews-stars {
    color: #f6ad37;
    font-size: 15px;
    letter-spacing: 1px;
  }
  .reviews-meta {
    font-size: 12px;
    color: #4a5568;
    font-weight: 600;
  }
  .reviews-slider-wrapper {
    overflow: hidden;
    position: relative;
  }
  .reviews-track {
    display: flex;
    width: 300%;
    animation: review-slide 12s infinite ease-in-out;
  }
  .review-slide {
    flex: 0 0 33.333%;
    padding: 0 8px;
    text-align: center;
    box-sizing: border-box;
  }
  .review-text {
    font-size: 13px;
    color: #2d3748;
    margin: 0 0 6px;
    line-height: 1.4;
    font-style: italic;
  }
  .review-author {
    font-size: 11px;
    color: #718096;
  }
  @keyframes review-slide {
    0%, 28%   { transform: translateX(0); }
    33%, 61%  { transform: translateX(-33.333%); }
    66%, 94%  { transform: translateX(-66.666%); }
    100%      { transform: translateX(0); }
  }
</style>

2. Odpočítávací časovač

Odpočítávací časovače přidávají naléhavost u časově omezených nabídek, bleskových výprodejů a zpráv o rezervovaném košíku. Příklad níže je 10minutový časovač relace: spouští se na 10:00 pokaždé, když zákazník otevře slide cart, odpočítává sekundu po sekundě a po dosažení nuly zobrazí zprávu „Nabídka vypršela". Trvání, zpráva i barvy se v kódu snadno mění.

Zobrazit celý kód

<div class="countdown-widget">
  <div class="countdown-text">
    <div class="countdown-title">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5ZM12.75 6a.75.75 0 0 0-1.5 0v6c0 .2.08.39.22.53l4 4a.75.75 0 1 0 1.06-1.06l-3.78-3.78V6Z" clip-rule="evenodd"/>
      </svg>
      <span>Hurry — limited offer</span>
    </div>
    <div class="countdown-subtitle">Reserved in your cart for</div>
  </div>
  <div class="countdown-display">
    <div class="cd-block"><span id="cd-m">10</span><small>min</small></div>
    <div class="cd-sep">:</div>
    <div class="cd-block"><span id="cd-s">00</span><small>sec</small></div>
  </div>
  <img src="x" style="display:none" onerror="this.remove();(function(){var endTime=Date.now()+(10*60*1000);function update(){var diff=endTime-Date.now();if(diff<=0){var w=document.querySelector('.countdown-widget');if(w){w.textContent='Offer expired';w.style.padding='14px';w.style.textAlign='center';w.style.color='#718096';w.style.display='block';}return;}var pad=function(n){return String(n).padStart(2,'0');};var m=Math.floor(diff/60000),s=Math.floor((diff%60000)/1000);var dm=document.getElementById('cd-m');var ds=document.getElementById('cd-s');if(dm)dm.textContent=pad(m);if(ds)ds.textContent=pad(s);}if(window.__cdInt)clearInterval(window.__cdInt);update();window.__cdInt=setInterval(update,1000);})();">
</div>

<style>
  .countdown-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: #fff5f5;
    margin: 0;
  }
  .countdown-text {
    flex: 1;
    min-width: 0;
  }
  .countdown-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #c53030;
    margin-bottom: 2px;
  }
  .countdown-subtitle {
    font-size: 11px;
    color: #718096;
  }
  .countdown-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
  }
  .cd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
  }
  .cd-block span {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #2d3748;
    font-variant-numeric: tabular-nums;
  }
  .cd-block small {
    font-size: 9px;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  .cd-sep {
    color: #2d3748;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
  }
</style>

3. Známky důvěry

Kompletní příklad, který můžete vložit a upravit. Zobrazuje tři známky důvěry, které se obvykle umisťují pod tlačítko pokladny.

Zobrazit celý kód

<div class="trust-footer">
  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd"/>
    </svg>
    <span class="trust-title">Secure checkout</span>
    <span class="trust-subtitle">256-bit SSL</span>
  </div>

  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z"/>
    </svg>
    <span class="trust-title">50,000+ customers</span>
    <span class="trust-subtitle">Join the community</span>
  </div>

  <div class="trust-item">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"/>
    </svg>
    <span class="trust-title">Need help?</span>
    <span class="trust-subtitle">(555) 123-4567</span>
  </div>
</div>

<style>
  .trust-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    background: #f7fafc;
    border-radius: 8px;
    margin: 8px 0;
  }
  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 4px;
  }
  .trust-item svg {
    color: #2d8659;
  }
  .trust-title {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.2;
  }
  .trust-subtitle {
    font-size: 11px;
    color: #718096;
    line-height: 1.2;
  }
</style>

Potřebujete pomoct s vytvořením konkrétního bloku? Ozvěte se podpoře — rádi vás nasměrujeme správným směrem.