Tema Colorix

Configurarea temei Colorix

• Instalare
• Configurare aspect
• Instalare Demo

Instalare

* Înainte de instalarea temei, este recomandat să citiți întreaga secțiune dedicată temei Colorix.

* Înainte de realizarea oricărei modificări, este recomandat să realizați un back-up al sistemului.

 

Există 2 metode pentru adăugarea fișierelor temei:

Metoda 1

Copiați dosarele din dosarul "upload", aflat în arhiva temei, în dosarul sursă al site-ului. Selectați "da" pentru a îmbina următoarele dosare: admin, catalog, image, și system.

Metoda 2

Accesați panoul de administrare al site-ului și asigurați-vă că aveți setările corecte pentru FTP(se găsesc în meniul Sistem -> Setări -> Editează setări).

 

 

După verificarea acestor setări, în meniul Extensii -> Instalează Extensie, încărcați arhiva "colorix.ocmod.zip". După încărcare apăsați butonul Continuă.

 

 

Instalare

Pentru activarea temei, accesați meniul Extensii -> Extensii -> Teme. Apăsați butonul instalează aflat în dreptul "Tema Colorix".

 

 

Pentru activarea temei, accesați meniul Extensii -> Extensii -> Teme. Apăsați butonul instalează aflat în dreptul "Tema Colorix".

* Instalarea temei asigură și o primă configurare a setărilor necesare.

*Pentru buna funcționare a temei, nu ștergeți modificările temei sau event-urile adăugate de aceasta.

Configurare aspect

* Pentru a configura tema, accesați tab-ul "Aspect" din "Colorix UI", sau din pagina de administrare a temei (Extensii -> Extensii -> Teme -> Tema Colorix).

 

Scheme de Culoare

Tema Colorix vă permite să schimbați schema de culoare a magazinului dvs. direct din Panoul de Administrare. Puteți alege între albastru, verde, portocaliu, roșu, și negru, și să modificați în acest fel bara de navigare, butoanele, și toate meniurile de site.

Fundal

În cazul în care doriți să setați o culoare sau chiar o imagine de fundal, puteți face acest lucru cu ușurință de pe pagina de administrare a temei.

Custom CSS

În cazul în care setările de configurare a Design-ului nu sunt suficiente, puteți scrie propriul cod CSS pentru a personaliza tema.

 

 

Pagina Header

Bară de Navigare

Bara de Navigare poate fi personalizată cu orice secțiuni doriți. Pentru a face acest lucru, trebuie doar să specificați numele secțiunilor și URL-urile acestora.

De asemenea puteți alege între meniu de categorii afișate în linie pe bara de navigare sau sub forma de buton (opțiune care este setată în mod implicit).

 

Pagina Footer

Tip Footer

Tema vă pune la dispoziție 2 modele de footer, precum și opțiunea de a afișa adresa de email.

Secțiuni Footer

Puteți adăuga 3 tipuri diferite de secțiuni: rețele sociale(Facebook, Google+, Instagram, sau Twitter), text footer(ex: secțiune "despre noi"), și Custom HTML .

Secțiunea Custom HTML vă permite să adăugați conținut personalizat HTML în subsolul paginii, pentru a adăuga pe site de exemplu diverse link-uri externe sub formă de text sau mici imagini, etc. Introduceți codul HTML împreună cu stilizarea CSS inline în secțiunea "Secțiune Custom HTML" și conținutul va apărea în subsolul paginii.

 

Pagina Contact

Harta Google

Dacă doriți să adăugați o hartă Google pe pagina dvs. de contact, o puteți face foarte ușor din panoul de administrare a temei.

 

Mai întâi, găsiți secțiunea "Harta" și selectați "Da". Apoi, copiați și inserați codul generat de Google Maps,

ex.: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2847.8220762713195!2d26.03960431592463!3d44.4573194791019
6!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b20185ce5b6d8d%3A0x19f1ebfbdb90364d!2sBulevardul+Constructorilor
%2C+Bucure%C8%99ti!5e0!3m2!1sen!2sro!4v1493976059436" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

Sfat: Pentru a obține codul Google Maps, căutați locația dvs., faceți clic pe "SHARE" -> "Embed map" și copiați codul.

Pagina Produse

Aici puteți selecta numărul de produse ce apar în pagină, lungimea descrierii scurte a produsului, și pagina de informații pentru garanții.

De asemenea, puteți seta modul de afișare al zecimalelor produsului, afișare "Quickview"(Vizualizare rapidă) pentru produse, și afișare butoane "Compară" și "Wishlist".

În plus, puteți adăuga tab-uri suplimentare pentru produse, și puteți afișa datele de contact ale agenților de vânzări.

 

 

Pagina Imagini

Aici puteți selecta dimensiunile pentru imagini, precum și calitatea acestora.

 

Pagina Import / Export

Aveți posibilitatea de a importa sau exporta setările temei, precum și setările modulelor si layout-urilor. Pentru import este necesar un fișier de tip "json".

 

 

Modul Colorix Cart Total

Afișare Colorix Cart Total

1. Accesați Extensii -> Extensii -> Module -> Instalați Colorix Cart Total, după care îl editați și declarați status-ul Activat.
2. Accesați Design -> Layout-uri -> Adaugă Nou, după care îl editați și îi declarați numele: "Cart", ruta: "checkout/cart", și în coloana din dreapta adăugați modulul Colorix Cart Total.

Modul Colorix Prezentare Categorii

Pentru configurarea acestui modul, accesați Extensii -> Extensii -> Module -> Instalați Colorix Prezentare Categorii, apoi îl editați, având următoarele opțiuni:

• Setarea tipului de prezentare: simplă sau detaliată;
• Direcția de orientare a modulului: stanga sau dreapta;
• Selectarea categoriei produselor ce vor fi afișate;
• Tipul produselor(cele mai vândute, ultimele adăugate, produse cu preț special, produse populare, produse alese aleator, sau alegere individuală a produselor);
• Imaginea de fundal. Pentru prezentarea simpla, aveți posibilitatea de a selecta tipul de fundal;
• Setare dimensiuni imagini produse.

*Exemplu prezentare detaliată:

 

*Exemplu prezentare simplă:

 

 

Modul Colorix Prezentare Produse Categorie

Pentru configurarea acestui modul, accesați Extensii -> Extensii -> Module -> Instalați Colorix Prezentare Produse Categorie, apoi îl editați, având următoarele opțiuni:

• Tipul produselor(cele mai vândute din categorie, ultimele adăugate în categorie, produse cu preț special din categorie, produse populare din categorie, produse alese aleator din categorie, sau alegere individuală a produselor);
• Setare dimensiuni imagini produse.

 

Modul Colorix Prezentare Produse

Pentru configurarea acestui modul, accesați Extensii -> Extensii -> Module -> Instalați Colorix Prezentare Produse, apoi îl editați, având următoarele opțiuni:

• Direcția de orientare a modulului: stanga sau dreapta;
• Tipul produselor(cele mai vândute, ultimele adăugate, produse cu preț special, produse populare, produse alese aleator, sau alegere individuală a produselor);
• Setare dimensiuni imagini produse.

 

Modul Newsletter Colorix

Afișare Newsletter Colorix

Accesați Extensii -> Extensii -> Module -> Instalați Colorix Newsletter, după care îl editați și declarați status-ul Activat.

 

După instalarea acestui modul, accesați tab-ul newsletter subscribers(din meniul Marketing). Aici puteți vedea toți abonații newsleter-ului, adăuga sau șterge abonați, sau să exportați lista acestora.

 

Modul Colorix Produse Vizualizate Recent

Accesați Extensii -> Extensii -> Module -> Instalați Colorix Produse Vizualizate Recent.

Acest modul vă permite să afișați produsele vizualizate recent de către utilizator, și are următoarele opțiuni:

• Limită (numărul produselor);
• Setare dimensiuni imagini produse;
• Afișare tip carusel.

 

Modul Colorix Social

Afișare Colorix Social

Accesați Extensii -> Extensii -> Module -> Instalați Colorix Social, după care îl editați și declarați status-ul Activat.

Acest modul vă oferă posibilitatea de a afișa rețelele sociale pe care le utilizați.

Modulul are următoarele opțiuni:

• Link către pagina de Facebook;
• Link către canalul de Youtube;
• Link către pagina de Twitter;
• Link către WhatsApp.

 

Modul Demo Colorix

Afișare Colorix Demo

Accesați Extensii -> Extensii -> Module -> Instalați Demo Colorix, după care îl editați și declarați status-ul Activat.

După activare, modulul oferă posibilitatea de a testa pe pagina principală setări precum: culorile temei, tip bară de navigare, tip meniu, respectiv tip footer.

 

 

Modul Produse Homepage

Configurarea modulului este destul de simplă, trebuie doar să accesați pagina de administrare a modulului (Extensii -> Module -> Produse Homepage -> Editați) și pe această pagină veți putea:

• Adăugați categoriile din care doriți să fie generate produsele și numărul de produse generate din fiecare categorie.
• Pentru fiecare categorie puteți seta ordinea în care acestea sunt afișate din partea de sus în partea de jos a paginii.
• Setați lățimea și înălțimea imaginii în miniatură a produsului.
• Alegeți numărul de coloane (produse pe rând) atunci când produsele sunt afișate în grilă.
• Alegeți dacă doriți ca produsele să fie afișate într-un carusel sau nu
• Activați / dezactivați modulul

Odată ce modulul este configurat, mergeți la Design -> Layout-uri -> Home și adăugați modulul în poziția dorită.

Atenţie: Asigurați-vă că aveți produse în categoriile pe care le-ați selectat, altfel modulul nu va fi afișat!

Modul Manager Layout

Afișare meniu vertical pe Homepage

Meniul din bara de navigare poate fi afișat pe vertical alături de alte extensii. Ca exemplu vom adăuga un banner folosind extensiile Meniu Vertical, Slideshow și Manager Layout

1. Accesați Extensii -> Extensii -> Module -> Instalați Meniu Vertical, după care îl editați și declarați status-ul Activat.
2. Dacă nu aveți un banner puteți crea unul accesând Design -> Banere și adăugați o intrare nouă unde puteți configura banner-ul.
3. Accesați Extensii -> Extensii -> Module -> Instalați Slideshow, după care îl editați și îi declarați Numele, Banner-ul, Status-ul activat, Lățimea (recomandată pentru acest exemplu: 839) și Înălțimea (recomandată pentru acest exemplu: 336).
4. Accesați Extensii -> Extensii -> Module -> Instalați Manager Layout, după care îl editați.
5. Îi declarați un nume, îl activați, alegeți formatul de afișare "25% | 75%".
6. În Conținut stânga apăsați pe butonul de adăugare, selectați Meniu Vertical cu Număr Ordine 0.
7. În Conținut centru apăsați pe butonul de adăugare, selectați Slideshow-ul cu numele corespunzător cu Număr Ordine 0.
8. După configurare, salavați setările, accesați Design -> Layout-uri -> editați Home, iar în Conținut de sus, pe prima linie adăugați Manager layout-ul creat și salvați.

Extensia Manager Layout vă poate oferi multe posibități de afișare a extensiilor, iar tabelele de conținuturi din acesta vă afisează care este mărimea și distanța între extensiile adăugate.

 

 

 

Modul Sugestii de Căutare Ajax

Acest modul permite afișarea rezultatelor căutarii în timp real, fara a fi necesară reîncărcarea paginii, având următoarele opțiuni:

• Lungimea maximă a titlului;
• Numărul maxim de produse afișate;
• Afișarea imaginilor în dreptul produselor;
• Setarea dimensiunii imaginilor;
• Afișează categoria/producătorul în câmpul de căutare;
• Numărul maxim de producători afișați;
• Numărul maxim de categorii afișate;
• Afișează prețurile produselor.

 

Modul Conţinut HTML

Acest modul permite adăugarea de elemente HTML în cadrul paginii. Configurarea este următoarea:

<section class="benefits">
    <div class="row">
        <div class="info-box col-lg-4 col-md-4 col-sm-12 d-flex">
            <div class="info-box-inner bordered clearfix d-flex col-12">
                <div class="icon fa fa-truck"></div>
                <div class="info-box-text">
                    <h4><span>TRANSPORT GRATUIT</span>
                        pentru comenzile
                        ce depasesc <i>500 lei</i></h4>
                </div>
            </div>
        </div><!-- end info-box -->
        <div class="info-box col-lg-4 col-md-4 col-sm-12 d-flex">
            <div class="info-box-inner bordered d-flex col-12 clearfix">
                <div class="icon fa fa-gift"></div>
                <div class="info-box-text">
                    <h4><span>OFERTE SPECIALE</span>
                        in toate categoriile
                        de produse</h4>
                </div>
            </div>
        </div><!-- end info-box -->
        <div class="info-box col-lg-4 col-md-4 col-sm-12 d-flex">
            <div class="info-box-inner bordered clearfix col-12 d-flex">
                <div class="icon fa fa-calendar"></div>
                <div class="info-box-text">
                    <h4><span>GARANTIA CALITATII</span>
                        ai 30 de zile in care
                        poti returna produsele</h4>
                </div>
            </div>
        </div><!-- end info-box -->
    </div>
</section>

Instalare Demo

* Înainte de instalarea demoului, asigurați-vă că aveți tema Colorix instalată.

Pentru a instala varianta demo, în panoul de administrare, accesați Extensii -> Extensii -> Module -> Instalați modulul Colorix Demo, după care il editați și apăsați butonul "Instalează Demo Colorix", confirmați apoi instalarea demoului apăsând "OK" (nu este necesară activarea modulului Demo Colorix pentru instalare).

* Nu recomandăm apăsarea butonului "Instalează Demo Colorix" de mai multe ori!

Categoriile sau produsele prezentate în demo pot diferii de cele pe care doriți să le afișați, este recomandat să verificați setările modulelor, și să le modificați în funcție de nevoile dumneavoastră.

* ATENȚIE! Instalarea suprascrie setările actuale.