Nastavenie doplnku Šípky
Upravte si funkčnosť, zobrazenie a vzhľad šípok v detaile produktu podľa svojich potrieb.
Kam vložiť kód doplnku
Skopírujte kód a vložte ho do poľa Pätička / Zápatí v administrácii Shoptetu.
<script>var detailProductArrows = true;var detailProductArrowsShowOnHover = false;var detailProductArrowsRadius = true;</script>Vysvetlivky k nastaveniam
detailProductArrows
Zapína alebo vypína doplnok. Hodnota true šípky aktivuje, hodnota false ich vypne.
detailProductArrowsShowOnHover
Určuje, či sa šípky zobrazia až po prejdení kurzorom na hlavný obrázok produktu. Hodnota true ich zobrazí po prejdení myšou, hodnota false ich ponechá zobrazené.
detailProductArrowsRadius
Určuje, či budú mať šípky zaoblené rohy. Hodnota true zaoblenie aktivuje, hodnota false ho vypne.
Úprava vzhľadu šípok
Farby a zaoblenie môžete upraviť pomocou CSS premenných. Kód vložte do poľa Hlavička / Záhlaví v administrácii Shoptetu.
<style>:root { --color-detail-product-arrows-BG : rgba(0, 0, 0, 0.25); --color-detail-product-arrows-BG-hover : rgba(0, 0, 0, 0.6); --color-detail-product-arrows-icon : #ffffff; --color-detail-product-arrows-icon-hover : #ffffff; --detail-product-arrows-border-radius : 0%;}</style>#ffffff, alebo vo formáte RGB či RGBA. Na výber farieb môžete použiť Color Hunt.
Vysvetlivky k vzhľadu
--color-detail-product-arrows-BG
Farba pozadia šípky v bežnom stave.
--color-detail-product-arrows-BG-hover
Farba pozadia šípky po prejdení kurzorom.
--color-detail-product-arrows-icon
Farba ikony šípky v bežnom stave.
--color-detail-product-arrows-icon-hover
Farba ikony po prejdení kurzorom na šípku.
--detail-product-arrows-border-radius
Nastavenie zaoblenia rohov, napríklad 5px, 15px, 25px alebo 100%
Pozrite si postup vo videu
Celým nastavením vás prevediem krok za krokom.
