Generátor ikonky pro AR zobrazovač
Vyberte ikonku, dolaďte barvu, velikost a průhlednost — generátor vám rovnou vypíše CSS, které stačí vložit do Shoptetu. Bez grafika a bez psaní kódu.
Ikonka se zákazníkovi ukáže na produktové stránce vedle názvu produktu, společně s textem „Zobrazit v AR“. Ve výchozím nastavení je černá — v barevnější šabloně tak snadno působí jako cizí prvek.
V náhledu rovnou uvidíte, jak bude ikonka vypadat v praxi, včetně ukázkového produktu s tlačítkem. Můžete si tak proklikat víc variant a vybrat tu, která ladí s designem e-shopu — ať už používáte minimalistickou černobílou paletu, nebo živé barvy značky.
Nastavení
Náhled na e-shopu
Vygenerované CSS
Zkopírujte a vložte v Shoptetu do Vzhled a obsah → Návrhář šablony → HTML editor → Zápatí <BODY>.
<style>
.ar-product-viewer-container .ar-product-viewer-button:before {
content: '';
display: inline-block;
width: 38px;
height: 38px;
background-color: #000000;
mask: url('https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/plugin-ar-icons/augmented-reality-1.svg');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask: url('https://cdn.myshoptet.com/usr/webotvurci.myshoptet.com/user/documents/plugin-ar-icons/augmented-reality-1.svg');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
opacity: 1;
}
</style>Jak vložit vygenerovaný kód do Shoptetu
- V generátoru výše vyberte ikonku a dolaďte barvu, velikost a průhlednost.
- Klikněte na Zkopírovat CSS — kód se uloží do schránky.
- V administraci Shoptetu otevřete Vzhled a obsah → Návrhář šablony → HTML editor → Zápatí <BODY>, kód sem vložte a změnu uložte.
- Otevřete si produkt s 3D modelem a zkontrolujte, že ikonka vypadá podle představ. Když ne, vraťte se sem, nastavení upravte a kód nahraďte novým.
Podrobný postup, jak se do HTML editoru šablony dostat, najdete v návodu Jak vložit CSS kód do platformy Shoptet.