# Bannery výhod

V této kapitole vás provedeme nastavením Bannerů výhod, které naleznete na hlavní straně

An image

# Administrace Shoptetu

V první řadě je důležité nalézt sekci, kam budeme bannery přidávat. Tuto část administrace najdete podle cesty níže.

Administrace > VZHLED A OBSAH > Doplňkové bannery > Přidat

# Nastavení banneru

Jakmile je banner přidán, nastavní provedme podle obrázku níže. Konkrétně se soustřeďme na TYP BANNERU, POZICE BANNERU a zviditelnění na všech zařízeních.

An image

# Upravovaní kódu

Podívejme se nejdříve na kód, který budeme přidávat do editoru našeho nově přidaného banneru

<div class="benefit-banner">
    <div class="icon-box">
        <img src="https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/celestin/img/truck.svg">
    </div>
    <div class="desc-box">
        <h3> Nahradíme textem </h3>
        <p> Nahradíme textem </p>
    </div>
</div>
1
2
3
4
5
6
7
8
9

Věnujme pozornost konkrétně třema atributům, které můžeme měnit, a to obrázek, jehož url vkládáme v řádce začánající atributem img. Odkaz vždy vkládáme mezi uvozovky za atributem src.

Další dvě proměnné pak jsou h3 a p. Text mezi nimi můžeme upravovat dle libosti.

# Přidání kódu

Nyní známe atributy, které můžeme upravovat a nic nám tedy nebrání nahrát kód do administrace Shoptetu k nově přidanému banneru, a to do textové sekce Nastavení.

An image

Po přidání můžeme libovolně měnit text i obrázek v banneru. Posledním krokem je tak ULOŽIT změny a banner se vám začne postupně přidávat na hlavní stránku.

WARNING

Další výhody do svého banneru přidáte opakováním stejného procesu.

# Naše ikonky

Níže naleznete odkazy na ikonky, které používáme v šabloně my. Adresa zůstává následující, pouze za poslední lomítko zadáte název ikony.

https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/celestin/img/(název ikony)

# Příklad

Pokud chci ikonku s náklaďákem, bude odkaz vypadat následovně: https://cdn.myshoptet.com/usr/shoptet.tomashlad.eu/user/documents/extras/celestin/img/truck.svg

Ikonka Obrázek Název
Náklaďák An image truck.svg
Vrácení An image refresh.svg
Telefon An image phone.svg
Ocenění An image award.svg

TIP

Ikony čerpáme z několika zdrojů, tyto konkrétní pochází z dílny Feather Icons (opens new window). Návod na nahrání na url nebo Shoptet naleznete v sekci Vygenerování URL obrázku.