Promo lišta s odpočtem

Detailní popis produktu

Promo lišta s odpočtem pro Shoptet Classic – co přesně získáte

Tento digitální produkt je hotový HTML/CSS/JavaScript kód, který změní běžné systémové okno zpráv v šabloně Shoptet Classic na výraznou horní promo lištu přes celou šířku e-shopu. Zobrazí text akce, živý odpočet do konce a tlačítko se slevovým kódem, aby zákazník hned viděl, že má smysl nakoupit právě teď.

Produkt je navržen tak, aby ho zvládl nasadit i úplný laik – bez programování a bez zásahu do systému Shoptetu. Stačí vložit připravený kód na správná místa v administraci a přepsat několik textů podle vaší kampaně.

Jak promo lišta funguje

Využití stávajícího messenger okna

Skript pracuje s prvkem site-msg.information, který Shoptet běžně používá pro systémové zprávy v levém dolním rohu. Tento prvek se použije znovu, ale změní se jeho vzhled a umístění – místo malé bubliny v rohu vznikne horní lišta přes celou šířku stránky.

Lišta se posune z levého dolního rohu nahoru, zarovná se do středu a drží se horního okraje stránky. Díky tomu si jí zákazníci všimnou hned po načtení e-shopu a současně nenarušuje běžný nákupní proces.

Co obsahuje kód

• HTML část – blok <div id="promo-bar">…</div> s textem akce, odpočtem a tlačítkem se slevovým kódem.
• CSS styly – úprava vzhledu systémového okna na horní lištu, rozložení prvků, typografie, vzhled tlačítka.
• JavaScript – logika živého odpočtu, která počítá dny, hodiny, minuty a sekundy do zadaného data.

Všechno je připravené tak, aby se kopírovalo jako celek. Není potřeba nic instalovat ani nastavovat další moduly.

Klíčové funkce a možnosti nastavení

• Živý odpočet – skript průběžně přepočítává zbývající čas a aktualizuje čísla v liště každou sekundu.
• Snadná změna konce akce – datum a čas upravíte v atributu data-deadline="YYYY-MM-DDT23:59:59" přímo v HTML.
• Tlačítko se slevovým kódem – text tlačítka, samotný kód (např. BF25) i cílovou URL změníte jednoduchým přepsáním textu.
• Responzivní rozložení – lišta používá flexbox, takže vše zůstává dobře čitelné i na menších displejích.
• Stálá viditelnost – pruh je nahoře přes celou šířku, takže si ho zákazník všimne hned po načtení stránky.
• Možnost zavření – zákazník může lištu skrýt pomocí křížku umístěného vpravo nahoře.

Typické scénáře použití

Kdy se promo lišta nejvíce vyplatí

• Black Friday, Cyber Monday a další krátkodobé výprodeje.
• Sezónní akce – doprodej kolekcí, posezónní slevy.
• Dny dopravy zdarma – akce s přesným časovým omezením.
• Narozeninové akce e-shopu – sleva k výročí, speciální víkendová kampaň.
• Limitované nabídky – sleva platná například jen do půlnoci daného dne.

Všude tam, kde potřebujete zákazníkovi jasně ukázat, jak dlouho akce platí a jaký slevový kód má použít, funguje tato lišta jako jednoduchý nástroj, který přímo podporuje prodej.

Výhody pro e-shop

Pro majitele a manažery

• Vyšší viditelnost akce – sleva není schovaná v newsletteru nebo v textu u produktu, ale přímo nahoře na webu.
• Práce s urgentností – běžící odpočet přirozeně motivuje k rychlejšímu nákupu.
• Opakovaně použitelný kód – pro každou novou kampaň stačí přepsat text, kód a datum, není nutné řešit nový skript.

Pro marketing a obsah

• Nasazení bez programátora – úpravy zvládne člověk, který umí pracovat s administrací Shoptetu.
• Rychlý start kampaně – od nápadu k nasazení lišty jsou to jednotky minut.
• Jednotná komunikace – text na liště snadno sladíte s newsletterem, bannery a sociálními sítěmi.

Implementace v Shoptetu – krok za krokem pro laiky

1. Vložení HTML promo lišty

HTML část, která definuje promo lištu (blok <div id="promo-bar">…</div>), se vkládá přímo v administraci:

• V administraci přejděte do Vzhled a obsah > Editor > Další nastavení > Informační proužek.
• Do obsahu informačního proužku vložte dodané HTML promo lišty.
• Případně můžete obsah upravovat také přes Návrhář šablon, pokud ho používáte.

V této HTML části si rovnou přepíšete text akce, slevový kód, cílovou URL a datum v atributu data-deadline.

2. Vložení CSS stylů a JavaScriptu

Aby lišta vypadala a fungovala správně, je potřeba do šablony doplnit styly a skript. Vše se vkládá přímo do záhlaví:

• V administraci přejděte do Vzhled a obsah > Editor > HTML kód > Záhlaví.
• Do záhlaví vložte dodané CSS styly zabalené v tagu <style>…</style>.
• Pod styly vložte dodaný JavaScript v tagu <script>…</script>.

Nic dalšího není potřeba. Kód se načte při zobrazení stránky a promo lišta začne automaticky fungovat.

3. Otestování a úprava textů

• Uložte změny v editoru i v informačním proužku a otevřete e-shop v novém okně.
• Zkontrolujte, že se promo lišta zobrazuje nahoře přes celou šířku a odpočet běží.
• Vyzkoušejte klik na tlačítko se slevovým kódem a ověřte, že vede na správnou stránku.
• Pokud potřebujete, upravte formulace textů tak, aby přesně odpovídaly vaší kampani.

Jistota volby pro Shoptet Classic

Skript vychází z nativních prvků šablony Shoptet Classic a používá standardní možnosti úprav vzhledu (Vzhled a obsah > Editor). Nepotřebujete žádný doplněk ani programátora – stačí jednou vložit kód, nastavit texty a datum a promo lišta je připravena na ostrý provoz.

Pokud provozujete e-shop na Shoptetu a chcete rychle a viditelně propagovat časově omezené akce, tato promo lišta s odpočtem je praktické, opakovaně použitelné řešení, které zvládne nasadit i úplný začátečník v administraci.