Site-uri existente - personalizarea încorporărilor tale

Vezi aici pentru ghidul nostru despre încorporarea pe un site web existent.

Shoprocket oferă control total asupra aspectului încorporărilor de cod prin generatorul de cod din tabloul de bord.

Selectează tipul de încorporare pe care îl dorești (widget pentru un singur produs, produs pe întreaga pagină, mai multe produse sau coș de cumpărături) și apoi activează/dezactivează elementele pe care dorești să le incluzi, precum și personalizarea dimensiunilor, stilurilor și comportamentelor.

Odată ce ai făcut modificări în codul tău de încorporare, va trebui să-l copiezi și să-l lipești pe site-ul tău, acolo unde dorești să apară. (dacă faci modificări ulterioare, va trebui să copiezi și să lipești din nou codul)

Poti, de asemenea, să faci clic pe "Salvează ca setări implicite" în meniul din stânga pentru a stoca setările tale de încorporare, astfel încât toate codurile de încorporare pe care le generezi în viitor să înceapă cu aceleași setări.

Opțiuni

Următoarele opțiuni sunt disponibile în secțiunea "Opțiuni" din meniul din stânga:

1. Produse de afișat - Alege să arăți toate produsele sau doar produsele din categorii specifice
2. Dimensiunea produsului - Setează dimensiunea de afișare a articolelor încorporate (mic, mediu sau mare)
3. Potrivirea imaginii - Definește dacă imaginile produselor ar trebui să fie decupate la dimensiunea disponibilă sau reduse (decupate vor menține toate imaginile la aceeași dimensiune și mai uniforme)
4. Stilul butonului - alegi între "Standard" (buton dreptunghiular cu text), "Minimal" (buton rotund cu icoane) sau "Pe Hover" (buton rotund cu icoane care apar doar când treci cu mouse-ul peste produs)
5. Ordinea de sortare implicită - Definește ordinea de sortare cu care produsele vor fi listate în mod implicit (Implicit, Cele mai recente, Nume: A-Z, Nume: Z-A, Preț: Mic-Mare, Preț: Mare-Mic)
6. Produse pe pagină - Specifică câte produse să fie încărcate în vizualizare
7. Ascunde produsele epuizate - Alege dacă să ascunzi complet produsele epuizate sau să le afișezi cu un mesaj "Epuizat"

Include

Poti, de asemenea, să specifici ce elemente să incluzi, cum ar fi butonul "Vezi produs" și "Benzi"

Următoarele includeri sunt disponibile în secțiunea "Include" din meniul din stânga:

1. Caseta de căutare - Afișează câmpul de "căutare" deasupra încorporării produselor tale (disponibilă doar la încorporarea mai multor produse)
2. Caseta de sortare - Afișează meniul derulant de ordonare (disponibilă doar la încorporarea mai multor produse)
3. Caseta limitator pe pagină - Afișează meniul derulant de articole pe pagină (disponibilă doar la încorporarea mai multor produse)
4. Caseta de valută - Afișează meniul derulant de valută pentru clienți pentru a vizualiza prețurile în valuta preferată (valutele trebuie activate mai întâi în setările magazinului tău)
5. Caseta de limbă - Afișează meniul derulant de limbă pentru clienți pentru a schimba limbile (Textele magazinului trebuie configurate mai întâi în setările tale)
6. Caseta de categorie - Afișează meniul derulant de categorie, permițând clienților să filtreze produsele după categorie (disponibilă doar la încorporarea mai multor produse)
7. Numele produsului - Afișează numele produsului
8. Prețul produsului - Afișează prețul produsului
9. Imaginea produsului - Afișează imaginea principală a produsului
10. Rezumatul produsului - Afișează textul rezumat al produsului
11. Butonul Vezi produs - Afișează butonul pentru a deschide detaliile complete ale produsului într-o fereastră modală
12. Butonul Adaugă în coș - Afișează butonul pentru a adăuga articolul în coș (opțiunile vor apărea deasupra la hover, produsele care necesită opțiuni/variații mai avansate vor deschide fereastra modală pentru vizualizarea produsului la clic)
13. Varianta minim/maxim de comandă - Afișează cantitățile minime și maxime de comandă disponibile, dacă sunt setate în produsul tău
14. Bandă de transport gratuit - Afișează banda "Transport Gratuit" pe produsul tău, dacă transportul gratuit este aplicabil
15. Bandă de produs nou - Afișează banda "Nou" pe produsele adăugate în ultimele 20 de zile
16. Bandă descărcare digitală - Afișează banda "Descărcare Digitală" pe produsele care includ un fișier descărcabil la achiziție

Popup Vezi Produs

Pentru produsele care au opțiunea "vezi produs" activată, poți personaliza care dintre următoarele elemente să fie afișate în modal:

1. Numele produsului - Afișează numele produsului
2. Prețul produsului - Afișează prețul produsului
3. Selectare cantitate - Afișează câmpul de selectare a cantității (dacă este dezactivată, doar 1 poate fi adăugat în coș dintr-o dată)
4. Imaginea produsului - Afișează galeria de imagini a produsului
5. Miniaturi ale imaginii - Afișează miniaturile galeriei de imagini
6. Recenziile produsului - Afișează recenziile produsului
7. Rezumatul produsului - Afișează textul rezumat al produsului
8. Descrierea produsului - Afișează descrierea produsului
9. SKU-ul produsului - Afișează unitatea de măsură a stocului produsului (SKU)
10. Categoriile produsului - Afișează categoriile legate de produse
11. Iconițe pentru partajarea socială - Afișează butoane care permit partajarea produsului pe canale de social media cu un singur clic
12. Produse legate - Afișează produsele legate
13. Varianta minim/maxim de comandă - Afișează cantitățile minime și maxime de comandă disponibile, dacă sunt setate în produsul tău

Poti, de asemenea, să alegi dintre următoarele opțiuni:

1. Potrivirea imaginii - Definește dacă imaginile produsului ar trebui să fie decupate la dimensiunea disponibilă sau reduse (decupate vor menține toate imaginile la aceeași dimensiune și mai uniforme)
2. Lățimea imaginii - Setează lățimea imaginilor
3. Înălțimea imaginii - Setează înălțimea imaginilor
4. Layout miniaturilor - Poziționează miniaturile galeriei de imagini orizontal sub galeria de imagini sau vertical în stânga
5. Stilul variației - Alege între meniuri standard "derulante" sau meniuri text simple
   (în dezvoltare)

Stiluri

Poti personaliza următoarele culori prin generator:

• Titlul produsului
• Prețul produsului
• Rezumatul produsului
• Fundalul butonului de cumpărare
• Textul/iconița butonului de cumpărare
• Fundalul butonului Vezi produs
• Textul/iconița butonului Vezi
• Fundalul butonului Vezi coș
• Textul butonului Vezi coș
• Culoarea widgetului coșului
• Fundalul coșului
• Culoarea textului coșului
• Fundalul elementului produsului

Pentru cei cu abilități de codare, poți desigur să folosești propriile reguli CSS pentru a stiliza încorporările așa cum dorești, nu folosim iFrames, așa că tot conținutul redat în pagina ta face parte din DOM și poate fi stilizat cu propriul tău CSS.

Asigură-te doar că regulile tale CSS sunt mai specifice decât ale noastre.

De exemplu, avem această regulă:

.sr-filters-wrap {
   background: #fff;
}

pentru a o suprascrie, creează-ți propria regulă CSS cu un element părinte precedat, cum ar fi:

body .sr-filters-wrap { 
   background: #000; 
}

Pentru că ai adăugat elementele "body" înaintea regulii noastre, va fi mai specifică decât a noastră și va avea prioritate. 

Poti, de asemenea, să faci modificări direct în generatorul de cod de încorporare dacă te simți mai confortabil cu asta.