Úvod » Blog » Shoptet propojení stylů CSS

Jak upravit CSS kód u e-shopu na systému Shoptet

Chcete změnit barvy, písmo, velikosti tlačítek nebo rozložení prvků na Shoptetu? Nemusíte sahat do šablony ani programovat složitě. Stačí upravit vlastní CSS. V tomto návodu vám ukážu, kde CSS na Shoptetu najdete, jak ho bezpečně upravit a na co si dát pozor.

Co je CSS a k čemu slouží

CSS určuje, jak web vypadá. Řeší barvy, písma, velikosti, mezery, zarovnání i chování prvků na mobilu. Nemění obsah, ale vzhled.

Kde na Shoptetu upravit CSS

Postup:

  1. Přihlaste se do administrace Shoptetu.
  2. Jděte do Vzhled a obsah.
  3. Klikněte na Šablony.
  4. Otevřete Editor nebo Vlastní CSS.
  5. Najdete pole pro vlastní CSS kód.

Vše, co sem napíšete, přepíše styl šablony bez zásahu do systému.

Základní úpravy CSS

Změna barvy tlačítek


.btn, .button {
  background-color: #ff6600;
  color: #ffffff;
}

Změna barvy při najetí myší


.btn:hover {
  background-color: #cc5200;
}

Změna písma


body {
  font-family: Arial, sans-serif;
}

Zvětšení nadpisů


h1 { font-size: 36px; }
h2 { font-size: 28px; }

Úpravy hlavičky e-shopu

Zmenšení výšky hlavičky


.header {
  padding: 10px 0;
}

Zarovnání loga


.site-logo {
  text-align: left;
}

Úpravy produktů

Změna ceny produktu


.product-price {
  color: #e60000;
  font-size: 22px;
  font-weight: bold;
}

Zvětšení tlačítka „Do košíku“


.add-to-cart-button {
  padding: 15px 25px;
  font-size: 18px;
}

Úpravy pro mobilní verzi

Pro mobil se používají tzv. media queries.


@media (max-width: 768px) {
  .header {
    padding: 5px 0;
  }

  h1 {
    font-size: 26px;
  }
}

Jak zjistit správnou třídu prvku

V prohlížeči:

  • Klikněte pravým tlačítkem na prvek.
  • Zvolte „Prozkoumat“ nebo „Inspect“.
  • Uvidíte HTML a názvy tříd.

Tyto názvy pak použijete v CSS.

Jak upravovat CSS bezpečně

  • Ukládejte změny po částech.
  • Testujte na mobilu i počítači.
  • Pište nové styly dolů, aby přepisovaly staré.
  • Nemažte původní styl šablony.

Nejčastější chyby

  • špatně napsaný název třídy
  • chybějící středník ;
  • neukončená složená závorka }
  • testování jen na počítači, ne na mobilu

Shrnutí

Úprava CSS na Shoptetu je nejrychlejší cesta, jak změnit vzhled e-shopu bez zásahu do systému.

  • Jděte do Vzhled a obsah → Šablony → Vlastní CSS.
  • Upravujte barvy, písma, mezery i rozložení.
  • Testujte na mobilu i počítači.
  • Ukládejte změny postupně.

Díky CSS můžete mít e-shop přesně podle sebe, bez programátora a bez rizika rozbití systému.