Šablona Shopiqueen | šablona k prodeji od Tomáše Navrátila

CZK
- CZK
- EUR

Přihlášení
Přihlášení
Email *
Heslo *
Zaslat zapomenuté heslo
Ještě nemám účet, chci se Registrovat
Další možnosti přihlášení
Přihlásit přes mojeID

Nevíte si rady? Zavolejte.

+420 333 222 111

(Po-Pá, 8-16 hod.)

0 ks

za 0 Kč

Úvod
Tipy a triky

Novinky

06.03.2020

Spustili jsme šablonu MILANO!

Přávě jsme rozběhli novou vzorovou šablonu Milano, revoluční šablonu nové generace! Nabízí nové možnosti, moderní vzhled a horizontální menu. Využijet... číst celé

07.02.2020

Novinky lze snadno editovat a přidávat

Sekci novinek lze editovat v nabídce Obsah webu - Struktura webu - Novinky.Ukažte zákazníkům, že to u vás žije. číst celé

Zobrazit všechny novinky

Blog

05.03.2020 Trendy

Samsung Galaxy S21 Ultra: Trefa do černého?!

Jaké letní outfity letos nechat ve skříni a v jakých naopak zazáříte na každé letní party? Našli jsme pro vás trendy, které tento rok ovládnou světovo... číst celé

01.03.2020 Trendy

Nová sluchátka pro parádní relax

Jsou pohodlné, elegantní a existují v tolika typech, že si je může dovolit každá žena. číst celé

21.12.2018 Inspirace

Nintendo přišlo se zajímavou novinkou

Oblékejte se jako celebrita! Nemusí vás to stát balík, stačí správně hledat! číst celé

Zobrazit všechny články

Nepropásněte novinky, akce a slevy!

Můžete se kdykoli odhlásit. Zasíláme jednou za 14 dní.

Tipy a triky

Zde naleznete pát tipů a triků k šabloně Shopiqueen. HTML a CSS doporučuji do sablony vkládat jen v případě, že s tímto máte alespon minimální zkušenosti. Cesty kam který kód vkládat naleznete vždy nad příslušným kódem.

Velikost obrázku v rotátoru.

Ideální velikost obrázku je 1440px na šířku. Výška je čistě na vás, ale doporučoval bych maximální rozměr 440px. Pokud to přeženete, zbytečně si odsouváte obsah někam za hranu menších displejů.

Šířka: 1440px
Výška: max 440px

Odstranění barevného pole pod rotátorem:

Administrace / nastavení / design webu / editovat šablonu

CSS

/*odstraneni barvy pod rotatorem*/ 
.c1206::before {
    display: none;
}

Bannery na úvodní stránce.

Administrace / nastavení / design webu / editovat šablonu

CSS

/*homepage category*/
.homepage-category_wrapper {
    margin: 70px auto 0;
    max-width: 1440px;
    padding: 0 .9375rem;
}

@media (min-width: 767px) {
    .page-route-homepage .c660.c1537 {
        height: auto;
    }
    .page-route-homepage .c1334.c1538 {
        max-height: 230px;
    }
    .page-route-homepage .c659 {
        grid-template-columns: repeat(4,1fr);
        margin: 0;
    }
    .page-route-homepage .c1334.c1538 {
        object-fit: cover;
        width: 100%;
    }
}
@media (max-width: 767px) {
    .c660.c1537 .c662 {
     margin: 4px;
     font-size: 12.5px;
     line-height: 18px;
     padding: 8px 12px;
    }
    .c660.c1537 {
     height: auto;
	}
}

Administrace / nastavení / design webu / editovat šablonu

HTML mód

Záhlaví

<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.page-route-homepage .content-center').forEach(function(item) {item.insertAdjacentHTML('afterbegin', '<div class="homepage-category_wrapper"> 

<div class="c1199">Nadpis kategorie</div><div class="c659"> 

<a href="*URL adresa ( kam )" class="c660 c1537">
<img src="*URL adresa ( kde )" class="c1334 c1538" alt="">
<span class="c662 c1539">*Text na banneru</span></a>

<a href="*URL adresa ( kam )" class="c660 c1537">
<img src="*URL adresa ( kde )" class="c1334 c1538" alt="">
<span class="c662 c1539">*Text na banneru</span></a>

<a href="*URL adresa ( kam )" class="c660 c1537">
<img src="*URL adresa ( kde )" class="c1334 c1538" alt="">
<span class="c662 c1539">*Text na banneru</span></a>

<a href="*URL adresa ( kam )" class="c660 c1537">
<img src="*URL adresa ( kde )" class="c1334 c1538" alt="">
<span class="c662 c1539">*Text na banneru</span></a>

</div></div>');})
});
</script>

*Text na banneru: Zde zadejte název kategorie, nebo produktu

*URL adresa ( kam ): Zde vložte odkaz na produkt, kategorii... příklad - https://shopiqueen.cz/prislusenstvinebo - /prislusenstvi

*URL adresa ( kde ): Zde vložte odkaz na obrázek kategorie...příklad - https://shopiqueen.cz/fotky10458/hodinky.pngnebo - /fotky10458/hodinky.png

Loga nad patičkou.

Administrace / nastavení / design webu / editovat šablonu

CSS

/*značky nad patičkou*/
.c659.brands {
    grid-template-columns: repeat(8,1fr);
    margin-bottom: 0; 
}
.c31{
    border-top: 1px solid #dee0e3;
    padding: 24px 0 24px 0;
}
.c660.c1537.brand img {
    max-height: 40px;
    object-fit: contain;
    width: auto;
    border-radius: 0;
}
.c1489 {
    margin-bottom: -72px;
}
@media (max-width: 767px) {
    .c659.brands {
        grid-template-columns: repeat(4,1fr);
    }
    .c1489 {
    margin-bottom: -64px;
    }
}

Administrace / obsah webu / patička webu

Prostor nad patičkou webu

<div class="c659 brands">

  <a href="Zde vložte odkaz na produkt, kategorii" class="c660 c1537 brand">
  <img src="Zde vložte odkaz na obrázek kategorie" class="c1334 c1538" alt=""></a>

  <a href="Zde vložte odkaz" class="c660 c1537 brand">
  <img src="Zde vložte odkaz na obrázek" class="c1334 c1538" alt=""></a>

  <a href="Zde vložte odkaz" class="c660 c1537 brand">
  <img src="Zde vložte odkaz na obrázek" class="c1334 c1538" alt=""></a>

  <a href="Zde vložte odkaz" class="c660 c1537 brand">
  <img src="Zde vložte odkaz na obrázek" class="c1334 c1538" alt=""></a>

  <a href="Zde vložte odkaz" class="c660 c1537 brand">
  <img src="Zde vložte odkaz na obrázek" class="c1334 c1538" alt=""></a>

  <a href="Zde vložte odkaz" class="c660 c1537 brand">
  <img src="Zde vložte odkaz na obrázek" class="c1334 c1538" alt=""></a>

</div>

*Zde vložte odkaz na produkt, kategorii, dodavatele... příklad - https://shopiqueen.cz/prislusenstvinebo - /prislusenstvi

*Zde vložte odkaz na obrázek loga...příklad - https://shopiqueen.cz/fotky10458/hodinky.png">https://shopiqueen.cz/fotky10458/hodinky.png nebo - /fotky10458/hodinky.png

Odstranění pozadí na telefonech.

Slouží k odstranění nahraného obrázku pozadí, který by mohl na mobilních zařízeních stěžovat čitelnost textů.

Obrázek pozadí ( 3D tvary ) ke stažení

Administrace / nastavení / design webu / editovat šablonu

CSS

/*vypnutí bg na telefonu*/
@media (max-width: 1000px) {
  .c1427 {
    background-image: none;
  }
}

*1000px: Zde vložte maximální šířku zobrazení, do které bude pozadí vypnuto ( doporučuji neměnit )

Odstranění barevných "skvrn" v pozadí.

Slouží k odstranění barevných "fleků" umístěných v pozadí šablony

Administrace / nastavení / design webu / editovat šablonu

CSS

/*odstranění "skvrn" v pozadí*/
.c1491::after,
.c1942::after,
.content-wrapper-top::before,
.content-wrapper-top::after {
display: none;
}

Podbarvení označeného textu.

Slouží k podbarvení označeného textu ( výběr kurzoru )

Administrace / nastavení / design webu / editovat šablonu

CSS

/* barva označeného textu na stránce */
::selection {
  color: #fff;
  background: #348cff;
}

*Barva písma

*Barva podbarvení pod textem

Děkuji

tomas@empiredesign.cz

Novinky z našeho blogu

05.03.2020 Trendy

Samsung Galaxy S21 Ultra: Trefa do černého?!

Jaké letní outfity letos nechat ve skříni a v jakých naopak zazáříte na každé letní party? Našli jsme pro vás trendy, které tento rok ovládnou světovo... číst celé