Dvousloupcový seznam s ikonou pro krátký popis produktu

Detailní popis produktu

Vlastní dvousloupcový seznam s ikonkou pro krátký popis produktu

Tento digitální produkt je jednoduchá, ale výrazná CSS úprava krátkého popisu produktu. Nahradí klasické odrážky v seznamu .p-short-description ul za vlastní ikonu a zobrazí položky ve dvou užších sloupcích, které vypadají profesionálněji, šetří místo a lépe se čtou.

Co přesně úprava dělá

• Vlastní ikonka místo odrážky – každý řádek má jednotnou check ikonku ze souboru SVG.
• Dva sloupce v krátkém popisu – více bodů se vejde na menší plochu, bez zbytečného rolování.
• Lepší čitelnost a přehlednost – kratší řádky vedle sebe se uživateli lépe skenují a analyzují.
• Designově čistší vzhled – seznam působí jako promyšlený benefit box, ne jako obyčejný výpis.
• Responzivní chování – na mobilu se seznam automaticky přepne do jednoho sloupce.
• Zásah jen do detailu produktu – úprava ovlivňuje pouze seznam v krátkém popisu, zbytek šablony zůstává beze změny.

Implementace v administraci Shoptetu

Nejprve si připravte vlastní ikonku (ideálně 20 × 20 px) ve formátu SVG:

• V administraci přejděte do Vzhled a obsah > Správce souborů.
• Nahrajte nový soubor SVG s ikonkou, například check_icon.svg.
• Cestu k souboru pak použijete v CSS v background-image: url("/user/documents/upload/check_icon.svg");.

Poté vložte dodaný CSS kód:

• V administraci otevřete Vzhled a obsah > Editor > HTML kód.
• Najděte část se styly a vložte CSS mezi tagy <style> … </style>.
• Uložte změny a zkontrolujte detail produktu – krátký popis se zobrazí ve dvou sloupcích s vlastní ikonkou.

Celá úprava je jednoduchá, ale vizuálně udělá hodně – krátký popis je kompaktnější, přehlednější a působí profesionálněji.