Secțiunea Product info este partea principală a paginii de produs. Arată imaginile produsului într-o parte și detaliile lui (numele, descrierea și formularul de comandă) în cealaltă. Este obligatorie pe pagina de produs, așa că îi poți schimba stilul, dar nu o poți șterge.
Unde o găsești
- Deschide the builder și alege Product page în fila Pages.
- Alege un produs de previzualizat. Asta schimbă doar ce arată previzualizarea: designul tău se aplică tuturor produselor deodată.
- Dă clic pe Product info în previzualizare sau în fila Sections.
Secțiunea are două părți fixe, Media și Details. Nu le poți elimina sau muta, doar configura. Pe telefoane se așază una sub alta: întâi imaginile, apoi detaliile.
Setările secțiunii
- Section width: Page păstrează conținutul în lățimea paginii, Full merge de la o margine la alta.
- Equal columns: pornit, imaginile și detaliile ocupă fiecare jumătate din lățime. Oprit, fiecare coloană ocupă cât spațiu are nevoie.
- Color scheme, Gap (spațiul dintre cele două coloane), spațierea interioară și Custom CSS.
Media: galeria de imagini
Arată fotografiile și videoclipurile pe care le-ai adăugat la produs.
- Mode: Carousel (câte o imagine) sau Grid (toate imaginile deodată).
- Sticky: Off, Desktop, Mobile sau Both. O galerie fixă rămâne vizibilă cât timp cumpărătorii derulează detaliile.
- Grid: Columns (1 sau 2), Gap și Full width first (prima imagine se întinde pe ambele coloane).
- Carousel: Navigation icons (Arrows, Chevrons sau None), Icon background, Desktop pagination (Dots, Counter, Thumbnails) și Mobile pagination (Dots, Counter, Hint, Thumbnails). Hint arată o parte din imaginea următoare.
- Thumbnails: cu miniaturi pe desktop, setează Desktop position (Left, Bottom, Right) și Desktop size. Pe telefoane stau mereu sub imagine.
- Aspect ratio: Auto păstrează forma proprie a fiecărei imagini. Cu Portrait, Square sau Landscape, Media fit alege Cover (umple și decupează) sau Contain (arată toată imaginea).
- Enable zoom: cumpărătorii dau clic sau ating o imagine ca s-o vadă pe tot ecranul.
Details: blocurile de lângă imagini
Details are Gap și Sticky on desktop (coloana rămâne vizibilă cât timp cumpărătorii derulează pe lângă imagini). Selecteaz-o și apasă Add new block ca să adaugi blocuri, apoi trage-le în orice ordine.
- Title: numele produsului, o dată pe pagină. Setează Width, Alignment, Preset, Line height și Letter spacing. Show above image on mobile mută numele (cu nota lui) deasupra galeriei pe telefoane. Show reviews above title pune stelele deasupra numelui.
- Description: textul din produs. Setează înălțimea rândului și spațierea literelor. Cu Click image to scroll pornit, un clic în descriere derulează până la formularul de comandă când niciun formular nu este pe ecran. Linkurile funcționează în continuare.
- Form: prețul, variantele și butonul de cumpărare. Opțiunile lui sunt în Cum configurez secțiunea Landing info și formularul de comandă (butoane, numărătoare inversă, WhatsApp)?
- Divider: până la 2 linii între blocuri.
- Collapsibles, Delivery timeline, Size guide, Badges și Before and after: vezi Cum adaug pe pagina de produs file pliabile, date de livrare, un ghid de mărimi, insigne sau imagini înainte și după?
Form și Description sunt obligatorii: le poți muta, dar nu le poți șterge.
Butonul fix
Păstrează pe ecran o modalitate de a cumpăra după ce cumpărătorii derulează mai departe de formularul de comandă. Se ascunde din nou cât timp un formular este vizibil. Mode:
- None: niciun element fix.
- Bar: o bară jos cu prețul, cantitatea și butonul de cumpărare.
- Button: un buton plutitor care derulează până la formular. Setează Label (gol folosește textul butonului de cumpărare), Style (Primary sau Secondary), Position (Start, Center, End) și Animation (Pulse, Heartbeat, Shake, Bounce, Glow, Ripple, Wiggle sau None).
- Image: o imagine plutitoare aleasă de tine care derulează până la formular, cu Position și Animation.
În constructor, elementul fix apare cât timp secțiunea este selectată, ca să-l poți stiliza.