Cum să editați aspectul paginii în PrestaShop

Aspectul magazinului dvs. PrestaShop definește modul în care conținutul este structurat și prezentat clienților. În funcție de nivelul dvs. de cunoștințe tehnice, puteți modifica aspectul folosind instrumentele de administrare integrate, module specializate sau editând direct codul sursă al temei.

Context

Șabloanele PrestaShop sunt modulare. Acestea se bazează pe locații desemnate ca “Hooks” pe o pagină (cum ar fi antetul, subsolul sau coloana din stânga) – unde pot fi atașate module specifice. Controlul acestor "hooks" și al șabloanelor Smarty (.tpl) subiacente vă permite să transformați complet interfața cu utilizatorul.

Metoda 1: Setări de aspect în panoul de administrare

Aceasta este cea mai rapidă modalitate de a modifica structura de bază (de exemplu, alegerea între o pagină cu lățime maximă sau o pagină cu o bară laterală).

1. Accesați Teme: Mergeți la Îmbunătățire > Design > Tema și logo-ul.
2. Alegeți layout-uri: Faceți clic pe butonul Alegeți layout-uri.
3. Atribuiți structuri: Veți vedea o listă de tipuri de pagini (Categorie, Produs, Contact etc.). Pentru fiecare, puteți selecta:
   • Lățime completă: Fără bare laterale.
   • Trei coloane: Bare laterale atât în stânga, cât și în dreapta.
   • Două coloane: O singură bară laterală, fie în stânga, fie în dreapta.
4. Salvare: Faceți clic pe "Salvare" pentru a aplica modificările la nivel global.

Metoda 2: Gestionarea pozițiilor și a hook-urilor

Dacă doriți să mutați un element specific, cum ar fi mutarea "barei de căutare" din partea de sus în lateral, utilizați managerul de poziții.

1. Deschideți secțiunea "Poziții": Accesați Design > Poziții.
2. Localizați cârligul: Găsiți zona specifică a paginii (de exemplu, displayNav1 sau displayHome).
3. Reordonați: Folosiți mânerele de glisare și plasare pentru a schimba ordinea modulelor din cadrul acelui hook.
4. Deconectare: Dacă doriți să eliminați un modul dintr-un anumit loc fără a șterge modulul în sine, faceți clic pe opțiunea Deconectare.

Metoda 3: Editarea fișierelor șablon (.tpl)

Pentru modificări structurale pe care panoul de administrare nu le acceptă, trebuie să editați fișierele temei prin FTP.

• Antet și subsol: Editați header.tpl și footer.tpl din /themes/[tema-dumneavoastră]/templates/_partials/.
• Pagina produsului: Editați fișierul product.tpl din /themes/[tema-dumneavoastră]/templates/catalog/.
• Cele mai bune practici: Folosiți întotdeauna o temă derivată atunci când editați aceste fișiere. Astfel, veți evita ca aspectul personalizat să fie suprascris la actualizarea temei principale.

Metoda 4: Constructori vizuali de pagini

În 2026, mulți utilizatori PrestaShop preferă modulele "Drag & Drop", care înlocuiesc editorul implicit cu o interfață vizuală.

• Creative Elements: Un constructor de pagini în timp real popular, care vă permite să proiectați vizual anteturi, subsoluri și pagini de produse.
• Editorul CMS implicit: Pentru paginile de conținut standard, accesați Design > Pagini și utilizați editorul încorporat pentru a aranja textul și conținutul media.

Diferența: CSS vs. TPL

• Fișiere TPL: Controlează structura și logica (de exemplu, "Pune prețul deasupra butonului Adaugă în coș").
• Fișiere CSS: Controlează stilul (de exemplu, "Fă prețul să fie cu caractere aldine și albastru"). Stilurile se găsesc de obicei în /themes/[tema-ta]/assets/css/custom.css.

Implicații practice

• Ștergerea cache-ului: După editarea fișierelor .tpl sau .css, este posibil ca modificările dvs. să nu apară imediat. Trebuie să accesați Parametri avansați > Performanță și să faceți clic pe Goliți cache-ul.
• Compilarea Smarty: În timpul editării, setați "Compilarea șabloanelor" la Recompilare șabloane dacă fișierele au fost actualizate pentru a vedea modificările în timp real.
• Vizualizare mobilă: Schimbarea unui layout cu trei coloane la lățime maximă poate afecta semnificativ lizibilitatea pe dispozitive mobile. Verificați întotdeauna layout-ul pe un smartphone după ce efectuați modificări structurale.

Rezumat

Fie că utilizați instrumentul nativ „Alegeți aspectele” pentru modificări structurale rapide, fie că explorați fișierele .tpl pentru un design personalizat, PrestaShop oferă un cadru flexibil pentru gestionarea aspectului. Stăpânind relația dintre Hooks și Module, vă puteți asigura că magazinul dvs. este atât atractiv din punct de vedere vizual, cât și optimizat din punct de vedere funcțional.